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

如果你看好HTML5,你一定会用HTML5来重构您的网站,不妨来尝试一下,如何构建一个完整的HTML 5 Web页面?

W3C HTML5

不可忽视的 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 中,文档类型声明很简单:

1
<!DOCTYPE html>

在所有 HTML 文档中规定文档类型很重要,这样浏览器才能了解所预期的文档类型。

HTML5的文档类型声明,够清爽的吧,也非常容易记住,而且此标签没有结束标签 , 对大小写也不敏感。与现在广泛使用的版本要简单得多了,而且保持了向后兼容。

Google 的做法:

如果我们打开谷歌主页的源代码,我们会发现Google也在那么做。全部写于一行的源代码:

1
2
 
<!doctype html><html><head><title>Google</title><script>...

讽刺地说,谷歌的搜索和结果页是不作验证的,因为他们喜欢使用 一些像 <font> 等不提倡和废弃的标签,还有一些其他的错误,但没关系。

他们可以仍然可以利用HTML 5解析规则(例如,在的没有类型属性的<style> 和 <script> 元素)通过使用正确的DOCTYPE,成为合格的文档。

HTML 5 minified

如果你想得到一个更简单的HTML5文档,以下的写法,使你得到一个更加迷你的文档。

1
2
3
<!DOCTYPE html>
<title>Small HTML 5</title>
<p>Hello world</p>

它通过了completely valid HTML 5

HTML 5 complete & compatible

这是一个有效的和完整的HTML 5的样板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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的块级元素:

1
2
3
4
/* Declaring HTML5 elements */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
  display: block;
}

一个完整的HTML5的重置样式表。

重置样式源代码来源:HTML5 Reset Stylesheet文章。

我们要想得到IE8和以下版的支持,需要通过JavaScript支持。

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

1
2
3
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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中工作的。

以上这些举措,可以简化未来的工作。

站点统计