HTML5评述

最新推荐文章于 2024-07-13 13:55:40 发布

cuiyi0600

最新推荐文章于 2024-07-13 13:55:40 发布

阅读量116

点赞数

文章标签： xhtml java javascript ViewUI

《HTML5评述》
【版权声明】：本文属于原创，转载需征得作者chszs的同意！
HTML5的很多特征已得到目前多个浏览器的支持。自从苹果公司宣布，他们不会支持Flash，而改为支持HTML5，这使得HTML5得到媒体的广泛关注。不幸的是，媒体的报道出现了神话HTML5以及误传了浏览器对HTML5的支持水平。

HTML5在语法上不同于HTML4和XHTML。标签不再对大小写敏感，标签不再需要关闭。属性可被引用。下列HTML5标签均为有效代码：

CODE:

看上去语法很宽松。事实上，浏览器从不在意XHTML语法，只要服务器发送的内容类型是text/html即可。

HTML5的元数据标签的语法有些不同，应该这么写：

CODE:

不过，元数据标签的语法不是必须的。HTML5可以简单地这么写：

CODE:

HTML5的doctype也变得更短，如下：

CODE:

没错，就是它！没有网址或链接。很简单。现在，让我们做一个简单的页面。试试这个：

CODE:

Hello World

Hello World!

This is written in HTML 5

注：
在Chrome 7.0.517.44浏览器下，显示正常，如下：
attachment.php?aid=696391&nothumb=yes

查看网页源码：

代码被补全为如下：

在Opera 10.63浏览器下，显示也正常，如下：
attachment.php?aid=696394&nothumb=yes

查看网页源码，被补全为如下：
attachment.php?aid=696395&nothumb=yes

   与Chrome浏览器一致！
   在Firefox 3.6.11浏览器下，结果与Chrome、Opera相同。
   在IE 7.0.5730.13浏览器下，显示正常，如下：
attachment.php?aid=696396&nothumb=yes

   查看源码的结果与Chrome、Opera、Firefox相同。
   推测IE8、IE9也是如此。

注意：
   上面的代码不再有、、标签了。在HTML5中，这3个标签是可选的，如果你喜欢，可以使用它们。注意，IE浏览器需要这些标签，以便于CSS样式能应用到HTML5的元素上。因此，短时间内，还是该使用这些标签。

   现在，让我们考虑一个“典型”的网页。比如像如下的布局方面：
attachment.php?aid=696397&nothumb=yes

在HTML4或XHTML中，你可以使用

标签和CSS类搞定，比如：

CODE:

<!--Content--&gt

在HTML5中，我们有了新的结构元素，它们更好地遵循了“典型”的Web页面的结构。下面是一个例子，包括了可选的、、标签。

CODE:

我的HTML 5页面



   <!-- Header Content --&gt

   <!-- Sidebar Content --&gt

   <!-- Main Content --&gt

   <!-- Footer Content --&gt


跟原来确实大不相同，更像是语义Web设计。为了正确地显示出布局，仍然需要CSS样式，如下：

CODE:

header {
color: black;
}目前主流的浏览器都已支持HTML5新增的元素，且可以直接应用CSS样式，除了IE。要在IE中应用CSS样式到HTML5元素，需要使用JavaScript，如下：

CODE:

document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');此脚本对其它浏览器无影响，我们可以把脚本包含到只使用IE的条件标记中。
IE很令人讨厌，居然不能识别HTML5的新标签，比如，要解决此问题，可以在HTML5的头部引入html5.js脚本，以此使得IE能支持新标签。

CODE:

<!--[if lt IE 9]>


   以上的html5.js脚本使得IE能识别所有HTML5的新元素。

   当然，IE还有一个问题，那就是如果IE禁用了JavaScript，那么CSS样式将不能应用到HTML5的新元素上。尽管禁用JavaScript的用户只是少数，但问题确实存在。期盼IE9或IE10能彻底解决此问题。

   现有的方法是仍然使用HTML4或XHTML页面，只是在用

布局时，尽量取HTML5新元素的名字做标记，如：‘nav’、‘header’、‘article’，目的是为了在将来可轻松地用HTML5标签替换它们。采用这种方法，在未来只需用相应的HTML5元素来替代

标签即可。

HTML5要完全得到浏览器的支持，恐怕要在2012年，让我们拭目以待吧！

[ 本帖最后由 chszs 于 2010-11-18 12:34 编辑 ]