施用HTML5的语义标签
日期：2014-05-17 浏览次数：20624 次
使用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元素）。
例如：
在浏览器：Firefox 3.6和Safai 4 中认为div有一个不知道的子元素section，section被作为inline元素在dom中创建。h1 和 p元素作为section的子 元素。因为section在DOM中，所以给他定义style是可以的。
在IE中，认为section是错误的，所以section被忽略了，h1和p作为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格式的名称空间，在元素前面带上名称空间的前缀，例如：
html5这个前缀只是一种，并不是官方的，你也可以采用其他的前缀，比如"foo".
在写样式的时候：
这也不是我喜欢的方法，因为我不喜欢在文件中看到满篇的名字空间元素。
3、"Bulletproof" technique
我第一次接触到这种技术是在YUIConf2010上，Tantek ?elik的发言。Tantek建议在html5的块元素里面使用div，然后在div中使用html5元素标签作为class属性。例如：
这种方法确保了文档流能够被正常的渲染。在HTML5的块元素中使用块元素在不同浏览器中的不同解释：
(1)一个简单的块元素（<ie9）
(2)一个位于inline元素中的块元素(ff3.6 safai 4等)
(3)一个位于块元素中的块元素(ie9, ff4,safari 5等)
所有上面的三种情况都会被正常渲染。
Tantek指出的唯一一个例外的情况，就是hgroup,建议的写法是:
样式的写法：
以上三种都不是完美的方法，不过作者还是比较喜欢用bulletproof方法。
看了文章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 class="outer">
<section>
<h1>title</h1>
<p>text</p>
</section>
</div>
在浏览器：Firefox 3.6和Safai 4 中认为div有一个不知道的子元素section，section被作为inline元素在dom中创建。h1 和 p元素作为section的子 元素。因为section在DOM中，所以给他定义style是可以的。
在IE中，认为section是错误的，所以section被忽略了，h1和p作为div的子元素。就相当于：
<div class="outer">
<h1>title</h1>
<p>text</p>
</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格式的名称空间，在元素前面带上名称空间的前缀，例如：
<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 class="section"> <!-- content --> </div></section>
这种方法确保了文档流能够被正常的渲染。在HTML5的块元素中使用块元素在不同浏览器中的不同解释：
(1)一个简单的块元素（<ie9）
(2)一个位于inline元素中的块元素(ff3.6 safai 4等)
(3)一个位于块元素中的块元素(ie9, ff4,safari 5等)
所有上面的三种情况都会被正常渲染。
Tantek指出的唯一一个例外的情况，就是hgroup,建议的写法是:
<div class="hgroup"><hgroup> <!-- content --> </hgroup></div>
样式的写法：
.section {
color: blue;
}
以上三种都不是完美的方法，不过作者还是比较喜欢用bulletproof方法。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
