1.6　HTML 5介绍

本节开始介绍HTML 5技术的内容，具体包括HTML 5的发展历史、特点及使用方法。

1.6.1　HTML 5的发展历史

HTML 5是万维网的核心语言、标准通用标签语言下的一个应用超文本标签语言（HTML）的第五次重大修改版本。万维网联盟（W3C）于2014年10月29日宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

其实，HTML 5的发展历程还是非常有意思的，可以说是一波三折。先说说万维网联盟（W3C）这个组织。万维网联盟（W3C）是一个纯粹为了标准化而存在的非营利性组织，其初衷确实很美好，不涉及单独某一方的利益。但是，由于该组织太过于纯粹而忽略了各大浏览器厂商的利益，因此来自苹果的Safari浏览器团队、Mozilla基金会以及Opera软件等浏览器厂商于2004年成立了WHATWG工作小组（Web Hypertext Application Technology Working Group），意为网页超文本技术工作小组。不难理解，他们意图回到超文本标签语言HTML上来。

WHATWG动作很快，因为他们实力都很强，均是多年战斗在第一线的浏览器厂商。该组织成立后不久就提出了作为HTML 5草案前身的Web Applications 1.0，那时候HTML 5还没有被正式提出。WHATWG致力于Web表单和应用程序，而W3C专注于XHTML 2.0，双方可谓是渐行渐远。

当然，这个世界最终还是靠实力说话的，看着自己被冷落的W3C在2006年10月决定停止XHTML的工作并与WHATWG合作。双方决定进行合作，来创建一个新版本的HTML，并为其建立了一些规则，具体如下：

• 新特性应该基于HTML、CSS、DOM以及JavaScript。
• 减少对外部插件的需求（比如Flash）。
• 更优秀的错误处理。
• 更多取代脚本的标签。
• HTML应该独立于设备。
• 开发进程应对公众透明。

以上这些规则就是HTML 5的最初雏形了。

2007年，苹果、Mozilla基金会以及Opera软件建议W3C接受WHATWG的HTML 5，正式提出将新版HTML标准定义为HTML 5，于是HTML 5就正式和大家见面了。

HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5仍处于完善之中。然而，当时的大部分浏览器已经具备了某些HTML 5支持。随着浏览器JavaScript引擎大幅提速，以及人们对HTML 5预期逐步提高，HTML 5的流行度出现了显著的上升，但最初的HTML 5并没有给人们真正更多的惊喜。不过随着每一次Flash Player爆出漏洞、安全、性能之类的负面新闻时，人们对HTML 5的关注度又大幅升高。

2010年1月，YouTube开始提供HTML 5视频播放器。

2010年8月，Google联合Arcade Fire推出了一个HTML 5互动电影：The Wilderness Downtown，此项目由著名作家兼导演Chris Milk创作。之所以叫做互动电影，是因为在开始时电影会问你小时候家住在哪里，而随后的电影剧情将在这里展开。电影使用了Arcade Fire刚刚推出的新专辑《The Suburbs》中的We Used to Wait作为主题音乐。在电影发表一年后，该电影在戛纳广告大奖赛中获得了网络组特别奖项。

2010年4月，苹果CEO乔布斯发表公开信“Flash之我见”。引发Flash和HTML 5阵营之间的空前口水仗，也刺激了浏览器厂商。

2012年1月10日在拉斯维加斯正在举行的CES大会上，微软CEO鲍尔默宣布了基于IE9和HTML 5版的割绳子游戏，这是一款由微软及游戏开发商ZeptoLab共同推出，用于促进IE9的使用及网页的美化。

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量开发人员心血的HTML 5规范已经正式定稿。根据万维网联盟（W3C）的发言稿称：“HTML 5是开放的Web网络平台的奠基石。”

2013年5月6日，HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标签语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者努力提高新元素互操作性。根据本次草案的发布内容，HTML 5进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML 5的图像<img>标签及<svg>标签也进行了改进，性能得到进一步提升。

2014年10月29日，万维网联盟（W3C）终于正式宣布，经过几乎8年的艰辛努力，HTML 5标准规范终于最终制定完成了，并已公开发布。

看过上面的HTML 5的发展历程，读者也许觉得足够写一本书或拍一部电影了，这当然是题外话。

不过，HTML 5的正式发布确实将会给Web开发带来革命性的变化。目前，国外支持HTML 5的主流浏览器包括Firefox（火狐浏览器）、IE9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera等。国内支持HTML 5的浏览器包括傲游浏览器、360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等，不过国内的很多浏览器的内核都是基于Firefox、Chrome或IE开发的。

另外，在移动设备上开发HTML 5应用只有两种方法，一种是全使用HTML 5的语法，一种就是仅使用JavaScript引擎。纯HTML 5移动应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多设计人员愿意去做这样的优化，但依然可以去尝试。

HTML 5移动端应用的最大优势就是可以在网页上直接调试和修改。最初，移动端应用的开发人员可能需要花费非常大的力气才能达到HTML 5的界面效果，但需要不断地重复编码、调试和运行。但现在不同了，对于基于HTML 5标准的移动应用，开发人员可以轻松地进行调试修改。

1.6.2　HTML 5的设计理念

HTML 5的最终设计理念是为了在移动设备上支持多媒体，这也是区别于之前HTML4的主要理念。在桌面Web应用中，HTML4已经能够很好地完成绝大部分工作了，但HTML4在移动应用上却显得能力不足，当然这也是由HTML4的规范所限制的。

HTML 5新的语法特征可以很好地支持移动应用，例如：video、audio和canvas标签。另外，HTML 5规范还引进了新的功能特性，可以真正改变用户与网页的交互方式，具体包括：

• 新的解析规则增强了灵活性。
• 增加很多适应移动应用的新属性。
• 淘汰了过时的或冗余的属性。
• 增加了HTML 5文档间的拖放功能。
• 增加了离线编辑功能。
• 增强了信息传递功能。
• 具有详细的解析规则。
• 增加了多用途互联网邮件扩展（MIME）和协议处理程序注册功能。
• 增加了在SQL数据库中存储数据的通用标准（Web SQL）。

1.6.3　HTML 5的新特性

HTML 5具有很多HTML4所不具有的新的特性，具体包括：

• 语义特性

HTML 5赋予了网页更好的意义和结构，更加丰富的标签，增加了对微数据与微格式等方面的支持，将真正形成以数据驱动的Web应用。

• 本地存储特性

基于HTML 5开发的网页应用拥有更短的启动时间和更快的联网速度，这全是因为HTML 5具有的APP Cache以及本地存储功能。

• 设备兼容特性

HTML 5为网页应用开发人员提供了前所未有的数据与应用接入开放接口，基于这些接口可以让外部应用直接与浏览器内部的数据进行交互，例如：调用移动设备的摄像头和麦克风，等等。

• 网页多媒体特性

HTML 5支持网页端的Audio、Video等多媒体功能，可与网站自带的影音多媒体功能互为助力。

• 三维、图形及特效特性

HTML 5支持基于SVG、Canvas、WebGL及CSS3的3D功能，这些功能会在浏览器中呈现出惊人的视觉效果。

• 服务器推送特性

HTML 5具有更有效的连接工作效率，使得诸如快速的网页游戏体验，优化的在线聊天功能得到了实现。HTML 5拥有更有效的服务器推送技术，譬如Server-Sent Event和Web Sockets技术就是其中的两个特性，这两个特性能够帮助设计人员实现服务器将数据“推送”到客户端的功能。

• 异步加载特性

HTML 5会通过XMLHttpRequest2等技术，解决以前的跨域问题，有效地避免了用户在浏览器加载过程中无法等待的Loading过程，帮助设计人员在开发的Web应用多样化的环境中更快速地工作。

• CSS3特性

HTML 5还对CSS3新特性提供了很好的支持，在不牺牲性能和语义结构的前提下，CSS3中特殊风格和增强效果将会在浏览器中得到完美体现。

• Web排版

HTML 5较之以前的Web排版，支持全新的Web的开放字体格式（WOFF），该字体格式提供了更高的灵活性和控制性。

1.6.4　HTML 5的新变革

HTML 5规范提供了一些新的元素和属性，具体如下：

• 取消了一些过时的HTML4标签

诸如像纯粹为了显示效果的标签，如u、font、center和strike这些标签，已经被CSS3样式表所取代了。b和i标签虽然保留了下来，但已经没有粗体或斜体样式功能了，仅仅就是为了标识一段文字。

• 借鉴XHTML的优点

HTML 5借鉴了XHTML2的一些优点，包括一些用来改善文档结构的功能。增加了新的语义化的HTML标签来表示网页内容，例如：header（表示文档页眉）、footer（表示文档页脚）、dialog（表示对话框）等。我们知道，之前的开发人员在实现这些功能时一般都是使用div标签的。

• 全新的表单输入对象

HTML 5增加了包括日期、URL、Email地址等，全新的表单输入对象。同时，还引入了微数据对象来帮助机器识别标签内容的方法，语义化的标签使得Web处理变得更为简单。

• 全新的多媒体标签

HTML 5规范中，多媒体对象将不再全部绑定在object或embed标签中，而是视频有视频的标签video，音频有音频的标签audio。

• Canvas对象

HTML 5规范提供了全新的canvas标签，用来在浏览器上直接绘制矢量图，这意味着设计人员可以摆脱Flash和Silverlight，直接在浏览器中显示图形或动画。

• 本地数据库

HTML 5提供了在浏览器中内嵌一个本地的SQL数据库的功能，以加速交互式搜索，缓存以及索引功能。同时，类似离线Web程序也将因此获益匪浅。

• 浏览器中的真正程序

HTML 5将提供API实现浏览器内的编辑、拖放，以及各种图形用户界面的能力。内容修饰标签将被弃用，而是直接使用CSS样式。

1.6.5　HTML 5的新标签

下面，总结HTML 5规范为设计人员带来了那些新的标签元素。

• 语义结构类（详见表1-1）

• 表单类（详见表1-2）

• 多媒体类（详见表1-3）

• 矢量画布（详见表1-4）

1.6.6　HTML 5的移动特性及未来

HTML 5移动开发的出现让移动平台的竞争由系统平台转向了浏览器之间，移动端的IE、Chrome、FireFox、Safari、Oprea等浏览器，谁能达到在移动端对HTML 5更好的支持，谁就能在以后的移动应用领域占据更多的市场。

下面列举HTML 5适合移动应用开发的几大特性：

• 离线缓存为HTML 5开发移动应用提供了基础。
• 音频视频自由嵌入，多媒体形式更为灵活。
• 地理定位，随时随地分享位置。
• Canvas绘图，提升移动平台的绘图能力。
• 专为移动平台定制的表单元素。
• 丰富的交互方式支持。
• 使用成本上的优势，更低的开发及维护成本。
• CSS3视觉设计师的辅助利器。
• 实时通信。
• 档案以及硬件支持。
• 语意化。
• 双平台（iOS/Android）融合的App开发方式，提高工作效率。

可以预见，HTML 5的移动特性将使得其成为未来前端设计领域的翘楚。未来将是移动应用的天下，从近些年智能手机和平板电脑的蓬勃发展就可以看出来，移动优先已经成为趋势。HTML 5就是为移动应用而生的，虽然其还处在改进与完善的阶段，但笔者相信未来将会有更多的移动应用是基于HTML 5构建的。