应优先用语义化标签而非内联style；<b>用于纯视觉加粗（如品牌名），<strong>用于语义强调（如警告）；<i>表特定斜体内容（如外语词），<em>表语气重读；避免<u><s><tt>，改用CSS或更精确语义标签；<mark><small><sub>等有明确语义，须按规范使用。
直接用语义化标签控制文字表现，比写内联 style 更轻量、更可维护；但必须分清哪些是物理样式（仅外观）、哪些是逻辑语义（含含义），否则会影响可访问性和 SEO。
什么时候该用 <b> 而不是 <strong>
当加粗只是视觉强调、不带重要性语义时，比如产品名、品牌词、界面按钮文案——这些不需要被屏幕阅读器加重语气读出。<b> 就是为此设计的。而 <strong> 会触发语音阅读器提高音量或放慢语速，适合警告、必填项、关键操作提示等场景。
-
<b>：纯视觉加粗，无语义权重 -
<strong>：语义上“强重要”，影响辅助技术行为 - 浏览器默认样式可能一致，但搜索引擎和读屏软件会区别对待
- 不要用
<b>替代标题标签（如<h2>）来“假装”有层级——这破坏文档结构
<i> 和 <em> 的实际使用边界
<i> 不等于“随便斜体”，它专用于技术术语、外语短语、船名、生物分类名等传统印刷中习惯斜体的内容；<em> 则表示句子中需要重读的词，比如“你真的要删掉这个文件？”——这里的“真的”是语气重心。
- 用
<i>写 “The term bona fide comes from Latin.” - 用
<em>写 “I did not agree to those terms.” - 两者都可能渲染为斜体，但语义不可互换；滥用
<em>会让语音阅读器频繁变调，干扰理解 - 别用
<i>给图标做字体图标容器——那是<span>+ class 的事
为什么 <u>、<s>、<tt> 应该尽量避免
这三个标签在 HTML5 中要么被废弃（<s>、<tt>），要么语义模糊易引发混淆（<u> 默认样式和链接太像）。现代替代方案更明确、更可控：
立即学习“前端免费学习笔记（深入）”；
-
<u>→ 改用text-decoration: underline配合语义化容器，比如<span class="spelling-error"> -
<s>→ 换成<del>（表示已删除内容），或用 CSS 的text-decoration: line-through加自定义类 -
<tt>→ 全部替换为<code>（代码片段）、<kbd>（键盘输入）、<var>（变量）等专用语义标签 - 所有这类替换都能通过 CSS 精确控制颜色、间距、动画，且不影响语义流
<mark>、<small>、<sub> 这些冷门但实用的标签
它们不是“装饰品”，而是有明确定义的语义角色：<mark> 表示页面中与当前用户查询或上下文相关的高亮部分；<small> 是法律条款、版权信息、免责声明等“次要但需保留”的内容；<sub> 和 <sup> 必须用于化学式、数学公式、脚注编号等真实语义场景，不能用来做伪上标（比如“TM”商标符号应走 Unicode 或 CSS vertical-align）。
-
<mark>默认黄底，但建议用 CSS 覆盖以适配深色模式 -
<small>不只是“字号小”，它降低内容的权重等级，影响大纲生成和 SEO 权重分配 -
<sub>在H<sub>2</sub>O中正确，但在Version 2.1<sub>beta</sub>中就属于误用——beta 是版本修饰，非化学下标 - 这些标签一旦用错，会导致结构解析错误，比如 RSS 抓取器或搜索引擎摘要可能丢弃
<small>内容
真正难的不是记住每个标签怎么写，而是判断某段文字在文档结构里“是什么角色”——是强调？是引用？是代码？是副文本？选错标签，后期靠 CSS 强行覆盖样式，也补不回丢失的语义。
