必须用<em>强调语气（如反讽、转折），因其被屏幕阅读器重读且SEO识别；<i>仅用于外文词、术语等非强调场景；二者语义不同，不可因CSS覆盖而混淆用途。
别用 <i> 替代 <em> 来强调语气——屏幕阅读器不会重读，SEO 也不会识别重点。
什么时候必须用 <em>，不能用 <i>
当你想让“这个词被听出来是重点”时，<em> 是唯一合法选择。比如反讽、对比、意外转折或需要语音加重的词。
- 错误写法：
<i>真的</i>很好吃—— 屏幕阅读器平读，“真的”失去反讽感 - 正确写法：
这<em>真的</em>很好吃—— 辅助技术会拖长/加重“真的”，匹配口语逻辑 - 适用场景：教学材料中突出新术语（
HTML 中的 <em>语义化</em> 指内容与结构的对应关系）、用户提示中的关键动作（请<em>立即保存</em>配置）
什么时候该用 <i>，反而不能用 <em>
<i> 不是“斜体快捷键”，它是为特定文本类型打标签的：外文词、科技术语、船名、作品名、思想流、小字号旁注等——这些内容本身就不属于主叙述流，不需强调，只需区分。
- 正确写法：
她读了 <i>Le Petit Prince</i> 的法语原版（外文词） - 正确写法：
参见 RFC <i>9110</i> 第 4.2 节（标准编号，非强调） - 错误写法：
点击 <em>提交</em> 按钮—— “提交”是操作按钮名，不是语气重点；应改用<span>+ CSS 或直接用<i>（若属惯例命名）
<em> 和 <strong> 不是“斜体 vs 加粗”的样式选择
它们是两层不同的语义强度：<em> 是语气级强调（类似说话时抬音调），<strong> 是内容级重要（类似拍桌子说“这事必须做”）。浏览器默认渲染不同，但核心差异在可访问性行为。
立即学习“前端免费学习笔记（深入）”；
-
<em>：屏幕阅读器改变语调（升调/停顿），不改变语义权重 -
<strong>：屏幕阅读器可能降调+加重，搜索引擎更倾向将其视为段落核心信息 - 嵌套示例：
你<em>绝对<sub>不要</sub></em>忽略 <strong>这个警告</strong>—— 外层是语气提醒，内层是事实级严重性
CSS 覆盖默认样式时，语义仍不可丢
即使你用 CSS 把 <em> 设成红色加粗、把 <i> 设成正常字体，它们的语义角色不变。辅助技术和爬虫只看标签名，不看最终渲染效果。
- 危险操作：
<em style="font-style:normal">注意</em>—— 视觉无斜体，但读屏软件仍会加重读出 - 更安全做法：真不需要强调，就别用
<em>；需要斜体纯视觉效果，用<span class="italic">+ CSS - 团队协作中，错用
<i>写强调，会让 QA 或无障碍测试直接标为 bug
最容易被忽略的一点：语义错误不会报错，页面照样渲染，但一旦接入读屏软件、SEO 工具或自动化内容分析，问题立刻暴露——而那时返工成本远高于写代码时多敲两个字母。
