应使用语义化标签而非纯样式标签：<strong>用于需屏幕阅读器加重、SEO识别的关键信息，<b>仅视觉加粗；<em>表语气强调，<i>仅用于外文词等约定斜体；<code>、<pre>、<samp>各司其职；<sub>/<sup>须用于化学式/数学幂次以保复制与兼容性。
别用 <b> 和 <i> 做语义强调，这是最常被忽略的兼容性与可访问性雷区。
什么时候该用 <strong> 而不是 <b>
当文本需要被屏幕阅读器加重朗读、被搜索引擎识别为关键信息，或你希望未来样式变更时逻辑仍成立，就该用 <strong>。比如错误提示、必填字段说明、法律条款中的责任条款。
-
<b>只影响视觉加粗，对辅助技术无意义；<strong>会触发语音合成器提高音调/语速 - CSS 重置后，
<b>可能完全不加粗，但<strong>仍保有语义权重 - 在严格模式（如 XHTML）或校验工具中，
<b>用于强调会被警告
<em> 和 <i> 的实际分界在哪
<em> 表示语气上的强调，比如“我真的没看到”里的“真的”；<i> 仅用于约定俗成的斜体场景：外文词（<i>et al.</i>）、船名（<i>Titanic</i>）、生物分类（<i>Homo sapiens</i>）。
- 写“这个功能
<i>暂时不可用”，是错的——“暂时”是语气强调，该用<em> - 写“请按
<i>Ctrl+S</i>保存”，也是错的——快捷键该用<kbd>，不是<i> - 浏览器默认样式可能让两者看起来一样，但语义层已不同，会影响 SEO 和无障碍测试通过率
<code>、<pre>、<samp> 别混着用
<code> 是单行内联代码片段；<pre> 保留所有空白和换行，适合多行代码块；<samp> 表示程序输出结果，比如终端回显。
立即学习“前端免费学习笔记（深入）”；
- 写
<code>console.log('hello')</code>正确；写<pre><code>...</code></pre>是常见嵌套规范，兼顾语义与格式 - 直接用
<pre>包纯文本（无<code>）会丢失“这是代码”的语义 -
<samp>不该用来高亮错误信息——那是<mark>或 CSS 的事
<sub> 和 <sup> 的数学与化学陷阱
化学式（H2O）必须用 <sub>，不能靠 CSS vertical-align 模拟；数学幂次（xn）同理。否则会破坏复制粘贴行为、影响 MathML 兼容、导致打印失真。
- 复制 H2O 到 Word 或记事本，应得到 “H₂O”，而不是 “H2O” 或乱码
- 用
<span style="vertical-align: sub">2</span>在高 DPI 屏幕上容易模糊或错位 - 某些旧版 IE 对
<sub>/<sup>字号缩放不一致，需配合font-size微调
真正难的不是记住哪个标签怎么写，而是每次敲下 <b> 前，得想清楚：这里到底需不需要被机器“听懂”。
