看了文章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方法。
分享到:
相关推荐
语义化标签优点:为了在没有CSS的情况下,页面也能呈现出很好的内容结构比标签有更加丰富的含义,方便开发与维护方便其他设备解析(移动设备等)有利于合作,遵守W3C标准HTML5语义化标签标签标签装载显示一个独立的...
13-html5新增的语义标签.html
语义化HTML中的标签和属性,web开发人员必须掌握的技术。
HTML5新语义及基本布局: HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签,但有一定含义,例如 (网站导航块)和 。这种标签将有利于搜索引擎的索引整理、小...
HTML5新增的语义标签.ppt
html语义化标签 可以看看 不多但还好
常见语义html标签及使用方法, 学习html标签含使用方法d
你现在可以在meta 标签中使用”charset”:<meta charset=”utf-8″ /> 脚本和链接无需type <link rel="stylesheet" href="path/to/stylesheet.css" /> [removed][removed] 更加语义化的新增标签 比如...
html5语义化标签 一、首先我们提出疑问,什么是语义化标签以及我们为什么要去使用它? 在语义化标签出来之前,我们可以用div+css实现完全可以实现布局,为什么要多此一举呢? 1)为了在没有CSS的情况下,页面也能...
html标签、html语义化
语义化标签.html
简单说下你理解的语义化,怎样来保证你写的符合语义化?HTML5语义化标签了解下?
在网页中HTML专门用来负责网页的结构,所以在使用html标签时,应该关注的是标签的语义,而不是它的样式标题标签: h1 ~ h6 一共有六级标题 从h1~h6重要性递减,h1最重要,h6最不重要 h1在网页中的重要性仅次于...
Web-前端html+css从入门到精通 124 HTML5新语义化标签(2).zip
Web-前端html+css从入门到精通 123. HTML5新语义化标签(1).zip
Web-前端html+css从入门到精通 125. HTML5新语义化标签(3).zip
...
...
代码可读性和可维护性:使用语义化的标签和属性,可以让代码更易于阅读和理解,提高代码的可维护性。开发人员可以更快速地定位和修改特定功能或内容。 设备兼容性:不同设备和平台对于网页的渲染和解析方式有所不同...
语义化的标签,旨在让标签有自己的含义。代码结构清晰,方便阅读,有利于团队合作开发。