学习目标

• 理解 <i> 标签的基本语法与默认样式

• 掌握 <i> 标签的语义化使用场景（如技术术语、外语词汇等）

• 区分 <i> 与语义更强的标签（如 <em>、<cite>、<dfn>）的使用边界

• 学会通过 CSS 实现斜体效果，并理解样式与语义的分离原则

什么是斜体标签

HTML 中的 <i> 标签用于将文本以斜体形式显示。虽然其视觉效果是“倾斜”，但现代 HTML5 规范更强调其语义用途：用于表示一段在上下文中具有不同性质或分类的文本，而非单纯为了强调。

注意：<i> 不是用来表达“强调”或“重要性”的标签——那是 <em> 和 <strong> 的职责。

基本语法

<i>这段文字将以斜体显示</i>

默认样式

浏览器默认为 <i> 应用 font-style: italic;，但可通过 CSS 覆盖。

语义化使用

根据 HTML5 规范，<i> 标签适用于以下非强调性但需视觉区分的文本类型：

关键原则：当文本不属于强调、引用、定义或标记高亮时，才考虑使用 <i>。

基础示例

在段落中使用

<p>
  <i>一个面向程序员的计算机科学学习平台。</i>
  平台提供结构清晰、讲解透彻的编程与算法文章。
</p>

普通文本与斜体

<p>这是普通段落文本</p>
<i>这是斜体文本（无段落语义）</i>

注意：<i> 是行内元素，不会自动换行。若需段落级斜体，应使用 <p style="font-style: italic;"> 或语义标签。

使用 CSS 实现

虽然 <i> 可实现斜体，但纯视觉需求应优先使用 CSS：

<p style="font-style: italic;">
  这段文字通过 CSS 设置为斜体。
</p>

或在样式表中定义：

.italic-text {
  font-style: italic;
}

<span class="italic-text">斜体内容</span>

最佳实践：

• 若仅为视觉效果 → 用 CSS

• 若有特定语义分类 → 用 <i>

• 若需强调语气 → 用 <em>

与其他标签区别

注意事项

1. 不要滥用 <i> 代替 <em>：屏幕阅读器对 <em> 会加重语气，但对 < i> 无特殊处理。

2. 可结合 lang 属性：标注外语时提升可访问性，如 <i lang="la">et cetera</i>。

3. 支持全局属性与事件：可添加 class、id、onclick 等，便于样式控制或交互。

4. 自闭合？否！：<i> 必须有闭合标签 </i>，不可写作 <i />。

重点总结

• <i> 标签用于分类性斜体文本，如技术术语、外语词汇、物种名等

• 不应用于强调或重要内容——那是 <em> 和 <strong> 的职责

• 纯视觉斜体应优先使用 CSS 的 font-style: italic

• 与 <cite>、<dfn> 等标签相比，<i> 的语义最弱，仅表示“视觉上不同”

• 正确使用 <i> 有助于提升网页的语义清晰度和可访问性

思考题

1. 在一篇科技博客中，“API”、“JSON”、“OAuth” 这些词是否应该用 <i> 包裹？为什么？

2. 如果你只想让某段文字看起来是斜体，但没有任何特殊语义，应该使用 <i> 还是 CSS？

3. 如何通过 CSS 让 <i> 标签不再显示为斜体？这样做是否违背了语义化原则？