em用于语义强调，屏幕阅读器重读、seo识别；i仅表斜体样式，适用于外文词、船名等非强调场景，二者语义不同不可混用。
em 是语义强调，不是“加个斜体”那么简单
浏览器默认把 em 渲染成斜体，但它的核心作用是告诉机器：“这句话里这个词被说话人刻意重读了”。屏幕阅读器会改变语调，搜索引擎会识别其重要性，CSS 也能通过 em:not([title]) 这类选择器做差异化处理。如果只图视觉效果而用 em，反而会让辅助技术误判语气节奏。
i 标签只负责“看起来不一样”，不带语气或重要性
i 的本职是标记“这段文字在语境中类型特殊”，比如外文词 <i>bonjour</i>、船名 <i>Titanic</i>、生物学种名 <i>Homo sapiens</i>。它不暗示重音、不触发读屏变调、也不影响 SEO 权重。误用 i 替代 em，等于把“需要强调”降级为“只是换个字体”。
嵌套层级和继承行为容易踩坑
em 支持嵌套，且语义强度逐层递增：单层 em 是普通强调，双层 em 表示更强语气（部分读屏器会加重停顿或升调）。但注意：i 嵌套不会叠加语义——两层 i 和一层没区别，纯属样式叠加。另外，em 在 strong 内部时，强调的是语气而非内容权重；反过来，strong 包裹 em 则是“重要内容 + 重读表达”，语义更重。
什么时候必须用 em，什么时候只能用 i
以下场景优先用 em：
- 口语化强调：“你必须在截止前提交”中的“必须”适合
<em>必须</em> - 反讽或对比：“这真是‘完美’的解决方案”中“完美”加
em可辅助理解语境 - 教学材料中首次引入术语：“
<em>DOM</em>是文档对象模型的缩写”
以下场景只能用 i：
- 拉丁学名：
<i>Canis lupus</i> - 未翻译的外语短语：
She said <i>je ne sais pas</i> and left. - 手写体模拟或旁注说明（无强调意图）
别为了“统一斜体风格”把 i 当通用斜体开关——那该用 CSS 的 font-style: italic。
最常被忽略的一点：HTML5 规范明确要求，当斜体仅用于排版目的时，i 是唯一合规选择；而只要涉及语气、重点、反语、新概念引入，就必须用 em。混淆二者不是样式问题，是语义断言错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
