html中为何经常使用<i>标签来作为小图标呢?

时间: 2017-11-21阅读: 1162标签: 标签

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?  


在语义上<i> 标签显示斜体文本效果,它告诉浏览器将包含其中的文本以斜体字或者倾斜字体显示。从含义上可以看出<i>并不具有icon的语义。所以如果遵循语义最好还是使用<span>,目前3.X的版本里面显示图片由之前的<i>改为了<span>,例如:

<!--在2.X的版本里面的图表组件是-->
<i class="icon-search"></i>
<!--在3.X的版本里面的组建改回了span-->
<span class="glyphicon glyphicon-search"></span>


在一些字体库中通常也是使用i来代表icon的。例如font-awesome字体库中就是使用<i>来显示图标字体的,它的好处是毋庸置疑的:1.矢量(无限缩放、高清)、2.CSS样式(通用、灵活)、3.体积更小(快速)。
<i class="fa fa-spinner fa-spin"></i>


网上还流行一种显示方式:通过<i>标题的伪类来显示图标,配合 ::before 或者::after伪元素实现,因为没有内容,读屏器不会朗读(这样即使有特殊处理也跳过了),机器理解起来应该也没什么影响。使用伪类的好处就是:插入的内容在页面的源码里是不可见的,只能在css里可见



总结:
由于html中标签的现状是: “爱怎么用就怎么用,哪个浏览器也不会难为你”  ,内联元素和块级元素都能通过display相互转换,由此可见标签的灵活性,使用不遵循语义这个问题,主要是因为遵循并没有带来什么实质的好处。所以是否使用<i>标签来作为小图标?就看个人喜好吧。


html 标签优化_如何优化网站HTML标签代码优化

如何优化网站HTML标签代码优化?选用合适的标签、htm5提供了很多类型的input的type类型、使用html5语义化标签等

使用Map标签指定点击区域时的兼容性问题

因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。当然,label和map中的用法也不同,不论如何,引以为戒

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

a标签是我们常用的一个标签之一,这篇文章主要讲解如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。

Html5标签——Html5新增标签的含义和使用

HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似nav和articled等标签,但有一定含义。