<i>、<em>和<cite>是HTML中格式化斜体文本的最基本元素。在浏览器中都会以斜体字体显示,但是别的设备可能会用不同的方式表示强调。这三组标签在实现方式上都是一样的,但使用的意义不同。

提示:除了可以使用 HTML 中 <i>< em> 或 <cite>元素,还可以通过 CSS 样式 { font-style: italic }

HTML <i>斜体

<i>标签告诉浏览器将包含其中的文本以(italic)斜体字显示。

<i>语法结构:

<i>斜体文本</i>

提示:i是英文italic(斜体)的缩写。i元素是为了斜体而斜体,不带感情色彩。

HTML <em>斜体

<em>标签中的文本表示为强调的内容。Web浏览器往往将<em>和</em>之间的内容显示为斜体,但是其他的设备可能会用不同的方式表现强调。例如:供有视力障碍的人使用的屏幕阅读容积会用一种不同的声调大声的读出 em 元素的内容。

<em>语法结构:

<em>斜体文本</em>

提示:em是英文emphasize(强调)的缩写。em元素的语义性更强烈,对于搜索引擎的蜘蛛爬取来说会更友好,能让它知道你这里面的内容的语义效果。

HTML <cite>引用标签

cite元素是对某一资源的引用。这个资源可以是人,可以是书、歌曲、影片的标题,还可以是报纸、杂志或是网站的名称。它常用于定义引文的来源

<cite>语法结构:

<cite>斜体文本</cite>

提示:cite是英文citation(引用)的缩写。

代码实例:

<!DOCTYPE html>
<html>
<head>
<title>HTML <i>、<em>和<cite>实例</title>
</head>
<body>
正常文本<br/>
<i>i元素斜体</i><br/>
<em>em元素斜体</em><br/>
<cite>cite元素斜体</cite>
</body>
</html>

运行效果:

HTML斜体标签

提示:从上面的实例演示中,我们可以看出 HTML <i>标签、<em>标签与 <cite>标签显示效果是一样的,两者都将内容文本以斜体方式显示,但是在使用的意义上有不同之处。

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

HTML 标签 <i> 英文全称是 italic ,意思是斜体,它是一个单纯的样式标签(物理标记),指定文本要用斜体。<em>英文全称是 emphasize ,意思是强调,它是一个带有强调意味的标签(逻辑标记),浏览器通常也把它显示为斜体。<cite>英文全称是 citation ,意思是引用,它是定义引用。

i、em与cite语法区别

<i>...</i>
<em>...</em>
<cite>...</cite>

i、em与cite意义区别

<i>为了斜体而斜体,<em>为了强调而斜体,<cite>为了引用而斜体。

i、em与cite优化方面区别

从网站SEO优化方面分析,它们最主要的区别应该是<em>...</em>标签内的内容比<i>...</i>标签内的内容应该对于搜索引擎的蜘蛛爬取来说会更友好,而<cite>...</cite>常用于引文的应用,告诉搜索引擎引用来源。

提示:物理元素所强调的是一种物理行为,比如说把一段文字用i元素包裹,意思是告诉浏览器用斜体方式显示该文字,所以这个 i 标签就只倾斜文本,没有任何其它的作用。 而em(emphasize)从字面理解就是强调的意思,所以该标记向浏览器或搜索引擎强调某段文字的消息,是强调文档逻辑,是为了强调某种重要意义而以特殊样式显示,也就是逻辑元素。 同样,b是bold(粗体),而strong是strong(强大、重要)。