<i>标签显示斜体文本效果。
<i>标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。
提示:<i>标签一定要和结束标签 </i>结合起来使用。
注意:由于i同时也是icon的缩写,像bootstrap等一些流行的框架,也经常用<i>标签来存储图标(icon),一般是用css写到<i>标签中
这个不是H5特有的情况,只是设计师习惯性用法,用i表示ico图标,便于他人理解。例子:
<ul><li><i class="ico1"></i>首页</li><li><i class="ico2"></i>关于我们</li></ul><style>
.ico1,.ico2{background:url(test.png) center left no-repeat width:15px height:15px}
</style>
这是一个示例,可以试着先在阿里巴巴图标将图标加入购物车,然后再下载代码,将文件加压后,引入iconfont.css文件,在i标签中class属性名为iconfont,style样式可以自定义图标的大小和颜色,这里“&#xe782”为一个问号的代码。页面显示的为一个红色的问号。i标签做图标的好处就是将图片文字化,还有其他的方法就是通过<i>标题的伪类来显示图标,配合 ::before 或者::after伪元素实现,因为没有内容,读屏器不会朗读(这样即使有特殊处理也跳过了),机器理解起来应该也没什么影响。使用伪类的好处就是:插入的内容在页面的源码里是不可见的,只能在css里可见。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)