HTML i 标签 - 绿叶网

HTML i 语法

在 HTML 中，i 标签用于实现文本的斜体效果，使其在视觉上更加突出。

语法：

<i>斜体文本</i>

说明：

i 和 em 这 2 个标签都可以用于实现文本斜体，但它们却有着本质上的区别。

i：它是一个无语义标签，并不会搜索引擎赋予权重。
em：它是一个语义化标签，并且会被搜索引擎赋予一定的权重。

在实际开发中，如果纯粹想表示文本的斜体效果，建议使用 CSS 的 font-style 属性来实现。对于 i 标签，它更多是用于定义 iconfont 字体图标，比如：

<i class="iconfont icon-arrow"></i>

提示: i 是 “italic（斜体）” 的缩写。

HTML i 摘要

属于	HTML 斜体
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML i 示例

接下来，我们通过几个简单的例子来讲解一下 HTML i 标签是如何使用的。

示例 1：i 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div><i>绿叶网</i> - 为好教程，全力以赴</div>
</body>
</html>

页面效果如下图所示。

HTML i标签示例

分析：

i 是一个无语义标签，如果你只是单纯想要实现斜体效果，应该使用 CSS 的 font-style: italic; 来实现，请看下面例子。

示例 2：使用 CSS 实现 i 标签的效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        span { font-style: italic; }
    </style>
</head>
<body>
    <div><span>绿叶网</span> - 为好教程，全力以赴</div>
</body>
</html>

页面效果如下图所示。

CSS实现i标签的效果