em标签本质是标记语音重读而非单纯斜体，用于改变句子潜台词或责任归属；船名、学名等应使用i标签；嵌套不超过两层；慎用于按钮等交互元素；误用会削弱语义有效性。
em标签不是用来“让文字变斜”的
它本质是向浏览器、读屏软件和搜索引擎传递“这个词说话时要重读”的信号。删掉em后，句子潜台词或责任归属变了，才该用——比如<p>我<em>没说</em>他偷了钱</p>，强调“没说”，暗示别人说的；换成<p>我没说<em>他</em>偷了钱</p>，就变成撇清对象。如果只是船名《Beagle》、学名Canis lupus、API 名 fetch，一律不该套em。
嵌套em会改变语气层级，但别超过两层
HTML 允许嵌套，比如<p>他<em>真的<em>很</em>喜欢</em></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，模拟口语中“真的”和“很”两处重音。但三层以上嵌套（<em><em><em>xxx</em></em></em>）读屏软件基本不区分，反而打断语流。常见误用是为“加粗+斜体”效果硬套strong里再包em，这属于样式问题，应交由 CSS 控制，语义只留一层必要强调。
表格、按钮、label里慎用em
这些元素本身已有明确语义和交互意图，额外加em容易干扰辅助技术判断。例如：<button><em>提交</em></button>会让 NVDA 或 VoiceOver 在朗读时突兀抬调，用户可能误判为警告。真正需要强调的场景极少，比如表单校验失败提示中的关键词：“<span role="alert">邮箱格式<em>错误</em></span>”。测试建议：用 axe DevTools 扫描，检查em是否出现在button、label或th内部——大概率是误用。
em和i标签混用时，语义边界必须清晰
i只用于标示文本类型不同，不带语气：外文词（<i>et al.</i>）、作品名（<i>The Odyssey</i>）、状态标签（<i>deprecated</i>）。而em只用于可被读出来的重音。中文文档里给“JSON”“React”加i是惯常做法，但若上下文在对比技术选型（“我们不用 Vue，用<em>React</em>”），才轮到em出场。最容易被忽略的是：很多团队把em当“安全斜体替代品”，结果全文堆砌，真正关键的语气信号反而被淹没。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
