html斜体标签<i>标签用法详解

作者:前端大神~ | 时间:2019-01-19

html <i>标签用来定义斜体,还可以用i标签做小图标,下面我们就对这两种用法详细介绍下。

定义和用法

html <i>标签用来定义斜体,被<i>标签包含的文本呈现为斜体文本。

它是一个短语标签

其它短语标签有:

<em> (被强调的文本)

<strong> (重要的文本)

<mark> (被标记的/高亮显示的文本)

<cite> (作品的标题)

<dfn> (一个定义项目)

提示:<i> 标签一定要和结束标签 </i> 一起使用。

示例代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案(www.woyoudaan.cn)</title> 
</head>
<body>

<p>html 标签用来定义    <i>斜体斜体斜体斜体斜体</i>,还可以用i标签做小图标</p>

</body>
</html>

显示效果:

html斜体标签<i>标签用法详解

浏览器支持

目前市面上所有的浏览器都支持html i标签

i标签做小图标

在页面上显示一些小图标的。这些小图标是怎么做的?很多时候我们可以用i标签来呈现的。

下面我通过一个实例代码给大家演示下。

首先我们写一个html代码

html斜体标签<i>标签用法详解

接下来通过.icon来定义样式

display样式为block,或inline-block,这样才能设置宽高

background-image用来设置背景图

background-size 用来设置图片的大小

background-repeat 防止图片重复出现

.icon{
	display:inline-block;
	width:100px;
	height:100px;
	background-image:url(imgages/a.ico);
	background-position:center center;
	background-size:60px 60px;
	background-repeat:no-repeat;
}

上面就是html <i>标签的基本用法和i标签做小图标的用法了,希望通过本文的讲解,大家能够掌握它的用法。