Verfall975
Verfall975

千锋web前端教学知识点记录及个人理解2

WEB前端知识点记录（21-45集）

  • 第二十一集-嵌套列表
    • 嵌套列表仿写
  • 第二十二集-表格标签
    • 课堂练习
  • 第二十三集-表格属性
    • 课堂练习（改）
  • 第二十四集-表单属性
    • 课堂练习
  • 第二十五集-表单相关标签
    • 课堂练习（改）
  • 第二十六集-表格表单组合实例
    • 课堂练习
    • 作业1
  • 第二十七集-div与span
    • 课堂练习
  • 第二十八集-css语法格式
    • 课堂练习
  • 第二十九集-内联样式与内部样式
    • 课堂练习
  • 第三十集-外部样式
    • 课堂练习
  • 第三十一集-css颜色表示法
    • 课堂练习
  • 第三十二集-css背景样式
  • 第三十三集-背景实现视觉差效果
    • 课堂练习
  • 第三十四集-边框样式
  • 第三十五集-边框实现三角形
    • 课堂作业
  • 第三十六集-css字体类型
    • 课堂作业
  • 第三十七集-字体大小粗细样式
  • 第三十八集-文本修饰与文本大小写
  • 第三十九集-文本缩进与文本对齐
  • 第四十集-文本的行高
  • 第四十一集-文本间距与英文折行
  • 第四十二集-文本与段落实现简介
    • 课堂作业
  • 第四十三集-css复合样式
  • 第四十四集-id选择器及注意事项
  • 第四十五集-class选择器
    • 课堂作业

第二十一集-嵌套列表

  1. 列表之间互相嵌套可以形成多层级的列表

嵌套列表仿写

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <ul>
        <li>依阿华级战列舰li>
        <ul>
        <li>依阿华号<BB61>li>
        <li>新泽西号<BB62>li>
        <li>密苏里号<BB63>li>
        <li>威斯康星号<BB64>li>
        <li>伊利诺伊号<BB65>li>
        <li>肯塔基号<BB66>li>
        ul>
    ul><br>
    <ul>
        <li>狮级战列舰li>
        <ul>
        <li>狮号<Lion>li>
        <li>蛮勇号<Temeraire>li>
        ul>
    ul>
    <ul>
        <li>大和级战列舰li>
        <ul>
        <li>大和号<Yamato>li>
        <li>武藏号<Musashi>li>
        <li>信浓号航空母舰li>
        ul>
    ul>
body>
html>

第二十二集-表格标签

  1. :表格最外层容器
    :定义表格行
    、、
    (在一个table章，tBody可以出现多次，tHead、tFood只能出现一次)

    课堂练习

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <table>
        <caption><strong>2022年物理诺奖得奖情况strong>caption>
        <thead>
           <tr>
            <th>获奖人员th>
            <th>获奖成就th>
           tr> 
        thead>
        <tbody>
            <tr>
                <td>阿兰·阿斯佩（(Alain Aspect)td>
                <td>采用快速抽离验证量子不确定性td>
            tr>
            <tr>
                <td>约翰·弗朗西斯 · 克劳泽(John F. Clauser)td>
                <td>采用快速抽离验证量子不确定性td>
            tr>
            <tr>
                <td>安东·塞林格(Anton Zeilinger)td>
                <td>创新方法验证量子不确定性与其纠缠特性td>
            tr>
        tbody>
    table>
body>
html>

    第二十三集-表格属性

    1. 表格属性：：表格边框（加在table中）
      ：单元格内空间
      ：单元格之间的空间
      ：合并行（加在tr下的td中）
      ：合并列
      ：左右对齐方式(left、center、right)
      ：上下对齐方式(top、middle、bottom)

    课堂练习（改）

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <table border="1" cellpadding="30" cellspacing="0.5">
        <caption><strong>2022年物理诺奖得奖情况strong>caption>
        <thead>
           <tr align="left" valign="top">
            <th>人员形象th>
            <th>获奖人员th>
            <th>获奖成就th>
           tr> 
        thead>
        <tbody>
            <tr>
                <td><img src="https://bkimg.cdn.bcebos.com/pic/0824ab18972bd40735fa8ae027dc89510fb30f24a32b?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt="">td>
                <td>阿兰·阿斯佩（(Alain Aspect)td>
                <td>采用快速抽离验证量子不确定性td>
            tr>
            <tr>
                <td><img src="https://bkimg.cdn.bcebos.com/pic/0b7b02087bf40ad162d95dec0b7906dfa9ec8a13603c?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt="">td>
                <td>约翰·弗朗西斯 · 克劳泽(John F. Clauser)td>
                <td>采用快速抽离验证量子不确定性td>
            tr>
            <tr>
                <td><img src="https://bkimg.cdn.bcebos.com/pic/48540923dd54564e9258ff37ef8b8b82d158ccbfe13a?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt="">td>
                <td>安东·塞林格(Anton Zeilinger)td>
                <td>创新方法验证量子不确定性与其纠缠特性td>
            tr>
        tbody>
    table>
body>
html>

    第二十四集-表单属性

    1. ：表单的最外层容器（注：action为提交地址）
    2. ：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。（单标签）
      type属性：text（文本输入框）（placeholder为默认文字栏）
      password（密码输入框）
      checkbox（复选框）（注：checked为默认勾选，disabled为禁止使用）
      radio（单选框）（注：通过name进行附加）
      file（上传文件）
      submit（提交按钮）
      reset（重置按钮）

    课堂练习

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <h1>注册表格h1>
    <form>form>
    <h4>用户名h4>
    <input type="text" placeholder="请输入用户名">
    <h4>密码h4>
    <input type="password" placeholder="请输入密码">
    <h4>上传您的头像h4>
    <input type="file">
    <h4>您是否同意我方协议许可h4>
    <input type="radio" name="许可申请">是
    <input type="radio" name="许可申请">否
    <br>
    <input type="submit">
    <input type="reset">
body>
html>

    第二十五集-表单相关标签

    :定义表头
    		:定义表格单元
    :定义表格标题
    （注：之间是有嵌套关系的，要符合嵌套规范）
  2. 语义化标签：
    3.