日常开发中，如果所有的特殊排版（如引用、上下标、代码块）都用 <div> 或 <span> 配合 CSS 去实现，视觉上没问题，但在搜索引擎抓取和屏幕阅读器解析时，只是一堆无法被理解的纯文本。
HTML 提供了 6 类专用语义标签。用对它们有两个客观好处：
- 降本增效：自带原生样式（如自动缩进、自动引语、自动上下标），少写冗余 CSS。
- 机器可读：自带规范的语义，对 SEO 和无障碍访问（a11y）友好。
以下是高频使用的 6 类文本语义标签总结。
1. 引用：区分块级与行内
用普通的 margin 或 border 模拟引用，机器无法识别引用的权威属性。
<blockquote>：块级大段引用。浏览器默认自带左右缩进。<q>：行内短句引用。浏览器会自动为内容添加语言本地化引号。<cite>：标明引用源（如书名、文章名、作者）。默认显示斜体。
实际开发中常常组合使用
<p>根据 <a href="https://example.com"><cite>MDN 文档</cite></a> 所述：</p>
<!-- cite 属性专供机器抓取，页面不可见 -->
<blockquote cite="https://example.com">
<p>块级引用标签会自动缩进文本。</p>
</blockquote>
<p>日常沟通中，我常说：<q>代码如诗</q>。</p>
显示效果：
2. 缩写：<abbr> 标签
当内容中出现带有门槛的缩写单词（如 API、LGTM、NASA）时，使用 <abbr> 标记。屏幕阅读器会朗读大写字母或全称，大部分浏览器鼠标悬停时会展示系统级的提示框（Tooltip）。
实战中一般配合 title 属性
<p>这个方案我看过了，<abbr title="Looks Good To Me">LGTM</abbr>，可以合并代码。</p>
显示效果：
3. 联系信息：<address> 标签
专门用于展示当前文档或文章作者的联系信息（通常放在文章末尾或网站页脚）。屏幕阅读器会主动提示这是联系信息。
常见错误：滥用物理地址
不要用
<address>去包裹快递收货地址或无关的地理位置信息。它仅描述本文档的联络渠道。
<address>
<p>本文作者：张三</p>
<p>邮件：<a href="mailto:admin@example.com">admin@example.com</a></p>
</address>
显示效果：
4. 上下标：<sup> 与 <sub>
写化学公式（HO）、数学公式（x）时，使用 <sup>（上标）和 <sub>（下标）。
核心定律：复制不乱码
如果用 CSS（如
transform: translateY）把普通文字推到右上角，复制页面文本时可能会出现空格隔断（把x错乱复制成x 2）。原生标签能保证纯文本环境下的字面语义完全一致。
<p>水的化学式是 H<sub>2</sub>O</p>
<p>勾股定理：<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>
显示效果：
5. 计算机代码：专用分类标签
编写技术文档时，不要全都用 <code> 包裹。HTML 按照代码属性划定了 5 个专门的标签，它们默认自带等宽字体：
| 标签 | 作用 | 适用场景 |
|---|---|---|
<code> |
单行代码或术语 | 提及 HTML 标签 <div> 或方法名 |
<pre> |
保留空格和换行 | 展示多行的完整函数块 |
<var> |
变量或数学占位符 | 数学公式 x 或代码变量 userName |
<kbd> |
键盘输入/操作按钮 | 提示用户按下 Ctrl+C 复制 |
<samp> |
程序输出结果 | 提示终端输出的File saved! |
正确做法：代码块嵌套组合
多行代码块需要将被<code>包裹的代码放进<pre>内部，以抵消浏览器的空白符合并机制。
<p>保存文件请按 <kbd>Ctrl</kbd> + <kbd>S</kbd>。</p>
<pre><code>const init = () => {
console.log('系统初始化');
}</code></pre>
显示效果：
6. 时间与日期：<time> 标签
纯文本格式的日期（如5 月 20 日）机器无法精准解析。<time> 标签配合 datetime 属性，能够向系统注入规范的标准时间。部分浏览器或阅读器支持直接将它识别为系统日历事件。
正确做法：实用主义格式
<!-- 仅完整日期：YYYY-MM-DD -->
<p>文章发布于 <time datetime="2024-05-20">今年五月二十日</time>。</p>
<!-- 日期 + 带时区的时间 (T 分隔，+08:00 为北京时间) -->
<p>系统将在 <time datetime="2024-05-20T19:30+08:00">今晚 7 点半</time> 进行升级。</p>
显示效果：
总结
写 HTML 标签时，先定这段文字客观上属于什么性质，然后再去用 CSS 决定它该怎么渲染长什么样。
➡️ 下期预告
搞定了文章里的字词句，接下来就是前端最关键的一步——如何用这些有着各种语义的标签，搭出一个真正能容纳万物的网页骨架？不管多复杂的页面，其实都逃不开 5 个核心组件。下一章，我们进入零基础必学的《HTML网页结构搭建：从语义化标签到整站规划》。
