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的年代进入到处是div的年代，以至于div被大量的滥用，只要添加一个元素就想都不想加一行div，所形成的页面代码简直无法看出整体框架（父层div子层也还是div），那个时候我们都是通过严格的缩进，再加上在主题框架的div结束标签处加上<!—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>

补充：web前端 , HTML 5 ,