em用于语义强调，表示朗读时需抬音调，传递反讽、对比或紧迫感；i仅标记特殊文本类型（如外文词、术语），无语义强调功能，两者核心区别在于是否影响语音输出与语义解析。
em 表示语气强调，不是“让它变斜体”
用 em 的唯一理由是：这个词在口语中会被重读、拖长、或带反讽/对比/紧迫感。浏览器默认斜体只是呈现方式，核心是向屏幕阅读器、搜索引擎传递“这里有人在刻意加重语气”。比如“你必须保存”，“必须”是动作约束点；“这‘显然’不是个好主意”，“显然”是反语锚点。
常见错误现象：<i>必须</i> 被读屏软件平读，用户听不出强制性；SEO 工具可能忽略该词的语义权重。
- 嵌套
em有意义：外层强调整体句意，内层再突出某个词，如“你绝对<em>不要</em>忽略警告” -
em不等于 CSSfont-style: italic：你可以用 CSS 把它设成红色加粗，语义仍有效 - React/Vue 模板里写错不会报错，但
eslint-plugin-jsx-a11y会标jsx-a11y/no-distracting-elements
i 表示文本类型特殊，不是“换种字体”
i 标签只用于标记“这段文字本就不属于主叙述流”，比如外文词（<i>et al.</i>）、生物学名（<i>Homo sapiens</i>）、船名（<i>Queen Mary 2</i>）、技术术语首次出现（<i>API</i>，建议配合 title 属性说明）。它不暗示重要性，也不触发读屏语调变化。
错误场景高频出现：按钮文字“点击<i>此处</i>上传”——“此处”是操作焦点，需强调，该用 em 或 strong；图标字体 <i class="icon-user"></i> 是反模式，应改用 <span aria-hidden="true"></span>。
-
i嵌套无意义：<i><i>café</i></i>和单层效果完全一致，读屏器不识别层级 - 纯为视觉斜体？直接用
span+ CSSfont-style: italic，别污染语义 - 某些 a11y 扫描工具（如 axe）会把
i包裹的操作文本标为 color-contrast 风险，因它被归类为“装饰性内容”
怎么选？只问一句话：朗读时会不会抬音调？
如果答案是“会”，就用 em；如果答案是“不会，只是告诉读者‘这是个外来词/术语/船名’”，就用 i。这个判断比看渲染效果可靠得多——因为所有老浏览器都把两者渲染成斜体，但语义错位在语音输出、爬虫解析、自动化测试里才真正暴露问题。
最容易被忽略的一点：CSS 可以覆盖 em 的斜体样式，但它依然保有 role="emphasis"；而 i 在开发者工具里查不到任何 role，它就是个空壳语义容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
