一、今日学习目标

1. 掌握 HTML 布局标签整体分类及核心作用，分清网站结构语义标签、无语义标签、列表标签三大类。
2. 熟记 H5 新增网站结构标签种类、每个标签作用、单 / 双标签属性、是否为块级元素及浏览器兼容性注意事项。
3. 掌握无语义标签种类、特点、使用场景和开发注意事项。
4. 吃透无序列表、有序列表、描述列表的语法结构、用法限制、默认样式及日常使用频率。
5. 理解表格标签作用、使用场景、完整组成结构，掌握表格头部 / 主体 / 底部结构标签用法及合并单元格原理与使用规范。

---

二、布局标签基础概述

（1）布局标签作用

1. 对网页内容进行结构划分、区域排版，搭建网页整体骨架；
2. 提升代码可读性、语义化，方便搜索引擎爬取、浏览器解析和后期维护；
3. 配合 CSS 完成页面布局样式开发，替代传统纯 div 堆砌布局。

---

（2）布局标签三大分类

1. 网站结构语义标签（H5 新增）
2. 无语义通用标签
3. 列表标签

---

三、H5 网站结构语义标签

（1）基础说明

H5 新增语义化结构标签，全部为双标签、默认都是块级元素；低版本 IE8 及以下不兼容，实际开发中需做兼容处理或引入 html5shiv 插件。

（2）常用结构标签详解

    1.<header>

• 作用：定义网页或某个区域的头部 / 页眉，存放 logo、导航、标题等介绍性内容；
• 类型：双标签、块级元素；
• 注意：一个页面可以有多个 header，不能放在<footer>、<address>内部。

    2.<nav>

• 作用：专门存放导航链接，主导航、侧边导航、底部导航都可使用；
• 类型：双标签、块级元素；
• 注意：页面主要导航建议用 nav，次要文字链接无需滥用。

    3.<main>

• 作用：定义网页主体核心内容，一个页面只能有一个main；
• 类型：双标签、块级元素；
• 注意：内部放页面主要业务内容，不包含侧边栏、页脚、导航。

    4.<section>

• 作用：对页面内容按主题分区块，相当于带语义的 div；
• 类型：双标签、块级元素；
• 注意：一般搭配标题使用，适合内容主题相近的板块划分。

    5.<article>

• 作用：定义独立完整、可单独复用的内容，如文章、新闻、帖子、商品卡片；
• 类型：双标签、块级元素；
• 注意：内容独立性强，脱离整个页面也能独立看懂。

    6.<aside>

• 作用：定义侧边栏、附加辅助内容，如侧边推荐、广告、注释；
• 类型：双标签、块级元素；
• 注意：内容和主体内容间接相关，不做主内容展示。

    7.<footer>

• 作用：定义网页或区域页脚，存放版权信息、备案号、友情链接、联系方式；
• 类型：双标签、块级元素；
• 注意：一个页面可出现多个 footer。

    8.<address>

• 作用：专门存放联系信息（地址、邮箱、电话）；
• 类型：双标签、块级元素；
• 默认样式：文字斜体；
• 注意：只能放文本和行内标签，不嵌套块级元素。

---

四、无语义标签

（1）种类

共 2 个：<div>、<span>

---

（2）标签特点与作用

    1.<div> 块级无语义标签

• 特点：独占一行，自带换行，默认宽高撑满父元素；
• 作用：通用容器，用于大区域布局、结构划分，无任何语义；
• 适用：网页大板块包裹、结合 CSS 做弹性 / 浮动布局。

    2.<span> 行内无语义标签

• 特点：同行显示，不自动换行，宽高由内容撑开；
• 作用：小范围文字、行内元素包裹，用来单独设置文字样式；
• 适用：局部文字变色、大小调整、行内小元素修饰。

---

（3）使用注意事项

1. 无语义标签没有任何语义含义，仅做布局和样式承载；
2. 能用语义标签（header/nav/article）时，优先用语义标签，少用 div；
3. div 嵌套无严格限制，但避免无意义多层嵌套；
4. span 只能包裹行内内容，不能嵌套块级元素。

---

五、列表标签

（1）整体分类

无序列表、有序列表、描述列表，均为组合式标签，必须父子标签搭配使用。

---

（2）无序列表 ul > li

1. 用处：展示无先后顺序的内容，如导航、菜单、商品列表、新闻条目；
2. 语法：

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

    3.  语法解析：<ul> 父标签定义无序列表，<li> 子标签定义每一个列表项；

    4.  使用限制：li只能放在 ul/ol 内部，ul 直接子元素只能是 li；

    5.  使用频率：最高频，开发中最常用；

    6.  默认样式：前面自带实心小圆点，自带上下左右外边距、内边距。

---

（3）有序列表 ol > li

1. 用处：展示有先后排序的内容，如步骤、排名、排行榜、序号清单；
2. 语法：

<ol>
  <li>步骤1</li>
  <li>步骤2</li>
</ol>

     3.  语法解析：<ol> 定义有序列表，<li> 定义列表项，可通过 type 修改序号样式（数字、字母、罗马数字）；

     4.  使用限制：同无序列表，ol 直接子元素只能是 li；

     5.  使用频率：中等，仅有序场景使用；

     6.  默认样式：前面自带阿拉伯数字序号，自带外边距、内边距。

---

（4）描述列表 dl > dt + dd

1. 用处：术语 + 解释、标题 + 描述场景，如词条解释、简历信息、商品参数；
2. 语法：

<dl>
  <dt>术语/标题</dt>
  <dd>对应描述内容</dd>
</dl>

     3.  语法解析：

• <dl>：定义描述列表整体；
• <dt>：定义术语、标题、名称；
• <dd>：定义对 dt 的解释、描述；

     4.  使用限制：dl 内部只能放 dt 和 dd，一个 dt 可以对应多个 dd，多个 dt 也可对应一个 dd；

     5.  使用频率：偏低，多用于图文参数、资料介绍类页面；

     6.  默认样式：dd 内容默认缩进显示。、

---

六、表格标签

（1）作用

以二维表格形式规整展示结构化数据，行列对齐，直观清晰。

---

（2）使用场景

后台管理系统、成绩表、数据统计、账单、课程表、人员信息表等结构化数据展示。

---

（3）基本组成

1. 表格外层：<table>
2. 表格行：<tr> （table row）
3. 单元格：
   • <th>：表头单元格，默认文字加粗居中；
   • <td>：普通数据单元格；
4. 补充：HTML 中没有单独的列标签，列由每行单元格自动对齐形成。

    5.  标准完整语法

<table>
  <!-- 表头行 -->
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>

  <!-- 数据行1 -->
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>

  <!-- 数据行2 -->
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

---

（4）表格结构专用标签

用于划分表格语义结构，方便样式控制和爬虫识别，均包裹 tr 标签：

1. <thead> 表格头部：存放表头标题，固定表格头部；
2. <tbody> 表格主体：存放主要数据内容，一个表格可多个 tbody；
3. <tfoot> 表格底部：存放汇总、备注、合计信息；

    4. 带头部 / 主体 / 底部的完整结构语法

<table>
  <!-- 表格头部 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>

  <!-- 表格主体 -->
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>20</td>
      <td>上海</td>
    </tr>
  </tbody>

  <!-- 表格底部 -->
  <tfoot>
    <tr>
      <td>合计</td>
      <td colspan="2">共 2 人</td>
    </tr>
  </tfoot>
</table>

---

（5）合并单元格

1. 分类：跨行合并：rowspan；跨列合并：colspan

2. 核心原理

• colspan：跨列合并 → 合并同一行里的多个单元格
• rowspan：跨行合并 → 合并同一列里的多个单元格
• 属性值 = 要合并的单元格总个数
• 最重要：左上原则（必背）合并单元格时，只保留最上面 / 最左边的单元格，把其他被合并的单元格直接删除！

    3.   完整代码写法

① 跨列合并 colspan（左右合并）

<table border="1">
  <tr>
    <!-- 合并 第一行 第1、2个单元格 -->
    <td colspan="2">我跨了2列</td>
    <!-- 这里原本的第2个td必须删掉！！ -->
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

② 跨行合并 rowspan（上下合并）

<table border="1">
  <tr>
    <!-- 合并 第1、2行 的第一个单元格 -->
    <td rowspan="2">我跨了2行</td>
    <td>右边</td>
    <td>右边</td>
  </tr>
  <tr>
    <!-- 这一行的第一个td必须删掉！！ -->
    <td>下一行</td>
    <td>下一行</td>
  </tr>
</table>

---

七、今日学习总结

1. 布局标签分为 H5 语义结构标签、无语义标签、列表标签三大类，语义标签全部为双标签、块级元素，需注意低版本 IE 兼容性。
2. div 是块级无语义容器，用于大区域布局；span 是行内无语义容器，用于局部文字样式修饰，开发优先用语义标签减少 div 滥用。
3. 三种列表均为父子嵌套结构，ul 无序列表使用最多，ol 用于有序排序，dl 用于术语和描述配对，各自有固定使用规范和默认样式。
4. 表格无专门列标签，由 tr 行 + th/td 单元格组成，可通过 thead/tbody/tfoot 划分结构；合并单元格依靠 colspan/rowspan 实现，日常开发手动使用场景较少。
5. 所有布局标签都讲究语义化优先、结构规范、嵌套合规，为后续 CSS 布局和页面适配打下基础。