施用HTML5的语义标签

2012-10-07

使用HTML5的语义标签看了文章Using HTML5 semantic elements today，做了一点翻译原文地址：http://www.nczo

使用HTML5的语义标签
看了文章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元素）。
例如：

<div name="code"><div name="code"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"><body>    <html5:section>        <!-- content -->    </html5:section></body></html>

html5这个前缀只是一种，并不是官方的，你也可以采用其他的前缀，比如"foo".
在写样式的时候：

html5\:section {    display: block;}

这也不是我喜欢的方法，因为我不喜欢在文件中看到满篇的名字空间元素。

3、"Bulletproof" technique
我第一次接触到这种技术是在YUIConf2010上，Tantek ?elik的发言。Tantek建议在html5的块元素里面使用div，然后在div中使用html5元素标签作为class属性。例如：

<section><div name="code"><div name="code">.section {    color: blue;}

以上三种都不是完美的方法，不过作者还是比较喜欢用bulletproof方法。

热点排行

CSS

施用HTML5的语义标签