应优先用强调语气或重要性，屏幕阅读器重读、seo加权；仅用于外文词、学名等无强调意图的斜体文本，纯表现需求须用css控制。
<i></i> 和 <em></em> 都能实现文字倾斜，但浏览器渲染效果一致 ≠ 语义等价 —— 用错会损害可访问性、SEO 和代码可维护性。
什么时候该用 <em></em>？
仅当需要强调某段文字的**语气或重要性**时使用。屏幕阅读器会重读 <em></em> 内容，搜索引擎也视其为语义加权信号。
- 适合场景：解释关键概念、纠正前文、表达反语或转折（如“这‘显然’不是个好主意”）
- 嵌套层级有意义：
<em><em>非常</em>重要</em>中外层强调程度更高，部分读屏器会改变语调 - 不要只为了斜体样式而用 —— CSS 的
font-style: italic更合适
什么时候该用 <i></i>？
<i></i> 是纯语义中性标签，W3C 明确限定其适用范围：表示“非文本语调”的短文本，且不带强调意图。
- 常见合法用例：
– 外文词（<i>raison d'être</i>）
– 生物学名（<i>Homo sapiens</i>）
– 船舶名（<i>Titanic</i>）
– 技术术语缩写首次出现（<i>API</i>，需配合title属性说明） - 禁止用于图标字体或 SVG 替代：比如
<i class="icon-user"></i>是反模式，应改用<span aria-hidden="true"></span>或原生<svg></svg> - 它不传递任何权重，对 SEO 和辅助技术无影响
<i></i> 和 <em></em> 在 CSS 里默认表现一样，但不能互换
浏览器默认都设了 font-style: italic，但这只是呈现约定，不是语义许可。强行用 <i></i> 替代 <em></em> 来“省事”，等于把结构层和表现层混为一谈。
- 若项目强制统一斜体风格，应通过 CSS 重置：
em, i { font-style: italic; }，而非删掉语义 - 某些无障碍工具（如语音朗读插件）会忽略
<i></i>的样式，但依然按语义跳过或静音处理 - 用开发者工具检查元素时，
<em></em>会显示 role="emphasis"，<i></i>则无对应 role —— 这是实际差异所在
图标类需求别碰 <i></i> 标签
所谓“HTML 图标常用标签”是个历史包袱。Bootstrap 2/3 时代滥用 <i></i> 放字体图标（如 <i class="fa fa-user"></i>），导致大量代码语义污染。
- 正确做法：用
<span></span>包裹图标，并添加aria-hidden="true"（若图标纯装饰）或role="img" aria-label（若图标承载信息） - 更现代方案：直接用
<svg></svg>内联，天然支持语义、缩放和配色控制 - 如果真要用
<i></i>，必须确保其内容符合 W3C 对“非强调性斜体文本”的定义，否则审查工具（如 axe、Lighthouse）会报“semantic markup misuse”错误
语义不是教条，但当你在写 <i></i> 前犹豫要不要加 title、要不要被读出来、要不要被搜索索引时 —— 那大概率该换标签了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
