使用HTML5的语义标签

fuhao_987

浏览: 63715 次
性别:
来自: 北京

最近访客更多访客>>

april2015

dabingsou

heermu

活出精彩--耶

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

HTML5 IE 浏览器 JavaScript Web

看了文章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方法。

0
顶

1
踩

分享到：

圣杯布局的实践 | Java连Mysql数据库

2011-04-29 11:06
浏览 962
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论