如果你看好HTML5,你一定会用HTML5来重构您的网站,不妨来尝试一下,如何构建一个完整的HTML 5 Web页面?
不可忽视的 DOCTYPE (文档类型)
在所有 HTML 文档中规定文档类型很重要,这样浏览器才能了解所预期的文档类型.。<!DOCTYPE> 声明告知浏览器文档所使用的 HTML 规范。
HTML5有了新的改变,HTML 5 是使用新的doctype,它为我们省去了HTML4 和 XHTML 难以记忆的公共标识符(PUBLIC)和DTD.
因为以前的HTML 4.01 基于 SGML,HTML 4.01 中的 doctype 需要引用一个 DTD,HTML 5 不基于 SGML,也不需要引用 DTD,但是需要声明文档类型让浏览器按照它们应该的方式来运行。
在 HTML5 中,文档类型声明很简单:
<!DOCTYPE html>
在所有 HTML 文档中规定文档类型很重要,这样浏览器才能了解所预期的文档类型。
HTML5的文档类型声明,够清爽的吧,也非常容易记住,而且此标签没有结束标签 , 对大小写也不敏感。与现在广泛使用的版本要简单得多了,而且保持了向后兼容。
Google 的做法:
如果我们打开谷歌主页的源代码,我们会发现Google也在那么做。全部写于一行的源代码:
<!doctype html><html><head><title>Google</title><script>...
讽刺地说,谷歌的搜索和结果页是不作验证的,因为他们喜欢使用 一些像 <font> 等不提倡和废弃的标签,还有一些其他的错误,但没关系。
他们可以仍然可以利用HTML 5解析规则(例如,在的没有类型属性的<style> 和 <script> 元素)通过使用正确的DOCTYPE,成为合格的文档。
HTML 5 minified
如果你想得到一个更简单的HTML5文档,以下的写法,使你得到一个更加迷你的文档。
<!DOCTYPE html>
<title>Small HTML 5</title>
<p>Hello world</p>
它通过了completely valid HTML 5。
HTML 5 complete & compatible
这是一个有效的和完整的HTML 5的样板:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
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 > 里。
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
我们再来看一下完整的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
需要我们值得我们注意的是,我们必须保证我们的IE 浏览器没有禁用JavaScript,对不对?
如果我们在个人的博客或设计论坛上应用了HTML5,当然不用担心IE的JavaScript是否被禁用,出现问题当然不会有麻烦。如果你在新的商业项目上采用了HTML5,如果你的用户禁用了IE浏览器的JavaScript的话,HTML5的新元素和相关的结构将被丢弃,就会出现网页“裸奔”的效果(你是否觉得似曾相识),哈哈。
这个时候,就会有用户自动找上门来,麻烦来了。你是否有个念头想抛弃IE,但是你已经有点极端的倾向了。对于网络应用程序,IE还是担当者重要的角色,我们的国民都在使用IE,就连那些好用的国产浏览器也是IE的核心。放弃了IE就等于放弃了用户,后果你已经想到了。
你也许会认为IE如果缺乏没有JavaScript支持这些新的元素意味着你不能使用所有 HTML5新标签。
但有两个方面,我们仍然可以从中受益,一方面是HTML5为我们提供了丰富的语义,我们可以使用HTML5的语义名称作为&<div>的类名,也算是向HTML5过渡吧,无论在 HTML4/XHTML1.0或HTML5中都可以使用。
你可能已经在使用一组标准的id 名称或class名称,好处是你得到了一组标准的类名语义。HTML5基本上是HTML4/XHTML1的一个超集,所以,只要不使用HTML5的新的内容,是可以在IE中工作的。
以上这些举措,可以简化未来的工作。
文章引用地址: http://www.iefans.net/html5-yangban-jianrong-ie/ 作者:iefans