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