HTML <i> 标签

HTML <i> 标签简介

要在网页上添加斜体样式的主要 HTML 组件是 <i> 标签，它代表“italic”（斜体）。它的主要功能是将某些单词或短语的字体样式设置为斜体，以在视觉上强调或突出它们。<i> 标签不会赋予其包含的内容任何特定的语义含义，它主要处理文本的外观。

关键概念

• 斜体格式：由于存在一个称为 <i> 标签的表示元素，因此可以实现斜体格式，该元素允许网页设计者通过以斜体字形呈现内容来突出显示内容。这对于突出外来词、书籍标题、杂志标题和其他短语特别有用。
• 无语义含义：与 <em>（强调）和 <strong>（强重要性）等其他 HTML 元素不同，<i> 标签不会赋予其包含的内容任何固有的语义含义。它仅考虑美学设计。
• 语义标签与样式标签：区分语义标签和样式标签（如 <i>）至关重要。语义标签为信息提供结构和含义，有助于搜索引擎优化和可访问性。虽然 <i> 元素可以改变文本的外观，但它不传达任何特定含义。

语法和用法

以下是关于 HTML <i> 标签的一些规范

示例 1

输出

HTML 与 CSS 斜体

使用 HTML <i> 标签和 CSS 应用斜体时，会使用不同的文本格式化方法。此处将对比这两种技术，以及何时应用每种策略。

语法：CSS 斜体

嵌套 <i> 标签

您可以通过将 HTML <i> 标签嵌套在其他 HTML 组件中，来为更大的上下文中的特定文本段落设置斜体格式。请遵守以下规则以正确嵌套 <i> 标签：

1. 开始和结束标签

始终确保每个嵌套的文本块都有一个开始的 i> 标签和一个对应的结束 /i> 标签。

2. 正确的层级结构

嵌套应遵循正确的 HTML 元素结构。外部 i> 标签必须完全包含内部 i> 标签。

3. 防止重叠

为避免意外结果，请确保嵌套的 i> 标签和任何应用相同样式的其他标签不重叠。

4. 保持语义含义

请注意保持内容语义含义的完整性。嵌套 i> 标签不应改变文本的预期含义。

以下是关于如何在其他 HTML 元素中正确嵌套 <i> 标签的一些示例：

示例 1：嵌套在段落中的段落

输出

此示例显示“italic”嵌套在“nested italic text”中，在网页浏览器中查看时，两者都会被斜体显示。

示例 2：嵌套在标题中

输出

在本例中，整个标题文本，包括嵌套的部分，都将被斜体显示。

示例 3：嵌套以强调

输出

在上面的情况下，“important”嵌套在“emphasizing important text”中，两者都会被斜体显示以强调。

示例 3：嵌套在列表中

输出

在这个最后的示例中，所有列表项都被斜体显示，因为每个列表项的内容都嵌套在 <i> 标签内。

注意：虽然嵌套 <i> 标签对于将斜体格式应用于元素的特定部分很有用，但请记住要谨慎使用它，以避免过度使用或在 <em> 等更具语义含义的标签可能更适合传达强调的情况下使用。

属性

• 特定于标签的属性

HTML <i> 标签不包含任何特定属性。

• 全局属性

HTML <i> 标签支持 HTML 中的全局属性。

• 事件属性

HTML <i> 标签支持 HTML 中的事件属性。

已弃用的 HTML <i> 属性

最初与 HTML 元素关联但现在不再推荐或接受在现代 HTML 中使用的属性是已弃用的属性。对于此标签，没有特别相关的且普遍过时的属性。过去，该标签的主要功能是为文本提供斜体样式，并且它具有一些其他属性。

尽管各种元素可以具有不同的 HTML 属性用途，但某些与样式和表示相关的功能可能已过时。由于这些已弃用的属性混合了表示和内容，这可能导致可访问性较差且难以维护的代码，因此通常不鼓励使用它们。现代网页开发技术鼓励使用 JavaScript 来处理行为，使用 CSS 来处理样式。

以下是一些曾经被广泛使用但现在通常已弃用的、适用于所有 HTML 元素（包括用于显示的元素）的样式属性：

• Align 属性：以前，可以使用 align 属性指定元素的水平对齐方式（例如左对齐、右对齐或居中对齐）。但是，现在推荐使用 CSS 进行对齐和定位。

弃用是有必要的，因为应使用 CSS 来管理与表示相关的样式，这将更好地分离内容和表示。

• Style 属性：style 属性经常用于将内联 CSS 样式直接应用于 HTML 组件，尽管它不只适用于 i> 标签。应避免使用此策略，因为它将表示与内容混合在一起，并可能导致代码不可靠。统一且可扩展的样式最佳选择是外部 CSS 样式表。

由于 style 属性的维护性和可重用性差，因此不建议出于样式设置原因使用它。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<i>	是的	是的	是的	是的	是的

HTML5 和已弃用用法

<i> 标签仍然包含在 HTML5 中；但是，由于使用方式的变化，它目前在多种用途上被视为已弃用，而应使用 CSS 进行样式设置。在 HTML5 中，<i> 标签在多种用途上已被弃用，并且通常用作：

• 表示格式：在 HTML5 中，斜体文本是一种常见的表示格式技术。将其用于此目的仍然是可以接受的，但必须理解这种用法纯粹是样式，没有语义价值。
• 样式设置的 <i> 标签已弃用：将内容与表示形式分离是现代网页开发的基本理念，这也是 <i> 元素因样式设置而被弃用的原因。与使用 <i> 等 HTML 标签相比，使用 CSS 进行样式设置有多种优势。
  使用 <em> 和 <strong> 进行语义格式设置以传达意义。使用 CSS 和自定义类来分离内容和表示，仅用于表示格式设置。这种方法生成的网页代码更易于阅读和维护。

HTML 中 <i>、<em> 和 <strong> 标签之间的区别