HTML的学习笔记3

列表标签

列表标签的应用场景：在网页中按照行展示关联的内容
特点：按照行的方式，整齐显示内容
种类：有序列表，无序列表，自定义列表

无序列表

标签是由ul标签名和li标签名组成的。
ul标签是无序列表的整体用于包裹标签，li标签表示无序列表的每一项，用于包含内容。
注意：

  • ul只能包含li标签
  • li标签能包含任意内容
    举例
    1
    2
    3
    4
    5
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

有序标签

标签是由ol标签和li标签名组成，其余的规则与无序标签是相同的。
举例

1
2
3
4
5
</ul>
<ol>
    <li>张三 100</li>
    <li>李斯 80</li>
</ol>

自定义列表

标签是由dl标签名，dt标签名，dd标签名组成。
dl标签名：表示自定义列表的整体，用于包裹dt/dd标签。
dt标签名：表示自定义列表的主题。
dd标签名：表示自定义列表的针对主题的每一项内容。
显示特点：

  • dd前会默认显示缩进效果
    注意：
  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容
    举例：
    1
    2
    3
    4
    <dl>
        <dt>帮助中心</dt>
        <dd>用户指南</dd>
    </dl>

    表格

    表格标签的基本属性

    表格的应用场景：在网页中以行+列的单元格的方式整齐的展示数据，如：学生的成绩等
    基本的标签属性：

    标签名称 说明
    table 表格整体，可以用于包裹多个tr
    tr 表格每行，用于包裹td
    td 表格单元格，可用于包裹内容

    注意点：

    • 标签的嵌套关系：table > tr >td
      代码举例
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <body>
          <table>
              <tr>
                  <td>姓名</td>
                  <td>成绩</td>
                  <td>评语</td>
              </tr>
              <tr>
                  <td>墨尘</td>
                  <td>100分</td>
                  <td>加油干</td>
              </tr>
          </table>
      </body>

    表格的相关属性

    应用在设置表格的基本展示效果
    常见的相关属性:

    属性名 属性值 效果
    border 数字 边框宽度
    width 数字 边框高度
    height 数字 边度高度

    注意点：

    • 相关属性名应写在table标签内
    • 在实际开发针对于样式效果推荐使用css进行设置