HTML5语义化标签的应用
前言
最近在读HTML5秘籍(the missing manual)，书中对HTML5的定义和理解是：HTML5实际上是一组独立标准的集合。有些标准已经得到了支持，而另外一些标准几年内(甚至永远)不会得到支持，即HTML5在某些浏览器的某些版本中能够运行。HTML5作为新一代web的开发标准，相信有不少开发者已经垂涎它各种具有革命性的新功能，诸如：语义化的标签和元素、新增表单控件、化繁为简的富媒体支持、神奇的本地数据存储技术、强大的绘图技术(canvas)以及离线、地理定位等。本文讨论的只是如何利用html5的各种明确的语义化标签来构建我们的页面。
关于DOCTYPE
在HTML5来临之前，一个标准的XHTML头部代码应该是这样的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> ......
这么复杂的一大推代码相信很少人会去手写，也没有必要去记住。（小弟不才，在HTML5没来到之前都是直接打开 DW，现在是用sublime text2自动生成的，O(∩_∩)O~）
而一个标准的HTML5头部是这样的：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> .......
哪个更简单些就不用我来说了，笨拙的我都能轻易记住了，这HTML5呀，果然是好东西啊。但是好使的东西总是需要付出点代价的(╯﹏╰），显然是浏览器的兼容性问题，主要是微软的 IE6、IE7、IE8 ，还有可能就是一些非主流浏览器和一些基于IE内核的浏览器。综合考虑多方面因素，我们还是选择HTML5，因为这个能省去100多字节（对于PV是百万级以上的站点，能省下不少的流量呢）的头部已经可以完美兼容了。大家都可能知道，在页面没有定义DOCTYPE的情况下或者因为一些字符使得DOCTYPE失效的情况下，会触发各种怪异现象诸如盒模型不正确，js捕获数据怪异等，而只要定义了浏览器就可以在标准模式下解析页面，而不需要指定某个类型的DTD了。
丰富明确的语义化标签
语义化编码是每个从事前端开发人员都需具备的技能，但随着web技术的发展和各种新技术、新思想的产生，原有的XHTML那具有语义化的标签已经有点力不从心了。而HTML5就为我们提供了一系列新的标签和属性，让我们在维护和修改页面时不需面对嵌套N层、令人烦心的div了，并且使用这些新元素能让任何人无障碍地访问网页，更利于搜索引擎，下面举个例子说明下：
<div class="article"> <div class="header"> <h1>我是文章标题</h1> <div class="tool"> <a class="javascript:;">按钮一</a> <a class="javascript:;">按钮二</a> </div> </div> <div class="main"> <p>我是文章正文</p> </div> <div class="guidance">我是文章导读</div> </div>
而运用HTML5可以这样写：
<section class="article"> <header class="header"> <h1>我是文章标题</h1> <section class="tool"> <a class="javascript:;">按钮一</a> <a class="javascript:;">按钮二</a> </section> </header> <article class="main"> <p>我是文章正文</p> </article> <footer class="guidance">我是文章导读</footer> </section>
另外语义化标签如：aside、figure、figcaption、hgroup、nav的运用，适用场合呢，我在这里就不一一列举了，有兴趣的童鞋可以 点击这里，上面对于html各个标签的讲解还是蛮到位的。
HTML5标签的向前兼容
有很多人在运用 HTML5标签搭建新页面的时候发现一个问题， 就是这些用起来感觉很好很爽的标签在IE8以及以下版本的浏览器都不生效，加了样式也是徒劳无益的，全部整齐地属于inline行内元素，于是乎，有人就觉得，在IE8还没被淘汰之前，HTML5在web应用上只是一个空想(include me)。不过，事实告诉我们，成功有时候需要借助外力，呵呵，又开始文绉绉了~
想让HTML5向前兼容我们需要一段小小的JS函数来协助：
<script type="javascript"> document.createElement("article"); document.createElement("aside"); document.createElement("footer"); document.createElement("header"); document.createElement("nav"); document.createElement("section"); document.createElement("details"); document.createElement("dialog"); document.createElement("output"); document.createElement("time"); ... </script>
上面代码的作用就是创建一系列标签，使IE8及以下的浏览器都能识别。
然后就是给这些标签一个css来初始化，由于IE8及以下浏览器对这些新标签没有提供默认样式，所以他们都被解析为行内元素，因此我们需要在css初始化文件里添加以下代码来使其变成块级元素：
article,aside,footer,header,nav,section,hgroup{ display:block;} details,dialog,output,time{ display:inline;}
这样的话我们在实际开发中就能运用HTML5了，不过在实际项目中我们一般会将js部分的那段初始化代码封装到一个js文件如resetHTML5_forIE.js，然后在header部分使用IE条件注释针对IE进行调用:
<!--[if lte IE8]> <script type="text/javascript" src="js/resetHTML5_forIE.js"></script> <![endif]-->
结语
由于小弟才刚接触HTML5，很多东西都是一笔带过的，好像记流水账似的^_^，讲不清、说不准的还望各位前辈指正。哎呀，又到点吃饭了......(⊙o⊙)，ps：貌似下午又没上课，逃课成指数递增了。
