HTML5入门之样板和兼容IE浏览器篇

如果你看好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>

<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 > 里。

我们再来看一下完整的代码：

需要我们值得我们注意的是，我们必须保证我们的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://cssrainbow.cn

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
文章引用地址：http://www.iefans.net/html5-yangban-jianrong-ie/ 作者：iefans

转载于:https://www.cnblogs.com/ws_zst/archive/2013/05/22/3092195.html