em标签的核心作用是标记口语中需重读的词以传达语义或情绪，而非单纯视觉斜体；适合“啊”“真的”等改变句意的语气词，嵌套不超过两层，隐藏时应避免破坏可访问性。
em标签不是加斜体，而是标记“说话时要重读这个词”
直接结论：em 标签的作用不是让文字变斜体，而是告诉浏览器、屏幕阅读器和搜索引擎：“这个词在口语中会被刻意抬音调、拖长或加重”。如果你只是想视觉上倾斜，该用 i 或 CSS 的 font-style: italic；但若目标是让“啊”“真的”“居然”这类语气词在语音输出里被听出来有情绪张力，em 是唯一合规选择。
哪些语气词适合套em？看它是否改变句子含义
判断标准只有一个：去掉重读，句子意思或语气是否明显不同？
- ✅ 适合：
em包裹“啊”——“你居然来了啊！”（“啊”拖长才传达惊讶） - ✅ 适合：
em包裹“真的”——“这真的不是我删的”（强调“真的”才能表达辩解语气） - ❌ 不适合：
em包裹“嗯”——“嗯，我知道了”中的“嗯”是应答填充词，无语义重心，用i或不加标签更合理 - ❌ 不适合：
em包裹整句感叹号前的全部文字——<p><em>天哪这太棒了！</em></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>属于语义污染，读屏器会把整句当一个重读单元，失去节奏感
嵌套em别超过两层，否则辅助技术可能失效
双层 em 可用于强化反讽或意外感，比如“这‘完美’的方案”，部分读屏器会升调+停顿。但三层及以上（<em><em><em>xxx</em></em></em>）会导致：
- Lighthouse 和 axe 工具标为「语义冗余」
- 旧版 NVDA 或 VoiceOver 可能跳过内层或报解析错误
- 搜索引擎不会因此加分，反而可能降低内容可信度
CSS隐藏em内容会破坏可访问性
如果用 display: none 或 visibility: hidden 隐藏 em 文本，屏幕阅读器仍会朗读——造成信息泄露。正确做法是：
- 仅需视觉弱化时，改用
opacity: 0.7或color: #666 - 完全不想让机器读取时，不要用
em，换span+ ARIA 属性（如aria-hidden="true"） - 切忌用
em包裹图标文字（如<em>⚠️警告</em>），图标本身已有语义，额外强调反而干扰
em，结果稀释了真正需要语音重读的关键词——比如“请立即保存”里的“立即”，比十个“请”都重要。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
