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