学习HTML的第二天-CSDN博客

本文链接：https://blog.csdn.net/weixin_43979257/article/details/128063589

HTML的列表和表格标签

一、列表标签

1、无序列表ul、li

代码片段：

<h1>水果列表</h1>
  <!-- ul表示无序列表的整体 -->
  <!-- li表示无序列表的每一项 -->
  <!-- p 为段落标签-->
  <ul>
    <li>
      <p>我也是一个p标签</p>
    </li>
    <li>榴莲</li>
    <li>香蕉</li>
    <li>苹果</li>
    <li>哈密瓜</li>
    <li>火龙果</li>
  </ul>

结果截图：

在这里插入图片描述

显示特点：

列表的每一项前默认显示圆点标识

注意事项：

ul标签里只允许包含li标签
li标签可以包含任何内容

2、有序列表ol、li

代码片段：

  <h1>成绩排行榜</h1>

  <!-- ol表示有序列表的整体 -->
  <!-- li表示有序列表的每一项 -->
  <ol>
    <li>小A：100分</li>
    <li>小B：80分</li>
    <li>小C：60分</li>
  </ol>

结果截图：

在这里插入图片描述

显示特点：

列表的每一项前默认显示序号表示

注意事项：

ol标签里只允许包含li标签
li标签可以包含任何内容

3、自定义列表dl、dt、dd

应用场景：

通常用于网页底部导航

代码片段：

  <!-- dl表示自定义列表的整体 -->
  <!-- dt表示自定义列表的主题（标题） -->
  <!-- dd表示自定义列表中的每一项解释说明 -->
  <dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
  </dl>

结果截图：

在这里插入图片描述

显示特点：

dd前会默认显示缩进效果

注意事项：

dl标签里只允许包含dt/dd标签
dt/dd标签可以包含任何内容

二、表格标签

1、表格基本标签table、tr、td

代码片段：

  <!-- table表示表格的整体 -->
  <!-- tr表示表格的每一行 -->
  <!-- td表示表格的单元格 -->
  <table>
    <tr>
      <td>姓名</td>
      <td>成绩</td>
      <td>评语</td>
    </tr>
    <tr>
      <td>小A</td>
      <td>100分</td>
      <td>小A真棒</td>
    </tr>
    <tr>
      <td>小B</td>
      <td>100分</td>
      <td>小B真棒</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>都很厉害</td>
      <td>都很厉害</td>
    </tr>
  </table>

结果截图：

在这里插入图片描述

注意事项：

标签的嵌套关系table > tr > td

2、表格相关属性border、width、height

属性名	属性值和相关说明
border	数字，边框宽度
width	数字，表格宽度
height	数字，表格高度

代码片段：

<table border="1" width="300" height="300">
...
</table>

结果截图：

在这里插入图片描述

注意事项：

实际开发时表格推荐使用CSS（更符合规范）

3、表格标题caption和表头单元格标签th

应用场景：

在表格中表示整体大标题和每一列的小标题

代码片段：

 <!-- caption：表格整体的大标题 -->
  <!-- th：表头单元格，表格一列的小标题 -->
  <table border="1" width="300" height="300">
    <caption><h3>学生成绩单</h3></caption>
      <tr>
      <th>姓名</th>
      <th>成绩</th>
      <th>评语</th>
    </tr>
   ...
   </table>

结果截图：

在这里插入图片描述

注意事项：

th也是单元格的一种，用于替换td。快捷操作方式为选中d，再ctrl+d选中下一个，每次点击d，选完六个以后即可一起更换为h。
caption标签写在table标签内部

4、表格的结构标签（了解即可）

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

代码片段：

  <!-- thead：表示表格的头部 -->
  <!-- tbody：表示表格的主体 -->
  <!-- tfoot：表示表格的底部 -->
  <table border="1" width="300" height="300">
    <caption><h3>学生成绩单</h3></caption>
    <!-- 表格的头部 -->
    <thead>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
      </tr>
    </thead>
    <!-- 表格的身体 -->
    <tbody>
      <tr>
        <td>小A</td>
        <td>100分</td>
        <td>小A真棒</td>
      </tr>
      <tr>
        <td>小B</td>
        <td>100分</td>
        <td>小B真棒</td>
      </tr>
    </tbody>
    <!-- 表格的底部 -->
    <tfoot>
      <tr>
        <td>总结</td>
        <td>都很厉害</td>
        <td>都很厉害</td>
      </tr>
    </tfoot>
  </table>