跳到主要内容

HTML 斜体

提示
  1. HTML斜体标签：使用<i>和<em>标签可以使HTML文本变成斜体，但两者在语义上有所不同。
  2. <i>标签的应用：<i>标签用于表示外语文本、科学命名、术语或思想，主要是为了显示效果。
  3. <em>标签的语义：<em>标签用于强调文本，有语义意义，屏幕阅读器会对其内容给予强调，不仅仅是显示为斜体。

我们使用 HTML <i> 标签或 HTML <em> 标签来使文本变为斜体。

HTML <i> 标签​

HTML <i> 标签是一个物理标签，用于使文本变为斜体。它用于指示外语文本、科学命名法、思想等。

<p>这段文本是<i>斜体</i>。</p>

浏览器输出

斜体文本

HTML <em> 标签​

HTML <em> 标签是一个语义标签，用于表示标签内的文本被强调。它是一个语义标签，与没有任何语义意义的 <i> 标签相对。

<p>这段文本是<em>被强调的</em>。</p>

浏览器输出

斜体文本

HTML <i> 标签的使用​

<i> 标签是一个展示性标签，主要用于：

  1. 表示其他语言的文本。例如，
<p>外国人说 <i>Bonjour cher ami</i>，在法语中意为“你好，亲爱的朋友”。</p>

浏览器输出

HTML 中的外文文本

  1. 表示用作术语的单词或短语。例如，
<p>单词 <i>the</i>、<i>a</i> 和 <i>an</i> 是冠词。</p>
<p>这是一个<i>成语</i>的例子。</p>

浏览器输出

HTML 中的短语和术语

  1. 表示动植物的科学名称。例如，
<p>奶牛的科学名称是<i>Bos indicus</i>。</p>

浏览器输出

HTML 中的科学名称

  1. 表示某人的思想。例如，
<p>拉姆心想，<i>我能学会编程吗？</i></p>

浏览器输出

HTML 中的思想

HTML <em> 标签与 HTML <i> 标签的区别​

在浏览器上渲染 <i> 和 <em> 标签没有区别。例如，

<p>在任何情况下都不要进入老虎围栏<i>内</i>。</p>
<p>我的老师<em>非常</em>强调学习。</p>

浏览器输出

HTML 中的强调文本

<em> 和 <i> 都会使字体变为斜体。然而，<em> 标签是一个语义标签，表示标签内的文本与周围文本相比被发音时带有强调。屏幕阅读器也会强调 <em> 标签内的文本。而 <i> 标签只是使文本变为斜体。

注意：出于纯粹的样式目的，建议使用 CSS 属性 font-style。

最后于 更新