读书人

施用HTML5的语义标签

发布时间: 2012-10-07 17:28:51 作者: rapoo

使用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标签被认为是错误的,然后被完全忽略,创—OM的时候就不管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

热点推荐