最近10年以来HTML一直在试图成为一个更好的RIA解决方案。最初是CSS,后来又有了AJAX和 Web 2.0;但是直到HTML 5迅速发展之后,Adobe Flash、微软Silverlight和HTML之间的界线才开始逐渐变得模糊。本篇文章将介绍新的HTML 5标准,诸如Canvas、Video和大幅改进的CSS。更重要的是,你将了解到应该使用哪一个浏览器才能充分利用最新HTML 5技术。
HTML 5:成长的故事
1997年,万维网联盟(W3C)发布了HTML 4.0,它是影响Web设计者和开发者的最近一个重大版本。尽管几年后推出了XHTML,但并未带来多大影响。在最近10多年中,HTML标准一直处于停滞状态。
在过去10年中,AJAX和Web 2.0技术已经非常普遍。不过,实现吸引人的新体验往往必须借助于一个插件来实现,诸如Adobe的Flash。2004年,WHATWG(网络超文本应 用技术工作组)组织开始研发一个名为Web Application 1.0的项目,后来该项目更名为HTML 5,现在被W3C所支持。
据称HTML 5是HTML标准史上最重大和最复杂的一次升级。理由很简单,它需要应对Flash、Silverlight和JavaFX等技术的挑战,否则将沦为一个次要技术。交互性和富体验应用将专门由第三方插件来处理。
HTML 5标准尚处于发展之中,还需要两年时间才能推出草案,其包含的部分主要技术包括:新HTML元素和属性;自带支持Video和Audio功 能;Canvas和SVG实现可编程绘图操作;CSS 3;JavaScript 2.0。预计将来还有可能增加更多部分。
基础元素
在HTML 5中,很多对核心元素的修改是为了让用户更有效的控制显示在屏幕上的数据。和以前支持PRE、FONT和BlINK等格式元素的早期HTML标准不同的是,HTML 5中的许多新元素目的是让用户更有效的组织在HTML代码中的内容。
在网页代码首行添加如下代码即可表示其属于HTML 5代码:
<!DOCTYPE HTML>
HTML 5的主要新元素包括:Header、Footer、Section、Article和Aside。当用户设计一个页面时,能够直观地在屏幕不同部分放置内容。示例页面图如下:
使用Header和Footer等新HTML 5元素,用户可以准确的描述其内容,例如,以下是符合要求的HTML 5代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>Add Search Engine and main links </header>
<section>
<article>The first article goes here</article>
<article>The second article goes here</article>
<article>The third article goes here</article>
<aside>A side bar definition goes here</aside>
</section>
<footer>Copyright Matthew David 2010</footer>
</body>
</html>
使用这些新元素可以让用户获得两大优势:使HTML代码更易读;搜索引擎可以理解页面中内容的价值。举例来说,相比Footer元素中的内容,article元素下的内容可以更优先被建立索引。
另外,HTML 5还支持VIDEO、AUDIO和CANVAS等新元素,可以让用户增加复杂的富体验媒体内容,来挑战Flash和Silverlight等RIA技术。