浏览器通过语义标签<em>和<strong>识别文本强调，而非视觉样式；<em>表示语气重读，<strong>表示内容重要性，二者语义不可被<i>或<b>替代，误用会破坏可访问性与SEO。
浏览器怎么知道一段文本是“强调”还是“普通”
关键不在文字本身，而在你用的标签：<em> 和 <strong> 是语义标签，浏览器（以及屏幕阅读器、搜索引擎）看到它们，就明白“这段内容有额外语气或重要性”，不是单纯为了变斜体或加粗。而普通文本，比如直接写在 <p> 里没套任何标签的字，就没有这层含义——它只是内容，没有权重、没有重音提示、没有可访问性信号。
<em> 和 <strong> 的实际影响在哪
它们的区别不是“斜体 vs 加粗”这种视觉表象，而是语义强度和辅助技术行为：
-
<em>告诉屏幕阅读器：“这个词需要重读”，类似说话时抬高语调，比如<p>我没说<em>他</em>偷了钱</p>—— 重音落在“他”，暗示别人可能说了 -
<strong>触发更强的语音反馈（如停顿+加重+降调），也常被爬虫赋予更高权重，比如<p>该操作<strong>不可撤销</strong></p> - 两者默认样式可被 CSS 覆盖，但语义不会丢失；换成
<i>或<b>，语义就退化为“只是换个样子”，读屏软件会像读普通词一样平铺直叙
为什么不能用 <i> 或 <b> 替代强调
因为它们的语义完全不同，混用会导致信息失真：
-
<i>表示“语境切换”，比如外语短语<i lang="fr">bonjour</i>、生物学名<i>Homo sapiens</i>，不是强调，只是“不属于当前语境” -
<b>表示“视觉上要醒目但无额外重要性”，适合产品名<b>iPhone 16</b>、文档关键词，绝不能用于警告或逻辑重音 - 把
<em>写成<i>，等于告诉读屏软件：“这只是个法语词”，而不是“请重读这个词来改变句意”
常见误用场景和修复建议
真实项目里最容易出错的地方集中在“想让文字显眼”就随手套标签：
立即学习“前端免费学习笔记（深入）”；
- 错误：用
<strong>包裹标题里的关键词（如<h2>使用<strong>React</strong>构建应用</h2>）→ 标题本身已是强结构，再加<strong>属于语义冗余 - 错误：在表格中对数值加
<em>表示“重点看这里”→ 数值强调应靠 CSS 颜色/背景，<em>会误导读屏用户以为句子逻辑有变化 - 正确做法：先问“这段文字的语气/重要性是否影响理解？”——是，选
<em>或<strong>；否，用 CSS 控制外观，或选<i>/<b>（并确保符合其语义）
最常被忽略的一点：语义标签一旦嵌套错误（比如 <strong><em>危险</em></strong>），读屏软件可能无法准确传达双重意图，反而造成混淆。优先单层使用，靠 CSS 实现复合样式。
