应优先用 表示语气强调，仅当需标示技术术语、外来词、船名、作品名或状态标签时才用 ；二者语义不同，误用会损害可访问性和seo。
什么时候该用 <i></i> 而不是 <em></em>
<i></i> 和 <em></em> 渲染效果常一样，但浏览器不关心样式，只认语义。用错会干扰屏幕阅读器、SEO 和可访问性工具。
实际开发中，<i></i> 只适合纯样式/非强调类文本，比如：
- 技术术语、外来词（如
<i>et al.</i>、<i>café</i>） - 船名、作品名（
<i>The Odyssey</i>） - 状态标签（
<i>draft</i>、<i>deprecated</i>）
而 <em></em> 表示“语气上的强调”，必须能被读出来重音——删掉它，句子逻辑或重点就变了。比如：<p>You <em>must</em> call the API before rendering.</p>
<em></em> 嵌套时的语义强度变化
连续嵌套 <em></em> 并不会让文字“更斜”或“更粗”，但会影响语音合成器的停顿和重音层级。主流读屏软件（NVDA、VoiceOver）会把双层 <em></em> 当作更强语气处理。
但别滥用：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 三层及以上嵌套几乎没人听懂，反而打断节奏
- 不要用
<em><em>...</em></em>替代 CSS 的font-style: italic—— 这是样式问题，不是语义 - 如果只是想让一段话视觉上斜体，且无强调意图，直接用 CSS：
span { font-style: italic; }
Vue/React 里动态渲染容易踩的坑
框架模板中写 <i>{{ text }}</i> 很常见，但若 text 来自用户输入或 API，就可能引入 XSS 风险（尤其当后端没转义 HTML 实体时）。
更稳妥的做法：
- 用
<span></span>+ CSS 类代替<i></i>，避免语义混淆和潜在注入 - 在 React 中优先用
<em></em>，除非明确需要<i></i>的语义；Vue 模板同理，别图省事全用<i></i> - SSR 场景下，
<i></i>和<em></em>对搜索引擎的权重影响微乎其微，但可访问性检测工具（如 axe）会报<i></i>缺失 aria-label 的 warning
旧项目迁移时怎么批量判断是否要改
直接搜 <i></i> 标签没用——得看上下文。重点检查这些位置：
- 表格表头里的
<th><i>Name</i></th>→ 改成<th scope="col">Name</th>，斜体是冗余样式 - 按钮文字带
<i>Save</i>→ 删除<i></i>，用 CSS 控制外观 - 文档段落中
<p>See <i>Section 3.2</i> for details.</p>→ 保留<i></i>，这是正确用法（作品/章节名）
最麻烦的是中文场景：<i>测试</i> 看不出语义，得翻需求文档或问产品——它到底是“强调‘测试’很重要”，还是“标出这是一个功能模块名”？前者用 <em></em>，后者才用 <i></i>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
