使用HTML5的语义标签
2011-04-29时候的东西了，今天把它罗过来
看了文章Using HTML5 semantic elements today，做了一点翻译
原文地址：http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+nczonline+%28NCZOnline+-+The+Official+Web+Site+of+Nicholas+C.+Zakas%29&utm_content=Google+Reader
现在使用html5标签对于不同的浏览器大致会遇到三个不同的问题[size=large][/size]：
（1）HTML5标签被认为是错误的，然后被完全忽略，创建DOM的时候就不管HTML5标签
（2）HTML5标签被认为是错误的但是DOM节点也会创建，只是用占位符来表示。比如section也会在DOM中被创建，但是没有任何的样式style
（3）HTML5标签被识别并且创建了DOM节点（在大多数例子中，都被看做是block元素）。
例如：
1 <div class="outer"> 2 <section> 3 <h1>title</h1> 4 <p>text</p> 5 </section> 6 </div>
在浏览器：Firefox 3.6和Safai 4 中认为div有一个不知道的子元素section，section被作为inline元素在dom中创建。h1 和 p元素作为section的子 元素。因为section在DOM中，所以给他定义style是可以的。
在IE中，认为section是错误的，所以section被忽略了，h1和p作为div的子元素。就相当于：
1 <div class="outer"> 2 <h1>title</h1> 3 <p>text</p> 4 </div>
解决的方法大概有三种：
1、JavaScript shims
在IE中，如果是在js中用document.createElement()动态创建元素,浏览器就会认识这个元素并且允许样式。
shims技术就是利用这种方法，在js中创建元素，比如document.createElement("section"),确保HTML5的元素能够被正确的识别。同时，shims技术还设置HTML5的元素的display:block，以确保其他浏览器也能正确的渲染。
原文作者不喜欢这种方式，因为它打破了一个web应用的原则：JavaScript不应用依赖于布局。这个原则主要是为了让web应用的代码能更好的管理。
2、Namaspace hack
IE浏览器的另外一种识别不支持的元素的方法。用XML格式的名称空间，在元素前面带上名称空间的前缀，例如：
1 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"> 2 <body> 3 <html5:section> 4 <!-- content --> 5 </html5:section> 6 </body> 7 </html>
html5这个前缀只是一种，并不是官方的，你也可以采用其他的前缀，比如"foo".
在写样式的时候：
1 html5\:section { 2 display: block; 3 }
这也不是我喜欢的方法，因为我不喜欢在文件中看到满篇的名字空间元素。
3、"Bulletproof" technique
我第一次接触到这种技术是在YUIConf2010上，Tantek Çelik的发言。Tantek建议在html5的块元素里面使用div，然后在div中使用html5元素标签作为class属性。例如：
1 <section><div class="section"> 2 <!-- content --> 3 </div></section>
这种方法确保了文档流能够被正常的渲染。在HTML5的块元素中使用块元素在不同浏览器中的不同解释：
(1)一个简单的块元素（<ie9）
(2)一个位于inline元素中的块元素(ff3.6 safai 4等)
(3)一个位于块元素中的块元素(ie9, ff4,safari 5等)
所有上面的三种情况都会被正常渲染。
Tantek指出的唯一一个例外的情况，就是hgroup,建议的写法是:
1 <div class="hgroup"><hgroup> 2 <!-- content --> 3 </hgroup></div>
样式的写法：
1 .section { 2 color: blue; 3 }
以上三种都不是完美的方法，不过作者还是比较喜欢用bulletproof方法。
