html5怎么用 i标签做小图标

html-css017

html5怎么用 i标签做小图标,第1张

这是一个示例,可以试着先在阿里巴巴图标将图标加入购物车,然后再下载代码,将文件加压后,引入iconfont.css文件,在i标签中class属性名为iconfont,style样式可以自定义图标的大小和颜色,这里“&#xe782”为一个问号的代码。页面显示的为一个红色的问号。i标签做图标的好处就是将图片文字化,还有其他的方法就是通过<i>标题的伪类来显示图标,配合 ::before 或者::after伪元素实现,因为没有内容,读屏器不会朗读(这样即使有特殊处理也跳过了),机器理解起来应该也没什么影响。使用伪类的好处就是:插入的内容在页面的源码里是不可见的,只能在css里可见。

这个不是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>

应该说,在默认的 HTML 样式表定义中,b 和 strong 的样式一样,为 { font-weight: bolder };而 em 的默认样式为 { font-style: italic },与 i 相同。

在 HTML 4 中,em 表示 emphasized text,strong 表示 strong emphasized text,故 strong 的强度要更强。而在 HTML 5 中,strong 的定义改成了important text。当然 emphasized 和 strong emphasized乃至 important 之间怎么界定很模糊,关键是在自己编写HTML代码的时候保持使用上一致。

b和i仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」。