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