在本文中,我们将学习如何使用 <i> 标签,以及它与 <em> 标签的区别。

在之前版本的 HTML 中,<i> 标签用于以斜体显示文本。但是在 HTML 5 中,它的定义已被更改。我们将探索新定义,并了解使用 CSS 呈现斜体文本的其他方法。

<i> 标签是什么

<i> 标签表示文本情绪的变化,或者与文本中其余部分不同的部分。该文本显示为斜体。

让我们看一下在哪些情况下使用 <i> 标签。

使用 <i> 标签表示使用其他语言的短语

你可以使用 <i> 标签来标记一段使用另一种语言的文本。下面的示例以斜体显示一个拉丁词组。

<p>Stacy just got a tattoo of the phrase <i>Audentes fortuna iuvat</i> which means "Fortune favors the bold".</p>

你还可以使用 <i> 标签中的 lang 属性来表示与其他文本使用的语言不同的短语。

<p>The first phrase that Matt learned in Italian is <i lang="it">Vorrei una birra</i>, which translates to "I'd like a beer".</p>

使用 <i> 标签表示某人的想法

你也可以使用 <i> 标签来强调一个人内心的想法。

<p>After Ben met his girlfriend's parents he thought to himself, <i>I really hope they liked me</i>.</p>

使用 <i> 标签表示一艘船的名称

如果你想要使用一艘船的名称,则可以将该名称放在 <i> 标签中。

<p>The <i>USS Arizona</i> was a United States Navy battleship built in the 1910's.</p>

使用 <i> 标签进行分类描述

根据《生物多样性公约》

分类学是对生物进行命名、描述和分类的科学,包括世界上所有的植物、动物和微生物。

下面的示例对术语 Felis catus 使用 <i> 标签。

<p>Another term for the domestic cat would be <i>Felis catus</i>.</p>

HTML<i> 标签和 <em> 标签的区别

你可能会认为 <i><em> 标签具有相同的含义,因为它们在浏览器中看起来相同。 但是,这两个标签的含义其实是不同的。

当你要强调一个词语或一段文本时,应使用 <em> 标签,或者叫作强调元素。

这是使用 <em> 标签的示例。

 <p>Quit being a baby and just <em>do</em> it already!</p>

人类和屏幕阅读器会对 “do” 这个词着重发音。这与 <i> 标签不同,在 <i> 标签中,文本没有特别强调。

应该对样式使用 <i> 标签吗

不应使用 <i> 标签设置样式。如果要呈现斜体文本,则应使用 CSS 的 font-style 属性。

<p class="demo-para">I am using CSS to style this text in italics.</p>
.demo-para {
  font-style: italic;
}

<i> 标签或 <span> 标签可以用于图标吗

多年来,关于使用 <i> 标签或 <span> 标签向网站添加图标是否“正确”的争论一直存在。

有些人会认为这没什么问题,这是很普遍的做法。而另一些人则认为这是对 <i> 标签的滥用,应该改用 <span> 标签。

Font Awesome 关于将 <i> 用于图标的规定:

为了简洁起见,我们喜欢 <i> 标签。如今大多数人都将 <em></em> 用于强调/斜体的语义文本。如果那不是你的理想之选,那么使用 <span> 在语义上更为正确。

我的目标不是让你在这场辩论中选择一方,而是让你知道这一正在进行的讨论。

结语

<i> 标签表示文本情绪的变化,或者与文本中其余部分不同的部分。如果重点是放在文本上,则使用 <em> 标签更合适。

<i> 标签不应用于设置样式。呈现斜体样式文本的正确方法是使用 CSS 的 font-style 属性。

希望你喜欢这篇文章,并了解何时使用 <i> 标签。

原文:HTML Italics Tutorial – How to Make Text Italic with the <i> tag,作者:Jessica Wilkins