--------引子---------------

家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着“臭爸爸”;你让他把鞋穿上,他会提起鞋子往楼下扔...在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正确表达;同样他也会做一些事情,但不一定按正常大人的逻辑,不能准确接收;符合预期的的交流和沟通成了奢望。因为在他的世界里,一切都处于混沌之中,一切的逻辑、规范都没有完善。

而在HTML的世界里,经历多年的成长,规范已基本成型,不同的HTML标签、属性、属性值都会自己说话、懂得如何去表达,HTML处理器(脚本、浏览器、搜索引擎)也知道如何来接收HTML传递的信息。而如何让这些会说话的HTML精灵施展魔法,去向HTML处理器表达各种意思,带我们进入奇妙之旅,就掌握在我们重构工程师的手中,也就是接下来要说的语义化。

语义化没有一个客观的标准,很多的东西都是个人的主观理解,千人千面(这里是广告)

-------我理解的语义化--------------

HTML中的语义化,即HTML中的每一个标签、属性、属性值,都有其特定含义,所有这些HTML原子组合起来,与开发者、HTML处理器(浏览器、搜索引擎...)进行对话、传递特定的意思(也就是说语义化不是单相思,是2个人的事情,我说的明白不行,还得你听得懂)。

比如,最开始导致互联网兴起是的a标签,她对浏览器说我是一个链接,可以通向另一个页面;浏览器听到了,为她加上对应样式和事件,用户点击时,就可以到另一个页面了;搜索引擎听到了,会去看一下那个页面都有什么东西,同时分析一下你们的关系;于是大家快乐的生活在一起了。

-------HTML5新增标签、属性--------

HTML中的标签、属性、属性值太多了,HTML5出来之后就更多了,下面拿几个出来简单说说,主要关注以下两点:
1、HTML标签、属性、属性值和HTML处理器(浏览器、搜索引擎...)的对话
2、HTML标签、属性、属性值与开发者们的对话

一、互动标签--对浏览器说

HTML5新增了一些互动标签(details+summary,datalist,input[date/range/tel/color]...) 遇到互动类标签,比如details,系统(浏览器)会自动绑定对应的UI界面和事件(Shadow DOM),不需要要任何代码,代码和浏览器直接沟通。

details+summary实现以前我们用js才能实现的显示更多的功能。

input+datalist实现输入框既可输入有课下拉选择。

二、资源预加载--对浏览器说

HTML5中虽然有prefetch相关的说明,但是各个浏览器的实现并不一样,下面简单说说Chrome的prerender
在不影响当前页面的前提下,浏览器会自己预加载指定页面(包括页面上的资源),到一个隐藏的tab中,打开指定页面的时候,隐藏tab显示出来。在chrome的任务管理器中可以看到,前面有“预渲染”标识,会消耗内存(正式渲染的50%-)。

三、Microdata--对搜索引擎说

Microdata不属于HTML5,但依赖于HTML5,属于HTML5的扩展,用于存储机器能够识别的数据。
为了帮助搜索引擎更好的提取网页数据,一些约定的HTML属性和属性值被应用到HTML中,搜索引擎(google)会根据不同属性[值]来提取需要的数据,Microdata就是其中之一(还有Microformats、RDFa等,Microdata有后来居上的趋势)。

itemscope告诉搜索引擎这是一个可用的数据单元
itemtype="http://schema.org/Event"声明这是一个活动,不同数据单元的itemtype不同
itemprop用来描述这个活动的不同属性,不同类型的数据单元,有不同的属性,页面上不需要显示的可用meta标签和content组合实现,具体参看http://schema.org/

四、data-*属性 -- 开发者相关

Microdata用于存储机器能够识别的数据,开发者有时候也需要HTML提供数据,用于页面功能实现、网站插件(应用),而这些数据有不能显示在页面上,于是data-*属性出现在HTML5中。同时这也解决了上面说到的,语义化不提倡使用非规范定义的属性的问题。高级浏览器提供了对应的API支持--dataset,或者直接通过getAttribute获取。

时下流行的很多视差滚动的插件(库),都采用data-*属性来设置各种动画参数(data-ratio、data-vertical-offset...),避免了繁杂的初始化配置,有实现了动画参数和脚本的分离,方便调整和维护,做到WEB标准中的分离思想。

以上种种,只需要在页面上加上简单的HTML标签或属性[值]即可,简单,但需要考虑兼容性can i use / ppk)。

五、语义化促进开发者之间的交流

体现在代码的维护、团队协作:项目中使用语义化的标签、属性、属性值,可以被团队的协作者、或者一段时间之后的自己,更好的理解和维护。这一点比较主观,因人而异,每个人都有自己的独到见解。

但是,使用ol来展示一个有序列表,和使用br或者p加上数字,前者显然更容易被人理解,也方便后期维护;data-video-id="i0122nckvt0"比vid="i0122nckvt0"更能体现这个属性的含义,而且在后期获取属性数据的时候,也会更加方便;class="news_list"比class="list_01"更容易被解读,而且这个class也不会被用到其他外观类似的模块,减少后期维护带来的各种混乱。(好吧,说了这么些不就是个class的命名问题吗,microformats都出来了7年了)。

总结

语义化并不是HTML单方面的事情,需要有懂她的对象;
互动标签可以代替脚本做一些事情;
prefetch让浏览器自己去优化页面性能;
data-*为脚本(插件)提取HTML数据提供了新的途径;
良好的语义化让开发者事半功倍。

PS:语义化同时需要跳过一些坑,W3C在HTML5草案提到:标签、属性、属性值有他们特定的含义,不能用错了地方(比如暴露年龄的表格布局),这样做会影响HTML处理器正确处理页面;也不能随便用规范中没有定义的标签、属性(可用data-*)、属性值,这样做将影响HTML将来的扩展(比如上面提到的Microdata)。

--------参考-------------------------

W3C HTML5 3.2.1 SemanticsW3C HTML5 3.2.4.1.7 Interactive contentHTML MicrodataEmbedding custom non-visible data with the data-* attributes

腾讯TGideas语义化标签(转)的更多相关文章

  1. 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  3. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  4. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  5. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  6. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  7. Html5新增的语义化标签(部分)

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  8. html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  9. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

随机推荐

  1. zk 节点故障 重连机制

    <pre name="code" class="html">如果在连接时候zk服务器宕机 To create a client session th ...

  2. Java实现验证码图片

    这样的实现方式对JDK版本有要求. 1 package edu.cloud.editmap.utils; import java.awt.Color; import java.awt.Font; im ...

  3. StarTeam SDK 13 下载安装

    SDK 13据称兼容 StarTeam 11. 下载地址是:ftp://us.ftp.microfocus.com/Starteam/st-sdk-13.0-readme.htm Java用户可以选在 ...

  4. FPGA开发(2)

    1. 通常SPI通信的验证流程: 2. 对于主机而言,这里的FPGA为从机,而我们最关心SPI_CS,SPI_CSK,SPI_MISI这三个信号.SPI_CS为片选使能端,片选有效时FPGA才可以接受 ...

  5. ES6第一篇

    //新的数字方面的方法 const I = 3.4893589; console.log(Number.parseInt(I)); console.log(Number.parseFloat(I)); ...

  6. jquery 自动调整图片大小

    <script type="text/javascript"> $(document).ready(function(){ $('#cons img').each(fu ...

  7. poj3122--二分加贪心

    大致题意: 就是公平地分披萨pie 我生日,买了n个pie,找来f个朋友,那么总人数共f+1人 每个pie都是高为1的圆柱体,输入这n个pie的每一个尺寸(半径),如果要公平地把pie分给每一个人(就 ...

  8. C语言队列的实现

    队列是常用的数据结构之一,下面给出一个链式队列的实现: 头文件Queue.h #ifndef Queue_H #define Queue_H typedef int Item; typedef str ...

  9. tomcat 设置session 时间

    Tomcat  Session过期时间 Tomcat采用数据库连接池技术,当用户在一定时间不对数据库有操作时间后,就自动关闭这个连接,这是为了更好的利用资源,防止浪费宝贵的数据库连接资源. 可以采用如 ...

  10. 转:JS在文本域鼠标指定位置插入文本-柯乐义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...