前言

最近在读HTML5秘籍(the missing manual)，书中对HTML5的定义和理解是：HTML5实际上是一组独立标准的集合。有些标准已经得到了支持，而另外一些标准几年内(甚至永远)不会得到支持，即HTML5在某些浏览器的某些版本中能够运行。HTML5作为新一代web的开发标准，相信有不少开发者已经垂涎它各种具有革命性的新功能，诸如：语义化的标签和元素、新增表单控件、化繁为简的富媒体支持、神奇的本地数据存储技术、强大的绘图技术(canvas)以及离线、地理定位等。本文讨论的只是如何利用html5的各种明确的语义化标签来构建我们的页面。

关于DOCTYPE

 在HTML5来临之前，一个标准的XHTML头部代码应该是这样的：

这么复杂的一大推代码相信很少人会去手写，也没有必要去记住。（小弟不才，在HTML5没来到之前都是直接打开 DW，现在是用sublime text2自动生成的，O(∩_∩)O~）

而一个标准的HTML5头部是这样的：

哪个更简单些就不用我来说了，笨拙的我都能轻易记住了，这HTML5呀，果然是好东西啊。但是好使的东西总是需要付出点代价的(╯﹏╰），显然是浏览器的兼容性问题，主要是微软的 IE6、IE7、IE8 ，还有可能就是一些非主流浏览器和一些基于IE内核的浏览器。综合考虑多方面因素，我们还是选择HTML5，因为这个能省去100多字节（对于PV是百万级以上的站点，能省下不少的流量呢）的头部已经可以完美兼容了。大家都可能知道，在页面没有定义DOCTYPE的情况下或者因为一些字符使得DOCTYPE失效的情况下，会触发各种怪异现象诸如盒模型不正确，js捕获数据怪异等，而只要定义了浏览器就可以在标准模式下解析页面，而不需要指定某个类型的DTD了。

丰富明确的语义化标签

语义化编码是每个从事前端开发人员都需具备的技能，但随着web技术的发展和各种新技术、新思想的产生，原有的XHTML那具有语义化的标签已经有点力不从心了。而HTML5就为我们提供了一系列新的标签和属性，让我们在维护和修改页面时不需面对嵌套N层、令人烦心的div了，并且使用这些新元素能让任何人无障碍地访问网页，更利于搜索引擎，下面举个例子说明下：

而运用HTML5可以这样写：

另外语义化标签如：aside、figure、figcaption、hgroup、nav的运用，适用场合呢，我在这里就不一一列举了，有兴趣的童鞋可以 点击这里，上面对于html各个标签的讲解还是蛮到位的。

HTML5标签的向前兼容

有很多人在运用 HTML5标签搭建新页面的时候发现一个问题， 就是这些用起来感觉很好很爽的标签在IE8以及以下版本的浏览器都不生效，加了样式也是徒劳无益的，全部整齐地属于inline行内元素，于是乎，有人就觉得，在IE8还没被淘汰之前，HTML5在web应用上只是一个空想(include me)。不过，事实告诉我们，成功有时候需要借助外力，呵呵，又开始文绉绉了~

想让HTML5向前兼容我们需要一段小小的JS函数来协助：

上面代码的作用就是创建一系列标签，使IE8及以下的浏览器都能识别。

然后就是给这些标签一个css来初始化，由于IE8及以下浏览器对这些新标签没有提供默认样式，所以他们都被解析为行内元素，因此我们需要在css初始化文件里添加以下代码来使其变成块级元素：

这样的话我们在实际开发中就能运用HTML5了，不过在实际项目中我们一般会将js部分的那段初始化代码封装到一个js文件如resetHTML5_forIE.js，然后在header部分使用IE条件注释针对IE进行调用: