文档章节

会说话的HTML——语义化杂谈

reid3290
 reid3290
发布于 2015/02/10 15:33
字数 1618
阅读 14
收藏 0

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

    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才能实现的显示更多的功能。

1394527913_1436653066_19136_imageAddr


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

1394527956_1436653066_20125_imageAddr


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

HTML5中虽然有prefetch相关的说明,但是各个浏览器的实现并不一样,下面简单说说Chrome的prerender。

在不影响当前页面的前提下,浏览器会自己预加载指定页面(包括页面上的资源),到一个隐藏的tab中,打开指定页面的时候,隐藏tab显示出来。在chrome的任务管理器中可以看到,前面有“预渲染”标识,会消耗内存(正式渲染的50%-)。

1394529235_1436653066_12940_imageAddr


三、Microdata–对搜索引擎说

Microdata不属于HTML5,但依赖于HTML5,属于HTML5的扩展,用于存储机器能够识别的数据。

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

1394529320_1436653066_14610_imageAddr


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 Semantics

W3C HTML5 3.2.4.1.7 Interactive content

HTML Microdata

Embedding custom non-visible data with the data-* attributes


本文转载自:http://blog.jobbole.com/63176/

上一篇: CSS命名规则
下一篇: 标签的语义
reid3290
粉丝 2
博文 64
码字总数 15933
作品 0
闵行
程序员
私信 提问
每日前端进阶第三题:说一说你对HTML5语义化的理解

作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo,怀着学习的心态我也参与其中,...

陈大鱼头
05/22
0
0
南漂一卒/EasyWebUI

EasyWebUI 【概述】 EasyWebUI 是一个普适而轻巧的 HTML/CSS 开发框架 —— 支持 IE 8+ 的 CSS 2/3 国际标准及主流厂商的专用属性(不使用 IE CSS Hack),通用于桌面端、移动端的各种网页、...

南漂一卒
2014/12/09
0
0
从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

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

Daotin
2018/07/24
0
0
最好的CSS方式——OOCSS+ Sass

面向对象的CSS很不错,但是让非语义化的词标识你的类是很不明智的。这些类散布在你的HTML里面等着去做调整,会变得很没意思。但是如果你把OOCSS和Sass结合就让未经渲染的模块化CSS和难以维护...

彭博
2012/11/26
384
0
重学前端学习笔记(四)--div和span不是够用吗?

笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...

凯小默
04/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ContentProvider和数据库的区别

大家好,今天我们来讲解ContentProvider和数据库的区别是他们之间的联系. 四大组件之一 1.ContentProvider是如何实现数据共享的? 1.在Android中,为了把自己程序的数据(一般是数据库)提供给其他...

天王盖地虎626
33分钟前
1
0
前端搜索

思路:使用indexOf或正则表达式

单线程生物
40分钟前
1
0
Navicat Premium 12破解激活

本文转载自:https://www.cnblogs.com/joyny/p/9536006.html 下载Navicat Premium 12并安装; 链接:https://pan.baidu.com/s/1mN-urlh--SX1vbq7hi81Ww 密码:menk 重要提示:该注册机来源于...

Ygam
42分钟前
2
0
ThreadGroup 线程组

在看tomcat源码时,TaskThreadFactory这个线程工厂类中用到ThreadGroup这个类,之前没有用到过,所以就特地查了一下 ThreadGroup这个属于java元老级的类,在java1.0版本中就出现了,里面还有...

二两豆腐
43分钟前
2
0
在 CentOS 或 RHEL 系统上检查可用的安全更新的方法

当你更新系统时,根据你所在公司的安全策略,有时候可能只需要打上与安全相关的补丁。大多数情况下,这应该是出于程序兼容性方面的考量。那该怎样实践呢?有没有办法让 yum 只安装安全补丁呢...

xiangyunyan
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部