HTML 文本格式化
学习 b/strong/i/em/small/mark/del/ins/sub/sup 标签 · 难度：入门 · +10XP
HTML 文本格式化标签
HTML 提供了一系列标签用于格式化文本——让文字加粗、倾斜、下划线、上下标、高亮等。这些标签不仅改变视觉样式，还赋予文本语义含义，这对搜索引擎优化（SEO）和无障碍访问（Accessibility）非常重要。
语义化格式化 vs 样式格式化
HTML5 强调语义化，即标签应该表达"这段文字是什么意思"，而不仅仅是"这段文字长什么样"。比如：
<strong>表示"重要、紧迫"（语义），而<b>只是"加粗显示"（纯样式）<em>表示"需要强调"（语义），而<i>只是"斜体显示"（纯样式）
屏幕阅读器会改变语调来朗读 <strong> 和 <em> 的内容，但对 <b> 和 <i> 则不会。这就是语义化的价值。
全部文本格式化标签速查
| 标签 | 语义 | 默认样式 | 语义级别 |
|---|---|---|---|
<strong> |
非常重要、紧急的内容 | 加粗 | ???? 强语义 |
<b> |
仅视觉加粗，无语义强调 | 加粗 | ⚪ 纯样式 |
<em> |
需要重读强调的内容 | 斜体 | ???? 强语义 |
<i> |
技术术语、外语短语、思想活动 | 斜体 | ???? 中等语义 |
<mark> |
高亮标记（如搜索结果关键词） | 黄色背景 | ???? 强语义 |
<u> |
专有名词拼写错误标注 | 下划线 | ???? 中等语义 |
<ins> |
文档中插入/新增的文字 | 下划线 | ???? 强语义 |
<s> |
不再正确/相关的内容（如原价） | 删除线 | ???? 中等语义 |
<del> |
文档中删除的文字 | 删除线 | ???? 强语义 |
<small> |
附属说明、版权声明、法律条文 | 较小字号 | ???? 中等语义 |
<sub> |
下标（化学式、数学变量） | 下标 | ???? 强语义 |
<sup> |
上标（脚注、指数、序数词） | 上标 | ???? 强语义 |
<code> |
计算机代码片段 | 等宽字体 | ???? 强语义 |
<abbr> |
缩写/首字母缩略词 | 点状下划线 | ???? 强语义 |
<blockquote> |
块级引用（长引用） | 缩进块 | ???? 强语义 |
<q> |
行内短引用 | 自动加引号 | ???? 强语义 |
<cite> |
引用来源的标题（书名、电影名） | 斜体 | ???? 强语义 |
实战代码示例
<!-- 文章中的强调 -->
<p>请注意：<strong>会议时间已更改</strong>，新时间为明天下午 3 点。</p>
<p>他<em>真的</em>非常喜欢这座城市。</p>
<!-- 产品价格（原价与现价） -->
<p>
原价：<s>¥299.00</s><br>
现价：<strong>¥199.00</strong>
<small>（已节省 ¥100.00）</small>
</p>
<!-- 化学反应式 -->
<p>水的化学式：H<sub>2</sub>O</p>
<p>硫酸：H<sub>2</sub>SO<sub>4</sub></p>
<!-- 数学公式 -->
<p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>2<sup>10</sup> = 1024</p>
<!-- 代码片段 -->
<p>
在 JavaScript 中，使用 <code>console.log()</code> 输出调试信息。
声明变量用 <code>const</code> 或 <code>let</code>。
</p>
<!-- 缩写 -->
<p>
<abbr title="HyperText Markup Language">HTML</abbr> 是网页的基础。
<abbr title="Cascading Style Sheets">CSS</abbr> 负责页面样式。
</p>
<!-- 搜索结果关键词高亮 -->
<p>
搜索结果：关于<mark>武鸣大学城</mark>的最新资讯，
包括<mark>武鸣大学城</mark>的交通规划和<mark>武鸣大学城</mark>的配套设施。
</p>
<!-- 文档修订记录 -->
<p>
版本 2.0 更新内容：</p>
<ul>
<li><del>旧版登录页面</del> <ins>新版 OAuth 2.0 登录页面</ins></li>
<li><del>MySQL 5.7</del> <ins>MySQL 8.0 数据库引擎</ins></li>
</ul>
<!-- 引用 -->
<blockquote cite="https://example.com/source">
<p>代码是写给人看的，顺便能在机器上运行。</p>
<footer>— <cite>《计算机程序的结构与解释》</cite></footer>
</blockquote>
<!-- 外语术语 -->
<p>
意大利语中，<i lang="it">ciao</i> 既是"你好"也是"再见"。
这个词来源于威尼斯方言的 <i lang="vec">s-ciào</i>（意为"奴隶"，引申为"为您服务"）。
</p>
语义选择决策树
需要加粗文字？
├── 这段文字非常重要/紧急？ → 用 <strong>
└── 仅仅为了视觉美观？ → 用 <b> 或 CSS font-weight
需要斜体文字？
├── 需要重读/强调？ → 用 <em>
├── 技术术语/外语？ → 用 <i>
├── 书名/电影名？ → 用 <cite>
└── 仅仅为了视觉美观？ → 用 CSS font-style
需要下划线？
├── 拼写错误标注？ → 用 <u>
├── 新增内容？ → 用 <ins>
└── 普通链接？ → 用 <a>（浏览器自动加下划线）
需要删除线？
├── 文档修订删除？ → 用 <del>
└── 价格打折/不再准确？ → 用 <s>
???? 练习任务
- 创建一篇文章，使用
<strong>和<em>分别标注关键信息和需要强调的内容 - 写一个产品促销模块：用
<s>表示原价，<strong>表示现价，<small>表示备注 - 展示一个化学方程式和一道数学公式，正确使用
<sub>和<sup> - 用
<del>和<ins>模拟一个文档的版本对比 - 用
<abbr>写出 5 个常见技术缩写的全称（HTML, CSS, JS, API, URL） - 用
<blockquote>和<cite>引用一句名人名言