前端学习---HTML---无序列表、有序列表、表格标签

文章目录

1、无序序列
2、有序序列
- 2.1、基本语法
- 2.2、代码示例
3、表格标签
- [3.1、表格的基础标签](#3.1、表格的基础标签)
- 3.2、表格结构分区标签
- 3.3、合并单元格属性
- [3.4、可访问性属性](#3.4、可访问性属性)
综合代码示例

1、无序序列

无序列表（Unordered List）是HTML中用于展示一组无特定顺序项目的列表结构，在HTML5中通过<ul>元素实现，每个列表项使用<li>元素定义。

1.1、基本语法

bash 复制代码

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

1.2、主要特点

默认样式：浏览器通常会在每个列表项前显示一个项目符号（如圆点、方块等）

语义化：明确表示内容是无序的列表形式

灵活性：可以嵌套使用，创建多级列表

1.3、代码示例

非嵌套：

bash 复制代码

<ul>
  <li>首页</li>
  <li>产品</li>
  <li>关于我们</li>
  <li>联系方式</li>
</ul>

效果图：

嵌套代码示例：

bash 复制代码

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>西兰花</li>
    </ul>
  </li>
</ul>

效果图：

2、有序序列

有序列表（Ordered List）是HTML5中用于表示具有顺序关系的列表内容的核心标签，使用<ol>包裹多个<li>（列表项）元素实现。其默认显示为数字序号（从1开始递增），适用于需明确顺序的场景，如操作步骤、时间线、排行榜等。

2.1、基本语法

bash 复制代码

<ol>
  <li>第一项内容</li>
  <li>第二项内容</li>
  <li>第三项内容</li>
</ol>

2.2、代码示例

嵌套代码：

bash 复制代码

<ol>
        <li>第一项内容</li>
        <li>第二项内容</li>
        <li>第三项内容</li>
    </ol>
<ol>

  <li>第一章
    <ol>
      <li>第一节</li>
      <li>第二节</li>
    </ol>
  </li>
  <li>第二章
    <ul>
      <li>概述</li>
      <li>详细内容</li>
    </ul>
  </li>
</ol>

效果图：

3、表格标签

HTML5 中的表格标签用于在网页上展示二维数据，即由行和列组成的数据。通过合理的表格结构，可以使数据更清晰、更有语义，同时提升可访问性。虽然现代网页设计中常使用 CSS 布局（如 Flexbox/Grid），但表格在展示结构化数据（如财务报表、数据统计、日程表等）时仍不可替代。

3.1、表格的基础标签

3.1.1、<table>

作用：定义整个表格，是所有表格内容的容器。

注意：在 HTML5 中，不再推荐使用 border、cellpadding、cellspacing 等属性来控制样式，应通过 CSS 实现。

3.1.2、<caption>

作用：为表格添加一个标题，描述表格的内容。

位置：必须紧跟在 <table> 开始标签之后，每个表格只能有一个<caption>。

示例：

bash 复制代码

<table>
  <caption>2024年第一季度销售数据</caption>
  <!-- 表格其他部分 -->
</table>

3.1.3、<tr> (Table Row)

作用：定义表格中的一行，内部包含单元格 ( 或 )。

作用：定义表头单元格，内容默认加粗居中，用于描述一列或一行的数据类别。

常用属性：

scope：指定表头是列头 (scope="col") 还是行头 (scope="row")，对屏幕阅读器友好。

colspan：合并列。

rowspan：合并行。

3.1.5、<td> (Table Data)

作用：定义标准的数据单元格，内容默认左对齐常规字体。

常用属性：colspan、rowspan。

3.2、表格结构分区标签

为了增强表格的语义和可读性，HTML5 保留了 <thead>、<tbody>、<tfoot> 三个分组标签，它们可以包含多行。

1、<thead> (Table Head)

作用：定义表格的头部区域，通常包含列标题行 ()。

位置：一个表格只能有一个 <thead>，应出现在 <tbody> 之前。

2、<tbody> (Table Body)

作用：定义表格的主体数据区域，可以包含多个数据行。

特点：一个表格可以有多个 <tbody>，用于将数据按逻辑分组（例如按月份分组），方便样式控制或脚本操作。

3、<tfoot> (Table Foot)

作用：定义表格的脚注区域，常用于汇总行（如合计、平均值）。

位置：虽然写在代码中通常位于 <tbody> 之后，但浏览器会将其渲染在表格底部。一个表格只能有一个 <tfoot>。

示例结构：

bash 复制代码

<table>
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>85</td>
      <td>92</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>78</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>81.5</td>
      <td>90</td>
    </tr>
  </tfoot>
</table>

效果图：

3.3、合并单元格属性

colspan：水平合并单元格。例如 colspan="2" 表示该单元格占据两列。

rowspan：垂直合并单元格。例如 rowspan="3" 表示该单元格占据三行。

注意：合并后，需要删除被覆盖的其他单元格，以保持表格行内单元格数量一致。

3.4、可访问性属性

scope (用于 <th>)

值：col（列头）、row（行头）、colgroup（列组头）、rowgroup（行组头）。

作用：明确表头与数据单元格的对应关系，帮助屏幕阅读器正确读出表格内容。

bash 复制代码

<tr>
  <th scope="col">姓名</th>
  <th scope="col">年龄</th>
</tr>
<tr>
  <th scope="row">张三</th>
  <td>20</td>
</tr>

作用：对列进行分组，统一设置样式或属性。

注意：不改变表格结构，仅用于样式控制。

综合代码示例

bash 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>HTML5 表格示例</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
    th { background-color: #f2f2f2; }
    caption { font-weight: bold; margin-bottom: 10px; }
  </style>
</head>
<body>
  <table>
    <caption>员工月度考勤统计表 (2024年5月)</caption>
    <thead>
      <tr>
        <th scope="col">姓名</th>
        <th scope="col">部门</th>
        <th scope="col">出勤天数</th>
        <th scope="col">迟到次数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">王小明</th>
        <td>销售部</td>
        <td>22</td>
        <td>1</td>
      </tr>
      <tr>
        <th scope="row">李小丽</th>
        <td>人事部</td>
        <td>23</td>
        <td>0</td>
      </tr>
      <tr>
        <th scope="row">张伟</th>
        <td>技术部</td>
        <td>21</td>
        <td>2</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">总计/平均</td>
        <td>66</td>
        <td>3</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

效果图：

前端学习---HTML---无序列表、有序列表、表格标签

文章目录

1、无序序列

1.1、基本语法

1.2、主要特点

1.3、代码示例

2、有序序列

2.1、基本语法

2.2、代码示例

3、表格标签

3.1、 表格的基础标签

3.1.1、<table>

3.1.2、<caption>

3.1.3、<tr> (Table Row)

3.1.4、<th> (Table Header)

3.1.5、<td> (Table Data)

3.2、表格结构分区标签

3.3、合并单元格属性

3.4、 可访问性属性

综合代码示例

3.1、表格的基础标签

3.4、可访问性属性