html中为何经常使用<i>标签来作为小图标呢?入门攻略_图标小白常识

很多网站都是习惯使用来代表小图标?而实际上用 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗? 在语义上 标签显示斜体文本效果,它告诉浏览器将包含其中的文本以斜体字或者倾斜字体显示。从含义上可以看出并不具

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

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

html中为何经常使用<i>标签来作为小图标呢?入门攻略_图标小白常识

在语义上<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>标签来作为小图标?就看个人喜好吧。

海计划公众号
(0)
上一篇 2020/04/06 04:08
下一篇 2020/04/06 04:08

您可能感兴趣的内容

  • 程序员电影,荧屏里的程序员形象小白攻略_程序员入门基础知识

    大量的计算机编程中涉及到的概念都被运用到了电影里。有些概念出现在电影里后变得如此之酷,甚至反过来能帮助我们程序员更好的理解这些概念。今天就来给大家推荐一下荧屏里的程序员形象,感受一下戏里的程序员有多高能吧!我的美女老板 一个常常失业游戏程序员和富二代的恋情,出身草根的小程序员王宇(齐奎饰),默默承担着供妹妹读大学和贴补家用的重担,事业和爱情都一无起色。一场

    2020/03/30
  • 使用jquery封装的动画脚本(无动画、css3动画、js动画)基础入门_动画小白指南

    使用jquery封装的动画脚本(无动画、css3动画、js动画)基础入门 自己封装好的showhide.js包含无动画、css3动画、js动画。 包括:fade(淡入淡出)&nbs…

    2020/03/20
  • Swipebox指南教程_可触摸的 jQuery 灯箱效果插件

    Swipebox指南教程 官方网址:http://brutaldesign.github.io/swipebox/ GitHub:https://github.com/brutal…

    2020/03/06
  • vue项目接入mock&& axios 通用配置使用教程_接口基础入门

    前言兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 FE 可以按照预定的接口文档做一些接口模拟的工作,等等后端小伙伴开发完接口后我们只需要替换一个接口基地址即可…初始准备这里已 vue 项目为例, 所需模块:mockjs, express; 直接 npm 进行安装即可

    2020/03/26
  • Yslow小白常识一款很实用的web性能测试插件

    Yslow基础入门 官方网址:http://developer.yahoo.com/yslow/ 简介描述:一款很实用的web性能测试插件 YSlow是Yahoo发布的一款基于Fi…

    2020/03/05
  • Shapes4free入门百科_提供了免费的photoshop自定义形状、图标

    Shapes4free入门百科 官方网址:http://www.shapes4free.com/ 简介描述:提供了免费的photoshop自定义形状、图标 1500+ Photos…

    2020/03/06
  • 从js讲解时间复杂度和空间复杂度基础入门_算法小白指南

    1. 博客背景今天有同事在检查代码的时候,由于函数写的性能不是很好,被打回去重构了,细思极恐,今天和大家分享一篇用js讲解的时间复杂度和空间复杂度的博客2. 复杂度的表示方式之前有看过的,你可能会看到这么一串东西T(n) = O(f(n))
    S(n) = O(f(n))
    这个叫做大O表示法,其中的T代表的是算法需要执行的总时间S表示的算法需要的总空间f(

    2020/03/29
  • TypeScript中的React Render Props基础教程_TypeScript入门基础

    和之前的文章一样,本文也要求你对render props有一些知识背景,如果没有官方文档可能会对你有很大的帮助。本文将会使用函数作为children的render props模式以及结合React的context API来作为例子。如果你想使用类似于render这样子的render props,那也只需要把下面例子的children作为你要渲染的props即

    2020/03/30
  • Theia指南教程_采用TypeScript实现的云和桌面IDE框架

    Theia指南教程 官方网址:http://theia-ide.org GitHub:https://github.com/theia-ide/theia 简介描述:采用TypeS…

    2020/03/07
  • vue自定义指令:防抖与节流使用攻略_指令小白攻略

    防抖解释:触发事件后,一段时间内没有再次触发则执行,若此时间段内再次触发重新延时!v-antiShake// 实现Vue.directive(‘antiShake’, {// 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。/*** el 指令所绑定的元素,可以用来直接操作 DOM 。* binding 一个对象,包含绑定的值*/i

    2020/03/24
  • 解码 PNG 图片使用帮助_图片小白攻略

    解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 , ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。ImageData 是一个包括了像素数据、图片宽高数据的对象。示例图片:point_up_2: 这是一张我们接下去要解

    2020/03/23
  • 源码之家小白入门_网站源码下载,比较齐全!

    源码之家使用指南 官方网址:http://www.mycodes.net/ 简介描述:网站源码下载,比较齐全! 源码之家,提供最新免费网站源码下载,配有前台及后台管理界面演示图,绿…

    2020/03/06
  • Savieo菜鸟指南_万能影片视频下载器

    Savieo菜鸟指南 官方网址:https://savieo.com/ 简介描述:万能影片视频下载器 Savieo一个号称可以下载全世界34个影片来源的视频嗅探下载器,包含YouT…

    2020/03/10
  • 如何修复 WordPress 中的 HTTP 错误小白常识_WordPress小白攻略

    如何修复我们会向你介绍,如何在 Linux VPS 上修复 WordPress 中的 HTTP 错误。 下面列出了 WordPress 用户遇到的最常见的 HTTP 错误,我们的建议侧重于如何发现错误原因以及解决方法。1、 修复在上传图像时出现的 HTTP 错误如果你在基于 WordPress 的网页中上传图像时出现错误,这也许是因为服务器上 PHP 的配置

    2020/04/05
  • vue中的事件修饰符(.stop、.prevent、.self、.capture、.once)基础入门_事件使用帮助

    摘要使用.stop阻止事件的冒泡行为。使用.prevent阻止事件的默认行为。使用.self实现只有点击当前元素才会触发事件处理函数。使用.capture实现捕获触发事件的机制,即从外部事件开始执行。使用.once实现事件的触发次数为一次。需要特别注意.stop和.self的区别:.stop是阻止除了自己之外所有的冒泡事件,而.self是控制自己被点击才会触

    2020/03/29
  • JS多态封装继承小白知识_封装小白常识

    前言JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承三个基本特征来理解JS的面向对象思想多态含义同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果,也就是说,给不同的对象发送同一个消息时,这些对

    2020/03/23