html - HTML <i> 标签和 css "font-style:italic"之间有什么区别？

Question

浏览器的显示方式是否存在差异:

<i>test</i>

<span style="font-style:italic">test</span>

其中一个比另一个更好吗？每个都有不同的场景吗？

快速的 jsfiddle 不会显示任何视觉差异。

Answer 1

在 HTML5 之前，无论是视觉效果还是语义上都没有区别； i ，例如b , s和u ，是一个表现元素。这与em形成鲜明对比。 , strong , del和ins分别。

在 HTML5 中，i元素具有特定的含义，恰好在视觉上以斜体文本表示。它不应该用来表示任何恰好是斜体的文本。特别是，它与 em 区分开来。元素，表示重音强调(并且与 i 、 doesn't necessarily have to be represented with italics 不同)。 span仍然是一个通用的短语元素，没有任何意义。

通常我会引用 spec但我认为MDN的总结更容易理解:

The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

尽管如此，规范仍然提供了更好的示例:

The examples below show uses of the i element:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

In the following example, a dream sequence is marked up using i elements.

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>