第1章 Web时代的变迁

自从2010年HTML 5正式推出以来，它立刻受到了世界各大浏览器的热烈欢迎与支持。根据世界上各大IT界知名媒体评论，新的Web时代，HTML 5的时代马上就要到来。本章重点介绍什么是HTML 5，HTML 5产生的时代背景，为什么HTML 5会如此深受业界欢迎，以及HTML能够解决什么问题。

学习内容：

❑初步了解什么是HTML 5，HTML 5与之前版本的HTML大致上有哪些区别。

❑了解世界各大知名浏览器目前的发展策略，为什么它们都不约而同地把支持HTML 5当成目前的工作重点，就连微软也把全面支持HTML 5作为新版Internet Explorer 9 （IE 9）浏览器的开发重点与主要宣传手段。

❑了解为什么说开发者今后可以放心大胆地使用HTML 5进行Web网站与Web应用程序的开发，HTML 5被正式推广以后之前的Web网站与Web应用程序怎么办。

❑了解使用HTML 5到底可以解决哪些问题。

1.1 迎接新的Web时代

1.1.1 HTML 5时代即将来临

自从2010年HTML 5正式推出以来，它就以一种惊人的速度被迅速推广着，就连微软也因此为下一代IE 9做了标准上的改进，使其能够支持HTML 5。关于各主流浏览器对于HTML 5所表现出来的热烈欢迎、积极支持的详细情况，以及为什么HTML 5会如此受欢迎，我们将在后面几节中详细介绍，这里，笔者要告诉大家的是，目前业界全体都步调一致地朝着HTML 5的方向迈进着，HTML 5的时代马上就要到来了。

在全面介绍HTML 5的相关知识之前，我们先来认识一下HTML 5中的部分代码，对HTML 5有个初步的了解。

首先，我们来看一段HTML 4中常见的JavaScript代码，如代码清单1-1所示。

代码清单1-1 HTML 4中的JavaScript代码示例

    ＜form＞
    ＜p＞＜label＞Username:＜input name=search type="text" id="search"＞＜/label＞＜/p＞
    ＜script type="text/javascript"＞
            document.getElementById ('search').focus()
    ＜/script＞
    ＜/form＞

在HTML 5中，这段代码将会以怎样的形式出现呢？具体如代码清单1-2所示。

代码清单1-2 用HTML 5实现代码清单1-1中的JavaScript代码

    ＜form＞
    ＜p＞＜label＞Search:＜input name=search autofocus＞＜/label＞＜/p＞
    ＜/form＞

我们来看一下在HTML 4中常见的一种页面结构，代码如代码清单1-3所示。

代码清单1-3 div标签示例（用HTML 4实现）

    ＜div id="header"＞...＜/div＞
    ＜div id="nav"＞...＜/div＞
    ＜div class="article"＞
    ＜/div＞
    ＜div id="side-bar"＞...＜/div＞
    ＜div id="footer"＞...＜/div＞

页面中有关该部分的结构示意图如图1-1所示。

那么，在HTML 5中，又会用怎样的页面代码来描述这种结构呢？具体如代码清单1-4所示。

代码清单1-4 HTML 5中的新型结构示例

    ＜header＞...＜/header＞
    ＜nav＞...＜/nav＞
    ＜article＞
    ＜/article＞
    ＜aside＞...＜/aside＞
    ＜footer＞...＜/footer＞

页面中有关该部分的结构示意图如图1-2所示。

怎么样？看出区别来了吗？在第一个示例中，我们可以看见，在HTML 4中的一段JavaScript代码，在HTML 5中消失了，取而代之的是一个在HTML 5中新出现的属性。在第二个示例中，我们可以看见，在HTML 4中常见的用div来划分页面结构的方法，到了HTML 5中，也被一种HTML 5中新出现的标签给替代了。那么究竟为什么HTML 5要对HTML 4的脚本以及页面代码做这种修改呢？做这种修改的目的又是什么呢？

1.1.2 HTML 5的目标

HTML 5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、新的元素，等等。总体来说，为下一代Web平台提供了许许多多新的功能。

那么让我们先来初步接触一下在HTML 5中究竟提供了哪些革命性的新功能。在第2章中，我们会针对这些功能做一个全面介绍。

首先，在HTML 5之前，有很多功能必须要使用JavaScript等脚本语言才能实现，譬如前面例子中提到，登录画面中经常使用的让文本框获得光标焦点的功能。如果使用HTML 5，同样的功能只要使用元素的属性标签就可以实现了。这样的话，整个页面就变得非常清楚直观，容易理解。因此，Web设计者可以非常放心大胆地使用这些HTML 5中新增的属性标签。由于HTML 5中提供了大量的这种可以替代脚本的属性标签，使得开发出来的界面语言也变得更加简洁易懂。

不但如此，HTML 5使页面结构也变得清楚明了。之前使用的div标签也不再使用了，而是使用前面HTML 5示例中所提到的更加语义化的结构标签。这样的话，书写出来的界面结构显得非常清晰，各部位要展示什么内容也让人一目了然。

虽然HTML 5宣称的立场是“非革命性的发展”，但是它所带来的功能是让人渴望的，使用它所进行的设计也是很简单的，因此，它深受Web设计者与Web开发者的欢迎。

1.2 HTML 5深受欢迎的理由

1.2.1 世界知名浏览器厂商对HTML 5的支持

HTML 5被说成是划时代也好，具有革命性也好，如果不能被业界承认并且大面积地推广使用，这些都是没有意义的。事实上，今后HTML 5被正式地、大规模地投入应用的可能性是相当高的。

通过对Internet Explore、Google、Firefox、Safari、Opera等主要的Web浏览器的发展策略的调查，发现它们都在支持HTML 5上采取了措施。

❑微软：2010年3月16日，微软于拉斯维加斯市举行的MIX10技术大会上宣布已推出IE9浏览器开发者预览版。微软称，IE9完成开发后，将更多支持CSS 3、SVG和HTML 5等互联网浏览通用标准。

❑Google：2010年2月19日，谷歌Gears项目经理伊安-费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目的支持，以此重点开发HTML 5项目。据费特表示，目前，在谷歌看来，Gears面临的主要问题是，该应用与HTML 5的诸多创新非常相似，而且谷歌一直积极发展HTML 5项目。因此，只要谷歌不断以加强新网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。目前，多种浏览器将会越来越多地为GMail及其他服务提供更多脱机功能方面的支持，因此Gears面临的需求也在日益下降，这是谷歌做出上述调整的重要原因。

❑苹果：2010年6月7日，苹果在开发者大会的会后发布了Safari 5，这款浏览器支持10个以上的HTML 5新技术，包括全屏幕播放、HTML 5视频、HTML 5地理位置、HTML 5切片元素、HTML 5的可拖动属性、HTML 5的形式验证、HTML 5的Ruby、HTML 5的AJAX历史和WebSocket字幕。

❑Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lie先生在访华之际，接受了中国软件资讯网等少数几家媒体的采访。号称“CSS之父”的Hakon Wium Lie认为，HTML 5与CSS 3将是全球互联网发展的未来趋势，目前包括Opera在内的诸多浏览器厂商，纷纷在研发HTML 5相关产品，Web的未来属于HTML 5。

❑Mozilla：2010年7月，Mozilla基金会发布了即将推出的Firefox 4浏览器的第一个早期测试版。在该版本中的Firefox浏览器中进行了大幅改进，包括新的HTML 5语法分析器，以及支持更多HTML 5形式的控制等。从官方文档来看，Firefox 4对HTML 5是完全级别的支持。目前包括在线视频、在线音频等多种应用都已在该版中实现。

以上证据表明，目前这些浏览器都纷纷地朝着支持HTML 5、结合HTML 5的方向迈进着，因此HTML 5已经被广泛地推行开来了。为什么HTML 5会如此受欢迎，理由如1.2.2节和1.2.3节所示。

1.2.2 第一个理由：时代的要求

现在的时代已经迫切地要求有一个统一的互联网通用标准。HTML 5之前的情况是，由于各浏览器之间的不统一，光是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间。而HTML 5的目标就是将Web带入一个成熟的应用平台，在HTML 5平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。

关于Web浏览器，网页标准计划小组设计并推出了Acid3测试，它是针对网页浏览器及设计软件之标准相容性的一项测试。它针对Web应用程序中使用着的动态内容进行检查，测试焦点主要集中在ECMAScript、DOM Level 3、Media Queries和data： URL。

Acid3测试推出后，各大浏览器都认真接受了它的测试并希望能够获得比较高的分数。这个测试的设计者，正是在W3C开发及设计者，HTML 5的重要人物Ian Hickson。Ian Hickson是WHATWG（Web Hypertext Application Technology Working Group）开发团体的成员，担任Web标准规格的设计，现在是W3C的HTML 5工作组的负责人之一。

Ian Hickson设计Acid3测试的意图是给声称“让开发者能够什么都不必担心，可以放心大胆地进行开发”的各大Web浏览器提供一个机会，让他们能够以此来证明自己是优秀的。Acid3的宣传是很重要的，要想扩大Web浏览器的市场份额，宣称遵从它所依赖的标准是最有效的宣传方法。图1-3为Acid3的一个测试图。

1.2.3 第二个理由：Internet Explorer 8

Internet Explorer也积极地朝着支持HTML 5的方向迈进着。Internet Explorer对此十分重视。虽然它的使用者依然很多，但是由于最近被Firefox等其他Web浏览器抢去了很多市场份额，它很不甘心。于是继Internet Explorer 7（IE 7）发表后不久，立刻推出了Internet Explorer 8（IE 8）的Release版。

新推出的IE 8宣称遵从互联网通用标准。虽然其他的浏览器由于标榜遵从该标准而获得了很多市场份额，但是Internet Explorer肯定是要对此采取强有力的对策的。因此Internet Explorer把宣称遵从互联网通用标准看成了很重要的一件事，并且开始在IE 8里支持HTML 5。

例如，HTML 5中代替Cookie的sessionStorage功能与globalStorage功能在IE 8里都获得了支持。使用Ajax时如果点击返回按钮也可以真正让操作返回了（在IE 7中点击返回按钮，画面跳转到其他画面）。很多Internet Explorer自己独特的处理方法与特性，今后也会有所改变。

因为现在市场份额最高的Internet Explorer也在针对HTML 5做出积极对应，微软也对新的互联网通用标准表示了赞同和支持，所以可以说HTML 5在市场上大面积推广的势头是非常强的。

1.3 可以放心使用HTML 5的三个理由

Web开发者最担心的是新技术推出时由于其不成熟所产生的问题。如果能够实现互联网通用标准，可以避免各浏览器之间的不统一，这一点已经被明确了，但是在朝着这方面前进的过程中会不会出现什么周折是令人担心的。

虽然Web开发者普遍认为有了HTML 5是比较好的，但是还是会很担心诸如“它在老版本的浏览器上也能正常运行吗？”，“会不会产生错误？”等各种问题。但是可以很高兴地告诉你，请放心，HTML 5就像以前CSS刚开始普及时一样不会存在什么问题。

有三个理由证明可以放心使用HTML 5：

❑兼容性：HTML 5在老版本的浏览器上也可以正常运行。

❑实用性：HTML 5内部并没有封装什么很复杂的、不切实际的功能，而只是封装了简单实用的功能。

❑非革命性的发展：HTML 5的内部功能不是革命性的，只是发展性的。

以上三点就是所谓的“HTML设计原则”，HTML 5也是以该设计原则为基本原则而开发出来的，各主流浏览器使用HTML 5的前提也就是要求HTML 5能够符合这些原则，今后也将以其为前提来支持HTML 5。下面针对这些原则进行介绍。

首先是兼容性问题。虽然到了HTML 5时代，但并不代表现在用HTML 4创建出来的网站必须全部要重建，只会要求各Web浏览器今后能正常运行用HTML 5开发出来的功能。“非革命性的发展”这一点正是通过兼容性体现出来的。正是因为保障了兼容性才能让人毫不犹豫地用HTML 5来开发网站。

接着是实用性。实用性是指要求能够解决实际问题。HTML 5内只封装了切实有用的功能，不封装复杂而没有实际意义的功能。

通过以上列举的HTML设计原则，尤其是与HTML 4相兼容的部分，基本上可以让人放下心来，大胆地使用HTML 5。

1.4 HTML 5要解决的三个问题

HTML 5的出现，对于Web来说意义是非常重大的。因为它的意图是想要把目前Web上存在的各种问题一并解决掉，它是一个企图心比较强的HTML版本。

那么，到底Web上存在哪些问题，HTML 5又打算怎么解决呢？

❑Web浏览器之间的兼容性很低。

首先要提到的就是，Web浏览器之间的兼容性是非常低的。在某个Web浏览器上可以正常运行的HTML/CSS/JavaScript等Web程序，在另一个Web浏览器上就不正常了的事情是非常多的。

如果用一句话来描述这个问题的原因，可以说是“规范不统一”。规范不统一，没有被标准化，是这个问题的主要原因。

在HTML 5中，这个问题将得到解决。HTML 5的使命是详细分析各Web浏览器所具有的功能，然后以此为基础，要求这些浏览器所有内部功能都要符合一个通用标准。

如果各浏览器都符合通用标准，然后以该标准为基础来书写程序，那么程序在各浏览器都能正常运行的可能性就大大提高了，这对于Web开发者和Web设计者都是一件令人可喜的事情。而且，今后开发者开发出来的Web功能只要符合通用标准，Web浏览器也都是很愿意封装该功能的。

❑文档结构不够明确。

第二个问题是，在之前的HTML版本中，文档的结构不够清晰、明确。例如，为了要表示“标题”，“正文”，之前一般都是用＜div＞元素。但是，严格说来，＜div＞不是一个能把文档结构表达得很清楚的元素，使用了过多的＜div＞要素的文章，阅读时不仔细研究，是很难看出文档结构的。而且，对于搜索引擎或屏幕阅读器等程序来说，过多使用了div元素，那么这些程序就连“从哪到哪算是重要的正文”，“这个＜ul＞要素是表示导航菜单，还是表示项目列表”等对于结构分析来说最基本的问题的答案也都不知道。

在HTML 5中，为了解决这个问题，追加了很多跟结构相关的元素。不仅如此，还结合了包括微格式、无障碍应用在内的各种各样的周边技术。

❑Web应用程序的功能受到了限制。

最后一个问题是，HTML与Web应用程序的关系十分薄弱。Web应用程序的特征是先从网络下载，然后忠实运行，因此应该对会威胁到用户安全的功能进行限制。

目前安全性的保障这方面已做到了，但对于Web应用程序来说，一直以来HTML真正所做出的贡献是很少的，譬如说就连上传文件的同时想选择一个以上的文件都做不到。

为了弥补这方面的不足，HTML 5已经开始提供各种各样Web应用上的新API，各浏览器也在快速地封装着这些API，HTML 5已经使富Web应用的实现变成了可能。