如果你看好HTML5,你一定会用HTML5来重构您的网站,不妨来尝试一下,如何构建一个完整的HTML 5 Web页面?
不可忽视的 DOCTYPE (文档类型)
在所有 HTML 文档中规定文档类型很重要,这样浏览器才能了解所预期的文档类型.。 声明告知浏览器文档所使用的 HTML 规范。
HTML5有了新的改变,HTML 5 是使用新的doctype,它为我们省去了HTML4 和 XHTML 难以记忆的公共标识符(PUBLIC)和DTD.
因为以前的HTML 4.01 基于 SGML,HTML 4.01 中的 doctype 需要引用一个 DTD,HTML 5 不基于 SGML,也不需要引用 DTD,但是需要声明文档类型让浏览器按照它们应该的方式来运行。
在 HTML5 中,文档类型声明很简单:
在所有 HTML 文档中规定文档类型很重要,这样浏览器才能了解所预期的文档类型。
HTML5的文档类型声明,够清爽的吧,也非常容易记住,而且此标签没有结束标签 , 对大小写也不敏感。与现在广泛使用的版本要简单得多了,而且保持了向后兼容。
Google 的做法:
如果我们打开谷歌主页的源代码,我们会发现Google也在那么做。全部写于一行的源代码:
Google
Hello World
HTML5的兼容性处理
我们在上的代码中发现了这样的一段代码:
它是作用就是使IE8和更低IE版本支持HTML5.
这就是我们最关心的浏览器对HTML5的支持问题。目前 HTML5 的structural elements
将在 (Firefox 3+, Safari 3+, Opera 9+, Chrome 1+)等浏览器中得到了支持。
如果你想了解更多的兼容数据,请看《CSS3 和 HTML5 兼容性测试 》日志。
如果要使用这些HTML5的新元素,第一步,我们要做的是将它们声明为CSS的块级元素:
/* Declaring HTML5 elements */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
display: block;
}
一个完整的HTML5的重置样式表。
重置样式源代码来源:
HTML5 Reset Stylesheet文章。
我们要想得到IE8和以下版的支持,需要通过JavaScript支持。
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
我们建议你使用Remy Sharp’s的谷歌代码托管 的JavaScript 来支持HTML5,并把它放在 页面的< head > 里。
我们再来看一下完整的代码:
HTML 5 complete
需要我们值得我们注意的是,我们必须保证我们的IE 浏览器没有禁用JavaScript,对不对?
如果我们在个人的博客或设计论坛上应用了HTML5,当然不用担心IE的JavaScript是否被禁用,出现问题当然不会有麻烦。如果你在新的商业项目上采用了HTML5,如果你的用户禁用了IE浏览器的JavaScript的话,HTML5的新元素和相关的结构将被丢弃,就会出现网页“裸奔”的效果(你是否觉得似曾相识),哈哈。
这个时候,就会有用户自动找上门来,麻烦来了。你是否有个念头想抛弃IE,但是你已经有点极端的倾向了。对于网络应用程序,IE还是担当者重要的角色,我们的国民都在使用IE,就连那些好用的国产浏览器也是IE的核心。放弃了IE就等于放弃了用户,后果你已经想到了。
你也许会认为IE如果缺乏没有JavaScript支持这些新的元素意味着你不能使用所有 HTML5新标签。
但有两个方面,我们仍然可以从中受益,一方面是HTML5为我们提供了丰富的语义,我们可以使用HTML5的语义名称作为&
的类名,也算是向HTML5过渡吧,无论在 HTML4/XHTML1.0或HTML5中都可以使用。
你可能已经在使用一组标准的id 名称或class名称,好处是你得到了一组标准的类名语义。HTML5基本上是HTML4/XHTML1的一个超集,所以,只要不使用HTML5的新的内容,是可以在IE中工作的。
以上这些举措,可以简化未来的工作。
作者:Rainbow 来源:
http://cssrainbow.cn标签:IE相关兼容IE浏览器HTML5