三、HTML文本、语义化、列表与表格

目录

• 3.1 文本内容标签
  • 3.1.1 标题与段落标签
  • 3.1.2 段落排版与HTML实体
  • 3.1.3 引用和代码相关标签
  • 3.1.4 其他功能性文本标签
  • 3.1.5 文本格式化标签含义
• 3.2 语义化与内容容器
  • 3.2.1 div与span通用容器
  • 3.2.2 HTML5语义化结构标签
  • 3.2.3 大纲算法与内容层次
• 3.3 列表与数据组织
  • 3.3.1 无序列表与导航实现
  • 3.3.2 有序列表与步骤展示
  • 3.3.3 定义列表与键值对展示
• 3.4 表格与数据展示
  • 3.4.1 基础表格结构
  • 3.4.2 表格标题、表头与分组
  • 3.4.3 单元格合并
  • 3.4.4 样式控制与可访问性

CSDN:https://blog.csdn.net/South_Rosefinch/article/details/158812314

3.1 文本内容标签

文本是网页内容的基石。正确的标记不仅能让内容呈现美观，更能为浏览器、搜索引擎和辅助工具提供清晰的语义信息。

3.1.1 标题与段落标签

标题和段落构成了文档的基本骨架，定义了内容的结构和层次。

（1）标题标签：<h1>-<h6>

标题标签用于定义文档的层级标题，体现内容的重要性和结构关系。

核心特性：

• 从<h1>（最高级）到<h6>（最低级）共六级
• <h1>通常作为页面主标题，代表核心主题
• 浏览器默认赋予不同的字号和权重

最佳实践：

<!-- 正确的层级结构 -->
<h1>网页设计指南</h1>
<h2>HTML基础</h2>
<h3>文本标签</h3>
<h4>标题标签</h4>
<h2>CSS基础</h2>

<!-- 避免：跳过层级 -->
<h1>主标题</h1>
<h3>三级标题</h3> 

<!-- 避免：多个h1 -->
<h1>标题一</h1>
<h1>标题二</h1> <!-- 尽量不要使用跳级和重复级别的标题 -->

（2）段落标签：<p>

段落标签用于定义文本段落，浏览器会自动在其前后创建空白以分隔内容。

<p>这是第一段文字。浏览器会自动在段落前后添加一定的外边距，使内容更加易读。</p>
<p>这是第二段文字。每个&lt;p&gt;标签都表示一个逻辑上的段落。</p>

特性：

• 块级元素，独占一行
• 浏览器默认添加上下外边距
• 不应嵌套使用（段落中不应包含段落）

3.1.2 段落排版与HTML实体

（1）换行标签：<br>

<br>标签用于在文本中插入强制换行，是一个自闭合标签。它在不创建新段落的情况下实现换行。

<p>
  第一行<br>
  第二行<br>
  第三行
</p>

适用场景：

• 地址、联系方式的格式保持
• 诗歌、歌词等需要保留特定换行的内容
• 短行内容的分隔

<address>
  张三<br>
  北京市朝阳区<br>
  联系电话：138-8888-8888
</address>

<p>
  静夜思<br>
  床前明月光，<br>
  疑是地上霜。<br>
  举头望明月，<br>
  低头思故乡。
</p>

注意：不要使用多个连续的<br>标签来创建段落间距，这是不良实践。段落间距应由CSS控制。

（2）水平分割线：<hr>

<hr>标签在文档中创建一条水平分割线，表示主题或段落的分隔。它是一个自闭合标签。

<p>第一部分的内容结束。</p>

<hr>

<p>第二部分的内容开始。</p>

语义：表示故事中的场景转换或主题变化，也可用于分隔文档的不同部分。

注意：现代开发中，分割线的样式通常用CSS控制，但<hr>提供了基础的语义化分隔功能。

（3）块引用与缩进

<blockquote>标签用于定义从其他来源引用的块级内容。浏览器通常会为块引用应用缩进样式，使其在视觉上与其他内容区分。

<p>以下是某位专家的观点：</p>

<blockquote>
  <p>HTML5的语义化标签极大地改善了网页的可访问性和搜索引擎优化。</p>
</blockquote>

<p>这段引用的内容在页面上会有明显的缩进效果。</p>

特性：

• 块级元素，通常显示为独立的块
• 浏览器默认添加左右外边距（缩进）
• 可以包含其他块级元素，如段落、标题等
• 可使用cite属性指明引用来源URL

<blockquote cite="https://example.com/article">
  <p>这是从外部文章引用的内容。</p>
  <p>浏览器通常会为这段内容添加缩进效果。</p>
</blockquote>

注意：虽然<blockquote>会产生缩进效果，但它的主要目的是语义化地标记引用内容，而非单纯用于排版缩进。如果仅需要视觉上的缩进效果，应该使用CSS来控制。

（4）HTML空白字符处理

HTML对空白字符（空格、制表符、换行符）有特殊的处理规则：

1. 连续空白合并：多个连续空白字符会被合并为一个空格
2. 开头结尾空白忽略：元素开始和结束处的空白会被忽略
3. 换行符转空格：源代码中的换行符在显示时会被当作一个空格

<!-- 这些写法在浏览器中显示效果相同 -->
<p>这    里    有    多    个    空    格</p>
<p>这 里 有 多 个 空 格</p>
<!-- 都显示为："这 里 有 多 个 空 格" -->

<!-- 源代码换行在显示时变成空格 -->
<p>这段文字
   在源代码中
   分成了多行</p>
<!-- 显示为："这段文字 在源代码中 分成了多行" -->

注意：如果需要在HTML中显示连续多个空格，可以使用HTML实体 （不换行空格），但这不是推荐做法，应通过CSS控制间距。

（5）预格式化文本：<pre>

<pre>标签用于显示预格式化文本，它会保留文本中的所有空白字符和换行符。

<pre>
  这    里    的
  空    格    和
  换    行    都
  会    被    保    留
</pre>

常见用途：

• 显示计算机代码
• 展示诗歌、ASCII艺术
• 需要保留原始格式的任何文本

<pre>
function hello() {
    console.log("Hello, World!");
    return true;
}
</pre>

特性：

• 默认使用等宽字体显示
• 保留所有空格、制表符和换行符
• 文本不会自动换行，除非遇到<br>或行尾

注意：<pre>标签通常与<code>标签结合使用来显示代码块。

（6）HTML实体

HTML实体用于显示HTML中的保留字符或特殊符号。实体以&开头，以;结尾。

实体	显示	说明
	空格	不换行空格
<	<	小于号
>	>	大于号
&	&	和号
"	"	引号
©	©	版权符号
®	®	注册商标
™	™	商标符号

<p>在HTML中，使用 &lt;p&gt; 标签定义段落。</p>
<p>版权所有 &copy; 2026 我的网站</p>
<p>特殊字符：&amp; &quot; &nbsp;等</p>

使用场景：

1. 显示HTML保留字符：<、>、&等字符在HTML中有特殊含义，需要转义
2. 显示特殊符号：版权符号、商标符号等
3. 控制空白： 创建不会被合并的空格

注意：虽然 可以创建连续空格，但布局和间距应优先使用CSS控制，实体仅用于特殊字符显示。

3.1.3 引用和代码相关标签

这些标签用于处理特殊类型的内容，如引用文字、计算机代码等。

（1）引用标签

标签	用途	属性
<blockquote>	块级引用，长段引文	cite: 引文来源URL
<q>	行内短引用	cite: 引文来源URL
<cite>	引用作品标题	-

<blockquote>标签中的 cite属性不会在页面上创建一个可点击的、直达目标地址的链接。

<!-- 块级引用 -->
<blockquote cite="https://example.com/source">
  <p>这是来自某本书或文章的一段较长引文。</p>
</blockquote>

<!-- 行内引用 -->
<p>正如某人所说：<q cite="https://example.com">简洁是智慧的灵魂。</q></p>

<!-- 作品引用 -->
<p>更多信息请参考<cite>HTML5权威指南</cite>一书。</p>

（2）代码相关标签

标签	用途	说明
<code>	标记计算机代码	行内代码片段
<pre>	预格式化文本	保留空格和换行
<kbd>	键盘输入	用户应输入的按键
<samp>	程序输出示例	计算机输出的示例

<!-- 行内代码 -->
<p>使用<code>console.log()</code>在控制台输出信息。</p>

<!-- 代码块（结合pre和code） -->
<pre><code>
function helloWorld() {
  console.log("Hello, World!");
  return true;
}
</code></pre>

<!-- 键盘输入 -->
<p>按<kbd>Ctrl</kbd>+<kbd>C</kbd>复制选中的内容。</p>

<!-- 程序输出 -->
<p>程序会输出：<samp>文件保存成功！</samp></p>

3.1.4 其他功能性文本标签

以下标签提供了特定的语义和功能，用于处理特殊类型的文本内容。

（1）<mark>- 高亮标记

<mark>标签用于突出显示文本，表示与用户当前活动相关或需要特别注意的内容。默认背景为黄色。

语法：

<p>请在文档中搜索<mark>关键词</mark>，以找到相关内容。</p>
<p>考试的重点是<mark>第三章和第五章</mark>的内容。</p>

特性：

• 行内元素
• 默认样式：黄色背景
• 常用于搜索结果高亮、重点标记
• 可与其他行内元素嵌套使用

自定义样式：

<style>
mark {
  background-color: #ffeb3b; /* 黄色 */
  color: #000;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}
</style>

（2）<details>和 <summary>- 可折叠内容

创建可展开/折叠的内容区域，常用于FAQ、说明文档等。

语法：

<details>
  <summary>点击查看详细信息</summary>
  <p>这里是隐藏的详细内容，点击标题可以展开或折叠。</p>
  <p>可以包含任何HTML内容，如图片、列表、表格等。</p>
</details>

属性：

• open：初始状态为展开

<details open>
  <summary>默认展开的内容</summary>
  <p>这个内容区域默认是展开的。</p>
</details>

高级用法：

<details>
  <summary>
    <strong>常见问题：如何学习HTML？</strong>
  </summary>
  <ol>
    <li>从基础语法开始</li>
    <li>实践编写代码</li>
    <li>学习语义化标签</li>
  </ol>
  <p>记住：实践是最好的学习方法。</p>
</details>

（3）<progress>- 进度指示器

显示任务的完成进度，通常呈现为进度条。

语法：

<label for="file">下载进度：</label>
<progress id="file" value="70" max="100">70%</progress>

<progress value="0.5" max="1">50%</progress>

属性：

属性	说明	示例
value	当前进度值（必须小于等于max）	value="70"
max	最大值（默认为1）	max="100"

状态表示：

<!-- 确定进度 -->
<progress value="30" max="100">30%</progress>

<!-- 不确定进度（省略value属性） -->
<progress>正在加载...</progress>

样式控制：

<style>
progress {
  width: 300px;
  height: 20px;
  /* 不同浏览器的样式需要前缀 */
}
progress::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 10px;
}
progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 10px;
}
</style>

（4）<address>- 联系信息

表示文档作者或所有者的联系信息。

语法：

<address>
  作者：张三<br>
  邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br>
  地址：北京市朝阳区<br>
  电话：<a href="tel:+8613812345678">+86 138 1234 5678</a>
</address>

特性：

• 块级元素
• 默认样式：斜体
• 应包含相关联系信息
• 可以嵌套在<article>、<footer>等元素中

使用位置：

<article>
  <h1>文章标题</h1>
  <p>文章内容...</p>
  <footer>
    <address>
      作者：李四<br>
      最后更新：2026年3月8日
    </address>
  </footer>
</article>

<footer>
  <address>
    公司名称：XX科技有限公司<br>
    地址：上海市浦东新区<br>
    客服电话：400-888-8888
  </address>
</footer>

（5）<meter>- 度量衡

表示已知范围内的标量测量值，如磁盘使用量、投票结果等。

语法：

<label>磁盘使用量：</label>
<meter value="0.6" min="0" max="1" low="0.2" high="0.8" optimum="0.5">60%</meter>

<label>投票结果：</label>
<meter value="85" min="0" max="100" low="30" high="70" optimum="50">85/100</meter>

属性：

属性	说明	示例
value	当前值（必须）	value="85"
min	最小值（默认0）	min="0"
max	最大值（默认1）	max="100"
low	低值范围	low="30"
high	高值范围	high="70"
optimum	最佳值	optimum="50"

颜色表示：

• 绿色：在low和high之间，或接近optimum
• 黄色：低于low或高于high
• 红色：远低于low或远高于high

实际应用：

<!-- 磁盘使用情况 -->
<div>
  <label>系统盘：</label>
  <meter value="4.3" min="0" max="10">4.3/10 GB</meter>
  <span>4.3 GB (43%)</span>
</div>

<!-- 投票统计 -->
<div>
  <label>支持率：</label>
  <meter value="0.85" min="0" max="1" low="0.3" high="0.7" optimum="0.5">85%</meter>
  <span>85% 支持</span>
</div>

<!-- 技能等级 -->
<div>
  <label>HTML掌握程度：</label>
  <meter value="0.9" min="0" max="1">90%</meter>
  <span>高级</span>
</div>

（6）<ruby>、<rt>、<rp>- 注音标注

用于为东亚文字（如中文、日文）添加注音或注释。

语法结构：

<ruby>
  汉<rt>hàn</rt>
  字<rt>zì</rt>
</ruby>

<ruby>
  HTML<rt>超文本标记语言</rt>
</ruby>

元素说明：

• <ruby>：注音标注容器
• <rt>：注音文本（显示在基文本上方）
• <rp>：为不支持ruby的浏览器提供后备括号

完整示例：

<!-- 中文注音 -->
<p>
  <ruby>
    学<rt>xué</rt>
    而<rt>ér</rt>
    时<rt>shí</rt>
    习<rt>xí</rt>
    之<rt>zhī</rt>
  </ruby>
</p>

<!-- 日语注音 -->
<p>
  <ruby>
    日本語<rt>にほんご</rt>
  </ruby>
</p>

<!-- 带后备括号 -->
<ruby>
  汉<rp>(</rp><rt>hàn</rt><rp>)</rp>
  字<rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
<!-- 支持ruby的浏览器显示注音，不支持的显示括号 -->

高级用法：

<!-- 多行注音 -->
<ruby>
  <ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby><rt>Tokyo</rt>
</ruby>

<!-- 自定义样式 -->
<style>
ruby {
  font-size: 24px;
}
rt {
  font-size: 12px;
  color: #666;
}
</style>

兼容性说明：

1. 现代浏览器：所有标签在现代浏览器中都得到良好支持
2. 旧版浏览器：
   • <mark>、<details>、<progress>、<meter>、<ruby>在IE9及以下版本支持有限
   • 建议为旧浏览器提供回退内容
3. 屏幕阅读器：大多数屏幕阅读器能正确识别这些标签的语义

使用建议：

1. 语义优先：根据内容含义选择合适的标签
2. 提供后备：为不支持的功能性标签提供替代内容
3. 渐进增强：确保基本功能在所有浏览器中可用
4. 样式自定义：通过CSS增强视觉效果，但保持可访问性
5. 合理使用：只在适当场景使用这些标签，避免过度使用

这些功能性标签能够极大地丰富网页内容的表达方式和用户体验，是构建现代、可访问、语义化网页的重要组成部分。

3.1.5 文本格式化标签含义

文本格式化标签用于在行内对文字进行样式和语义的标记。分为语义化标签和呈现性标签。

1. 语义化关注HTML标签的含义和结构（如<header>、<article>），用于描述内容是什么，便于机器理解和代码维护。

2. 呈现性关注元素的视觉外观（如颜色、字体、布局），主要通过CSS控制，描述内容看起来怎么样。

简单说，语义化是“是什么”，呈现性是“长什么样”。现代网页开发提倡两者分离，即用HTML定义结构，用CSS控制样式。

（1）语义型格式化标签

这类标签不仅改变外观，更重要的是传达内容的含义。

标签	含义	默认样式
<strong>	表示非常重要或紧急的内容	加粗
<em>	表示强调的文本	斜体
<mark>	表示突出显示的文本	黄色背景高亮
<small>	表示附属细则	较小字体
<cite>	表示作品标题引用	斜体

<p><strong>重要提示：</strong>请确保在<em>今天</em>之前完成提交。</p>
<p>请在文档中搜索<mark>关键词</mark>，找到相关章节。</p>
<p>本软件按"原样"提供<small>，不承担任何明示或暗示的保证。</small></p>

（2）呈现性格式化标签

这类标签主要定义视觉样式，不强调语义含义。在HTML5中仍被保留，但应谨慎使用。

标签	作用
<b>	纯视觉加粗，不赋予重要性
<i>	纯视觉斜体，用于区分文本
<u>	为文本添加下划线
<s>（旧为<strike>）	表示已删除或不再准确的内容
<sub>/<sup>	定义下标/上标

<p>这是一段<b>加粗</b>但<b>不重要</b>的文字。</p>
<p>这个单词是<i>斜体</i>，因为它是一个外来词。</p>
<p>水的化学式是H<sub>2</sub>O，面积公式是A=πr<sup>2</sup></p>

核心原则：优先使用语义化标签。因为：

1. 屏幕阅读器能识别语义，为用户提供正确的语调
2. 搜索引擎能更好地理解内容的重要性
3. 样式可通过CSS轻松修改，但语义是内容固有的

3.2 语义化与内容容器

3.2.1 div与span通用容器

这两个标签是HTML中最基础的容器元素，没有特定语义，仅作为样式和脚本的"挂钩"。

标签	类型	用途	示例
<div>	块级容器	分组块级内容，用于布局	<div class="header">
<span>	行内容器	分组行内内容，用于样式	<span class="highlight">

<!-- div用于布局容器 -->
<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="main-content">主要内容</div>
</div>

<!-- span用于行内样式 -->
<p>这是一段<span class="keyword">非常重要</span>的文字。</p>

注意：虽然<div>和<span>很常用，但不应滥用。在可能的情况下，应优先使用有语义的标签。

3.2.2 HTML5语义化结构标签

为了解决"div滥用"问题，HTML5引入了一系列语义化标签，使代码更具可读性和可访问性。

（1）主要语义化结构标签

标签	语义	说明	典型内容
<header>	页眉	页面或区块的页眉	Logo、导航、搜索框
<nav>	导航	导航链接的集合	主导航、侧边导航
<main>	主内容	文档的主要内容	页面的核心内容
<article>	独立内容	可独立分配的内容	博客文章、新闻、评论
<section>	区块	文档中的主题分区	章节、标签页内容
<aside>	侧边内容	与主内容间接相关	侧边栏、广告、相关信息
<footer>	页脚	页面或区块的页脚	版权、联系信息、相关链接
<figure>	媒体容器	自包含的内容流	图片、图表、代码
<figcaption>	媒体标题	为figure提供标题/说明	图片说明、图表标题

（2）语义化文档结构示例

<!DOCTYPE html>
<html lang="zh-CN">
<body>
  <!-- 页面头部 -->
  <header>
    <h1>网站标题</h1>
    <!-- 主导航 -->
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- 页面主要内容 -->
  <main>
    <!-- 独立文章 -->
    <article>
      <header>
        <h2>文章标题</h2>
        <p>发布日期：<time datetime="2026-03-08">2026年3月8日</time></p>
      </header>
      
      <!-- 文章章节 -->
      <section>
        <h3>章节一</h3>
        <p>章节内容...</p>
        <!-- 图片与说明 -->
        <figure>
          <img src="example.jpg" alt="示例图片">
          <figcaption>图片说明文字</figcaption>
        </figure>
      </section>
      
      <section>
        <h3>章节二</h3>
        <p>更多内容...</p>
      </section>
    </article>
    
    <!-- 侧边栏 -->
    <aside>
      <h3>相关文章</h3>
      <ul>
        <li><a href="#">相关文章一</a></li>
        <li><a href="#">相关文章二</a></li>
      </ul>
    </aside>
  </main>
  
  <!-- 页面页脚 -->
  <footer>
    <p>&copy; 2026 我的网站. 保留所有权利.</p>
  </footer>
</body>
</html>

（3）<article>vs <section>：如何选择？

这是语义化中常见的困惑点。简单的判断标准：

• 使用<article>的情况：
  • 内容在脱离上下文后仍然有意义
  • 可被独立分发或重用
  • 在RSS订阅中单独出现是有意义的
  • 例如：博客文章、新闻报道、论坛帖子、产品卡片
• 使用<section>的情况：
  • 对内容进行逻辑分组
  • 通常应该有一个标题
  • 是更大整体的一部分
  • 例如：书籍的章节、标签页的不同内容、长文章的部分

<!-- 正确：section是article的一部分 -->
<article>
  <h1>如何学习HTML</h1>
  <section>
    <h2>基础语法</h2>
    <p>HTML的基础语法包括...</p>
  </section>
  <section>
    <h2>语义化</h2>
    <p>语义化是HTML5的重要特性...</p>
  </section>
</article>

<!-- 正确：独立的article -->
<article>
  <h2>今日新闻</h2>
  <p>新闻内容...</p>
</article>

3.2.3 大纲算法与内容层次

大纲算法是浏览器和辅助工具理解文档结构的机制，基于标题标签（<h1>-<h6>）创建文档大纲。

（1）创建良好的文档大纲

1. 正确使用标题层级

<!-- 良好结构 -->
<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h2>另一个二级标题</h2>
<h3>另一个三级标题</h3>

<!-- 生成的大纲：
1. 主标题
   1.1 二级标题
       1.1.1 三级标题
   1.2 另一个二级标题
       1.2.1 另一个三级标题
-->

1. 语义化标签不影响大纲

   大纲算法只关心标题标签，<section>、<article>等语义化标签本身不创建新的大纲级别，但有助于组织和理解内容。

2. 为每个区块提供标题

<!-- 推荐：为section提供标题 -->
<section>
  <h2>产品特性</h2>
  <!-- 内容 -->
</section>

<!-- 不推荐：无标题的section -->
<section>
  <!-- 没有标题，大纲算法无法正确处理 -->
  <p>一些内容...</p>
</section>

检查文档大纲：现代浏览器开发者工具通常提供"无障碍"（Accessibility）或大纲查看功能，可以帮助你检查文档的结构。

3.3 列表与数据组织

列表是将相关信息分组的强大工具。HTML提供三种主要列表类型，分别适用于不同的场景。

3.3.1 无序列表与导航实现

无序列表（<ul>）用于表示项目之间没有特定顺序的列表。

（1）核心结构：

<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ul>

（2）实际应用：

<!-- 导航菜单 -->
<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/about">关于我们</a></li>
  </ul>
</nav>

<!-- 功能列表 -->
<ul>
  <li>响应式设计</li>
  <li>跨浏览器兼容</li>
  <li>SEO友好</li>
</ul>

3.3.2 有序列表与步骤展示

有序列表（<ol>）用于表示项目之间有顺序或步骤的列表。

（1）核心结构：

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

（2）属性控制：

属性	作用	示例
type	编号类型	type="1"（数字）, type="A"（大写字母）, type="a"（小写字母）, type="I"（大写罗马数字）, type="i"（小写罗马数字）
start	起始编号	start="5"（从5开始编号）
reversed	反向编号	reversed（从高到低编号）

<!-- 不同类型的有序列表 -->
<ol type="1">
  <li>第一步（数字）</li>
  <li>第二步</li>
</ol>

<ol type="A" start="3">
  <li>第一步（从C开始）</li>
  <li>第二步（D）</li>
</ol>

<ol reversed>
  <li>第三步（反向，显示为3）</li>
  <li>第二步（显示为2）</li>
  <li>第一步（显示为1）</li>
</ol>

（3）实际应用：

<!-- 步骤说明 -->
<h3>安装步骤</h3>
<ol>
  <li>下载安装包</li>
  <li>运行安装程序</li>
  <li>按照向导完成安装</li>
  <li>重启计算机</li>
</ol>

<!-- 排行榜 -->
<h3>本周热门文章</h3>
<ol>
  <li>《HTML5语义化详解》</li>
  <li>《CSS Flexbox完全指南》</li>
  <li>《JavaScript闭包解析》</li>
</ol>

3.3.3 定义列表与键值对展示

定义列表（<dl>）用于标记术语及其定义（键值对）的列表，适合展示元数据、词汇表等。

（1）核心结构：

<dl>
  <dt>术语</dt>
  <dd>定义或描述</dd>
  
  <dt>另一个术语</dt>
  <dd>另一个定义</dd>
  <dd>附加定义（一个术语可以有多个定义）</dd>
</dl>

<!--->
<dl> 定义列表容器
<dt> 定义术语
<dd> 术语定义
记得正确嵌套使用
<--->

（2）实际应用：

<!-- 词汇表 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于定义网页样式</dd>
  
  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于实现网页交互</dd>
</dl>

<!-- 元数据显示（如产品规格） -->
<dl class="product-specs">
  <dt>产品名称</dt>
  <dd>元宝智能助手</dd>
  
  <dt>版本</dt>
  <dd>2.0.1</dd>
  
  <dt>系统要求</dt>
  <dd>Windows 10 或更高版本</dd>
  <dd>macOS 10.14 或更高版本</dd>
  <dd>Linux (Ubuntu 18.04+)</dd>
</dl>

<!-- 常见问题 -->
<dl>
  <dt>如何注册账号？</dt>
  <dd>点击右上角的"注册"按钮，填写信息即可。</dd>
  
  <dt>忘记密码怎么办？</dt>
  <dd>在登录页面点击"忘记密码"，按提示操作。</dd>
</dl>

选择正确的列表类型：

场景	推荐列表类型	原因
导航菜单	无序列表（<ul>）	菜单项没有固定顺序
操作步骤	有序列表（<ol>）	步骤有明确顺序
功能清单	无序列表（<ul>）	功能点并列，无先后
排行榜	有序列表（<ol>）	有明确的排名顺序
词汇表	定义列表（<dl>）	术语和定义的对应关系
元数据	定义列表（<dl>）	键值对结构
FAQ	定义列表（<dl>）	问题和答案的对应关系

3.4 表格与数据展示

表格（<table>）是用于组织和展示行列结构化数据的HTML元素，如财务报表、课程表、数据对比等。其核心原则是：仅用于呈现表格化数据，绝对不应用于网页布局。布局应由CSS（如Flexbox、Grid）实现。

3.4.1 基础表格结构

一个基本的表格由容器、行和单元格构成，使用具有明确语义的标签。

标签	全称	作用与说明
<table>	Table	定义表格的容器。所有表格内容都必须包裹在此标签内。
<tr>	Table Row	定义表格中的一行。是单元格（<td>或 <th>）的直接父级。
<td>	Table Data	定义表格中的一个标准数据单元格，用于存放表格主体数据。
<th>	Table Header	定义表格中的标题单元格。用于行或列的标题，默认加粗并居中，对可访问性和SEO至关重要。

基础示例：

<table>
  <tr>
    <th>月份</th>
    <th>收入</th>
    <th>支出</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥10,000</td>
    <td>¥6,000</td>
  </tr>
</table>

3.4.2 表格标题、表头与分组

为表格添加标题、分组并明确表头关系，能极大提升数据的可读性和可访问性。

1. 表格标题 <caption>

   • 作用：提供表格的标题或简要摘要。
   • 位置：应紧跟在 <table>开始标签之后。

   <table>
     <caption>2026年度部门预算表（单位：万元）</caption>
     <!-- 表格其他内容 -->
   </table>
   

2. 表头属性 scope

   • 作用：用于 <th>元素，明确指示该标题单元格是关联于整列 (col)、整行 (row) 还是一组行列。
   • 价值：这是让屏幕阅读器准确播报数据关系的核心属性。

   <tr>
     <th scope="col">产品</th> <!-- 此标题对应下方整列数据 -->
     <th scope="col">第一季度</th>
   </tr>
   <tr>
     <th scope="row">软件A</th> <!-- 此标题对应此行右侧的所有数据 -->
     <td>120</td>
   </tr>
   

3. 表格分组标签

   将表格划分为逻辑部分，增强结构语义，便于分别样式化。

   标签	全称	作用
   <thead>	Table Head	定义表头区域，通常包含列标题行。
   <tbody>	Table Body	定义表格主体，包含主要的数据行。一个表格可以有多个<tbody>。
   <tfoot>	Table Foot	定义表格页脚，通常包含摘要、总计行。

   标准结构示例：

   <table>
     <caption>2026年上半年销售报告</caption>
     <thead>
       <tr>
         <th scope="col">产品</th>
         <th scope="col">Q1</th>
         <th scope="col">Q2</th>
         <th scope="col">总计</th>
       </tr>
     </thead>
     <tfoot>
       <tr>
         <th scope="row">部门合计</th>
         <td>¥15,000</td>
         <td>¥18,000</td>
         <td>¥33,000</td>
       </tr>
     </tfoot>
     <tbody>
       <tr>
         <th scope="row">产品A</th>
         <td>¥8,000</td>
         <td>¥9,000</td>
         <td>¥17,000</td>
       </tr>
       <!-- 更多数据行... -->
     </tbody>
   </table>
   

3.4.3 单元格合并

用于创建跨越多列或多行的复杂表头或数据单元格。

属性	作用	示例与说明
colspan	指定一个单元格横跨的列数。	<th colspan="2">2026年度</th>（此单元格将占据两列的宽度）
rowspan	指定一个单元格横跨的行数。	<td rowspan="3">项目A</td>（此单元格将占据三行的高度）

复杂表示例：

<table>
  <tr>
    <th rowspan="2">部门</th> <!-- 此单元格跨2行 -->
    <th colspan="2">上半年绩效</th> <!-- 此单元格跨2列 -->
  </tr>
  <tr>
    <!-- 上一行“部门”已占据本行第一列，所以本行从第二列开始 -->
    <th>第一季度 (Q1)</th>
    <th>第二季度 (Q2)</th>
  </tr>
  <tr>
    <td>技术研发部</td>
    <td>优秀</td>
    <td>良好</td>
  </tr>
</table>

重要提示：使用合并属性后，同一行中后续的 <td>或 <th>数量必须相应减少，否则会破坏表格结构，需仔细规划。

3.4.4 样式控制与可访问性

1. 样式控制（坚决使用CSS，这里看一下知道最好使用CSS即可）

   • 边框：使用 border-collapse: collapse;合并相邻单元格边框，使表格更清晰。
   • 内边距：使用 td, th { padding: 0.75em 1em; }控制单元格内间距，提升可读性。
   • 摒弃旧属性：绝对不要使用 border、cellpadding、cellspacing、width、height等HTML属性控制样式。所有样式应通过CSS定义。

   table {
     border-collapse: collapse; /* 关键：合并边框 */
     width: 100%;
   }
   th, td {
     border: 1px solid #ddd;
     padding: 12px 16px; /* 控制内边距 */
     text-align: left;
   }
   thead th {
     background-color: #f4f4f4;
   }
   

2. 可访问性核心实践

   • 必须使用 <th>和 scope：为所有标题单元格使用 <th>并明确指定 scope属性。
   • 提供 <caption>：为复杂表格提供简要的标题或摘要，说明表格内容。
   • 使用分组标签：使用 <thead>, <tbody>, <tfoot>为表格提供清晰的结构。
   • 响应式处理：
     • 在窄屏设备上，可在表格外层包裹一个容器实现水平滚动：<div style="overflow-x: auto;"> <table>... </table> </div>
     • 对于复杂表格，可通过CSS媒体查询（@media）在移动端将表格行转换为卡片（display: block）布局，以提升小屏幕下的浏览体验。