HTML5 学习小结
HTML5 小结
使用HTML5也是断断续续的有些历史了，但是没有系统的总结过，最近发现公司的图书馆有不少藏书，就借了一本HTML5+CSS3的快速阅读了一下，重温了一些知识，顺便做一下小结：
HTML5特性
相对于传统网页技术来说，首先我们得明白为什么HTML5会出现。它带来的改变和规范并不是一点小改动而已，在网页技术的方方面面，甚至前端后端都有深远的影响。比如：描述性更强的新标签，增强多媒体支持，更强大的前端Web API接口，完善的本地存储机制，配合CSS3的更精美的界面设计，可访问性的提升……这些都是HTML5规范所带来的变化，虽然还不是所有规范都被浏览器厂商支持，但它所考虑的方方面面，都正在被实现和加强中。笔者不想像传统教材那样分类解释罗列，而是就自己所使用的和想尝试着去使用的一些部分，做一些实用性小结。
文档类型
HTML5开发的网页文档类型极其简单，<!DOCTYPE html>就够了，记得5年前还在反复跟团队强调使用XHTML那段冗长的文档类型声明（现在已经完全不需要）：
[html]
<SPAN style="FONT-FAMILY: Microsoft YaHei"><!DOCTYPEhtml PUBLIC “-//W3C/DTD XHTML 1.0 Transitional//EN“
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”></SPAN>
<!DOCTYPEhtml PUBLIC “-//W3C/DTD XHTML 1.0 Transitional//EN“
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
文档类型有两个作用：1、验证器依据它来判断应该采用何种规则来验证代码。2、文档类型声明能强制要求IE6/7/8等以“标准模式“来渲染页面，在开发跨浏览器支持的时候尤为重要。
新标签
传统网页开发从到处是table的年代进入到处是p的年代，以至于p被大量的滥用，只要添加一个元素就想都不想加一行p，所形成的页面代码简直无法看出整体框架（父层p子层也还是p），那个时候我们都是通过严格的缩进，再加上在主题框架的p结束标签处加上<!—end of xxxDiv --> 这样的注释才能方便查找。
当HTML5规范出现之后，它直接重新设计了定义整个网页框架的许多新标签，例如头部用<header>，导航用<nav>，逻辑区域用<section>，完整的一块内容用<article>，旁白用<aside>，页脚用<footer>它们之间没有什么严格的父子联系，在一块逻辑区域<section>的内部如果还设计有导航也可以再嵌套<header>、<nav>等。当为了兼容某些还不支持HTML5的旧浏览器的时候，可以添加如下的JS代码预定义这些新增标签：
[html]
<SPAN style="FONT-FAMILY: Microsoft YaHei"><!—[if lt IE9]>
<script type=“text/javascript“>
document.createElement(‘nav’);
document.createElement(‘footer’);
document.createElement(‘header’)
….
</script>
<![endif]--></SPAN>
<!—[if lt IE9]>
<script type=“text/javascript“>
document.createElement(‘nav’);
document.createElement(‘footer’);
document.createElement(‘header’)
….
</script>
<![endif]-->
Note:值得一提的是<aside>并不应该被用来做侧边栏，而是被设计用来展示与文章和<section>内容相关的部分，当要使用到侧边栏的时候可以再单独增加一个<section>。
自定义属性
当我们使用Bootstrap这种框架的时候，经常看到为了构建一个标准控件，在html元素代码中添加一些属性，并且都以data-开头，例如下一段代码使用了Bootstrap的popover动态的在图片上添加冒泡说明：
[html]
<SPAN style="FONT-FAMILY: Microsoft YaHei"><img src="img/date.png" id="dateImg" rel="popover"data-trigger='hover' data-placement="right" data-content="转换数据库存储的long整数日期为可阅读格式，并可反转YYYY-MM-DD格式的日期为long整数" data-title="Date转换器"/></SPAN>
<img src="img/date.png" id="dateImg" rel="popover"data-trigger='hover' data-placement="right" data-content="转换数据库存储的long整数日期为可阅读格式，并可反转YYYY-MM-DD格式的日期为long整数" data-title="Date转换器"/>
这些以data-开头的自定义属性，也是HTML5所提倡的，因为它可以被JS很方便的读取例如jQuery的attr方法等。更加精简的提供了一种内容展示数据包含在html中，逻辑特效等由JS+CSS来负责的解耦和思路。
更强大的表单元素
经常在前端开发表单的时候，被各种非原生的控件所折磨，例如日历、滑块、自填充搜索、特点范围数字、IP地址输入、URL/Email输入框等。这些带一定规则的控件，在传统方式下都必须由前端人员自行开发或者使用成型的JS库才能支持。
HTML5认为这些控件越来越常用，所以索性就增加了这些新的控件类型：
[html]
<SPAN style="FONT-FAMILY: Microsoft YaHei"><input type=”email”>
<input type=”number”>
<input type=”tel”>
<input type=”search”>
<input type=”date”>
<input type=”datetime”>
….</SPAN>
<input type=”email”>
<input type=”number”>
<input type=”tel”>
<input type=”search”>
<input type=”date”>
<input type=”datetime”>
….
比较欣慰的是，不需要害怕它们在不支持HTML5的旧浏览器上会给开发造成麻烦，因为浏览器识别这些类型失败的时候，会自动默认的使用text类型，所以本质上完全可以向前兼容。
配合出现的CSS3特性
当HTML本身在进化的时候，CSS也在进化，随着HTML5的日益流行，CSS3与之配合的特性也越来越被广泛使用，许多时候甚至前端开发人员一直在使用(copy来的特效代码却从未察觉到)，例如：
使用tr:nth-of-type(even)和tr:nth-of-type(odd)来将表格按奇数行、偶数行条纹化，已经很常见；
使用td:nth-child(n+2)或者tr:nth-child(2n+4)来全局控制部分单元格的对其方式也很好用；
使用p:last-child{border-bottom: 1px solid gray}来给段落结束之后加上一行分割线
使用兼容不同浏览器的圆角样式：
[css]
<SPAN style="FONT-FAMILY: Microsoft YaHei">border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;padding:8px;</SPAN>
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;padding:8px;
使用兼容不同浏览器的链接渐变效果：
[css]
<SPAN style="FONT-FAMILY: Microsoft YaHei">-webkit-transition:color 0.5s;
-moz-transition:color 0.5s;
-o-transition:color 0.5s; transition: color 0.5s;</SPAN>
-webkit-transition:color 0.5s;
-moz-transition:color 0.5s;
-o-transition:color 0.5s; transition: color 0.5s;使用@font-face（实际Css2就已经引入），让Web服务器获得一种方式可以向浏览器终端传输制作好的字体文件，从而使得前端呈现出各式各样好看的字体效果
更典型的如使用:after和:before选择器来遍历一些元素统一加上特定的附属样式，再通过first-child和last-child来修正，这种方式在国外的网站特别是导航设计中经常被用，把原本由Js或者冗长的Html所实现的效果，借助CSS3的高级选择器简单的就给替代了。
可访问性WIA-ARIA规范
WIA-ARIA是富因特网应用的可访问性规范，HTML5规范定义每一个元素都支持WIA ARIA标志角色。笔者曾经下载过一些国外优秀HTML5网页作品时就经常见到在一些网页元素上都带有role属性，后来才知道这个角色属性是专门提供给屏幕阅读器阅读所使用的，当具有不同的role属性时，屏幕阅读器可以不必自上而下的阅读，而是*的更具role属性来挑选障碍人士最需要知道的部分阅读。
媒体查询-响应式布局
现在移动终端屏幕尺寸前期八怪，能上网的设备就能访问网页，本来设计好的布局如果要根据不同访问设备的尺寸来自适应呈现，就需要借助HTML5的媒体查询特性：
[css]
<SPAN style="FONT-FAMILY: Microsoft YaHei">@media only screen and (max-device-width: 480px)
body{…}</SPAN>
@media only screen and (max-device-width: 480px)
body{…}当终端访问网页，媒体查询到终端设备分辨率尺寸信息的时候，后面的Css定制就会被触发。
同样也可以在Css声明的时候使用媒体查询的特性：
[html]
<SPAN style="FONT-FAMILY: Microsoft YaHei"><linkrellinkrel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:960px)”></SPAN>
<linkrel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:960px)”>在媒体查询这个特性出来之后，逐渐形成了一个概念叫响应式布局（Ethan Marcotte在2010年5月份提出），其原理也是充分使用了媒体查询，获取访问终端的各种型号数据，然后提供不同的Css样式来以最佳的方式将网页呈现在不同类型的联网设备上。
越来越多的前端框架、插件也开始支持响应式布局，帮助尽量少的增加人工编码利用插件框架自动根据媒体查询的结果来调整样式。其实这里也想再次强调前端开发在设计开发网页的时候，Html元素和Css样式尽量隔离的重要性。
富客户端API
笔者曾经使用过一段时间的WebSocket，简洁而实用的浏览器与后端实时交互新的协议。建立连接之后前后端都可以通过onMessage来监听互相发过来的消息，这让笔者感觉在Js中开发逻辑代码跟后端开发完全相同的感觉，都是onMessage分发消息，辨别类型，交给不同的handler，处理不同的逻辑。对于前端来说不同的handler与页面不同模块的元素打交道，对于后端来说不同handler与数据库或者不同的业务层模块打交道，整个Web应用开发显得更加清晰明了。
更重要的是WebSocket使得服务端向浏览器的主动推送变为可能，这无形中可以增加许多美好设计的可能。悲催的是笔者当初使用的时候，遇到许多浏览器都不支持WebSocket，最近听说最方便的一种兼容方式是在不支持WebSocket的浏览器上，借助Flash套接字来实现实时通信。可以参考web-socket.js库： 在使用的时候除了引入Js文件还需要制定一个WebSocketMain文件路径只想WebSocketMain.swf，这样实时通信即使在不支持WebSocket的浏览器上也可以由Flash套接字代替完成，不影响其他任何代码。
除了WebSocket，HTML5规范还设计了许多数据存储的方式，其缘由是分担服务器计算资源到浏览器端，并且提供更好的实时体验：
LocalStorage– 以key/value格式存储，与某个域绑定，数据可跨浏览器会话保存
SessionStorage– 以key/value格式存储，与某个域绑定，数据在会话结束时被清楚
WebSQL Database – 完整的关系型数据库，支持通过事务进行表格的CRUD
OfflineWeb Applications – 定义缓存文件为了方便在脱离互联网环境下可以继续使用Web应用
大概就总结到这里了，其他HTML5特性例如Canvas、视频、音频等也很强大，但笔者使用和接触得不多。等以后有机会用到再谈吧。
上一篇： WebSocket在ASP.NET MVC4中的简单实现
下一篇： 内容营销十大趋势