html中的ii标记有什么作用

html中的ii标记有什么作用,第1张

<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里可见。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7199323.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存