1.2 HTML5概述

在移动互联网初期，由于苹果手机App模式一枝独秀，HTML5几乎被排挤出局。随着互联网公司超级App的崛起，传统App模式变得不那么重要，大部分互联网公司开始支持HTML5的Web App模式。

本节主要介绍HTML5的诞生和发展历程，以及它的新特性和跨越浏览器的特性。

1.2.1 HTML5的诞生和发展

1. HTML5的诞生

自从第一个网站诞生开始，互联网一直处于快速发展中，对Web技术的要求也是越来越高。HTML作为网页的文本标记格式语言，也必须适应这样的变化。虽然现在大多数的网站页面都是基于HTML的，为了长远发展，需要不断改进，从而满足新的需求。

面临着XML、XHTML的竞争压力，一群来自于Chrome、Opera等公司的HTML爱好者决定成立一个组织来发展HTML，WHATWG应运而生。随着Web 2.0的到来，他们决定完善HTML的一些缺陷，添加一些新的功能，让网站拥有更多的动态性。随着HTML的发展，HTML逐渐成为网页语言的主流。

此后，万维网联盟（World Wide Web Consortium，W3C）重新介入HTML，并发布了一些新的规范。2008年，W3C发布了HTML5的工作草案。HTML5的新特性和动态性让各大互联网公司蠢蠢欲动，迫不及待地投身到基于HTML5的产品开发中去。随着开发中问题的反馈，HTML5也在不断完善，并迅速融入到Web开发中去。目前主流的浏览器都添加了对HTML5新特性的解析。

2014年10月底，W3C宣布HTML5规范正式定稿，从2008年到2014年底，HTML从起草、发展到定稿，已经被大多数Web开发人员所认可。随着移动设备硬件的提升，HTML5在移动应用的开发中性能差的诟病也逐渐消除。2012年全身投入HTML5应用开发并宣布失败的Facebook，现在又重新开始了新的开发研究。HTML5的标志如图1-2所示。

2. HTML5的发展

自诞生以来，HTML5一共经历了两个阶段，分别是Web增强和移动互联网，下面分别进行介绍。

（1）Web增强

Web体验的丰富增强主要表现在以下3个方面。

1）Web App ：HTML5新增了离线存储、更丰富的表单(如Input type=date)、JS线程、socket、标准扩展embed，以及很多CSS3新语法。

2）流媒体 ：HTML5新增了audio和video。

3）游戏 ：HTML5新增了canvas和webgl。

在HTML5标准的升级过程中，苹果和Google也同时看到了浏览器市场重新洗牌的机会，他们一边参与HTML5规范的制定，一边在浏览器产品上发力。苹果公司首先开始大力发展Safari，建立WebKit开源项目，Mac、iOS和Windows多平台齐发力；Google起初是赞助Mozilla开发Firefox，后来自己开发了v8引擎，合并WebKit，于2008年正式推出Chrome。“IE的私有规范+Flash不是标准，我们才是标准”这样的口号在新一代浏览器大战中打响，IE瞬间成为垄断的代表，甚至成了阻碍Web发展的重要因素(当时IE 6已数年未更新，并且丝毫不惧Firefox的发展)。

微软此时也推出了一系列既不完全支持规范又互相不兼容的IE 7、IE 8、IE 9和IE 10，彻底失去了开发者的心。

Adobe的Flash被遏制，与Web霸主的位子擦肩而过；IE的私有标准被遏制，并且造成IE市场份额不断下滑，直到IE最新的移动版本开始支持WebKit私有语法。

（2）移动互联网

随着Chrome和Safari的快速发展，同时也伴随着IE+Flash的衰落，HTML5进入了下一个时代——移动互联网。

HTML5的跨平台优势在移动互联网时代被进一步凸显。HTML5是唯一一个可以应用于PC、Mac、iPhone、iPad、Android和Windows Phone等主流平台的跨平台语言。此时，人们纷纷开始研究和开发基于HTML5的跨平台手机应用。

W3C此时成立了DeviceAPI工作组，为HTML5扩展了Camera、GPS等手机特有的API，但是，移动互联网初期的迭代太快了，手机OS在不停地扩展硬件API，陀螺仪、距离感应器、气压计……每年手机OS都有大版本更新。而W3C作为一个数百家会员单位共同决策的组织，从标准草案的提出到达成一致是一个非常复杂的过程，跟不上移动互联网初期的快速迭代。

PhoneGap的出现让开发者们看到了新的希望。他们期待PhoneGap不停扩展API来补充浏览器的不足。Adobe收购PhoneGap后，又发现它的商用性不足，而且开源使得Adobe无法像Flash那样获取商业利益，因此把PhoneGap送给了Apache，改名为Cordova。现在，Cordova的使用模型是“原生工程师+HTML5工程师”一起协作完成App。

随着Facebook加入W3C，并成立了MobileWeb工作组。MobileWeb这个工作组的重要目标就是让HTML5开发的网页应用实现原生应用的体验。然而，事与愿违，2012年，Facebook放弃了HTML5。

Facebook为何放弃HTML5?主要原因是当时基于HTML5真的做不出好的移动App。对比Twritter等竞争对手的原生App，Facebook的HTML5版本实在无法让用户满意。例如，Push功能，到现在HTML5的推送和原生的推送体验差距依然巨大。原生工程师可以轻松实现摇一摇、二维码、语音输入和分享到朋友圈等功能。究其原因，Facebook没有掌握关键点——手机浏览器内核。如果浏览器不跟上，制定的所有标准草案都不能实现。

浏览器在手机上表现的是什么呢?Google、Chrome性能虽高，但Android上的浏览器却并非Chrome，而是用WebKit改出来的一个Android浏览器；同时，iOS上不允许其他浏览器引擎上架App Store，而且其他使用Safari引擎的应用也无法调用苹果自己的JavaScript加速引擎Nitro。苹果和Google对HTML5做出了种种限制。

总之，在移动互联网的初期，原生应用生态系统占主流。

在2014年10月底，W3C宣布HTML5正式定稿。随着HTML5标准定稿，属于HTML5的时代到来了。

1.2.2 HTML5新特性

HTML5提供了许多新的规范，对页面的布局、多媒体的展示等多个方面进行了改进，主要体现在以下几个方面。

1.新的文档类型(New Doctype)

目前许多网页还在使用XHTML 1.0，并且要在第一行像下面这样声明文档类型。

在HTML5中，以上声明方式将失效。下面是HTML5中的声明方式。

2.脚本和链接无须type(No More Types for Scripts and Links)

在HTML4或XHTML中，用下面的几行代码来给网页添加CSS和JavaScript文件。

而在HTML5中，不再需要指定类型属性。因此，代码可以简化如下。

3.语义header和footer(The Semantic Header and Footer)

在HTML4或XHTML中，用下面的代码来声明header和footer。

在HTML5中，有两个可以替代上述声明的元素，这可以使代码更简洁。

4. hgroup

在HTML5中，有许多新引入的元素，hgroup就是其中之一。假设网站名下面紧跟着一个子标题，可以用<h1>和<h2>标签来分别定义。然而，这种定义没有说明这两者之间的关系。而且，<h2>标签的使用会带来更多问题，特别在该页面上还有其他标题的时候。

在HTML5中，可以用hgroup元素来将它们分组，这样就不会影响文件的大纲。

5.标记元素 (Mark Element)

可以把标记元素当作高亮标签，而且被这个标签修饰的字符串应当与用户当前的行动相关。比如说，当在某博客中搜索“Open your Mind”时，可以利用JavaScript将搜索到的词组用<mark>修饰一下。

6.图形元素 (Figure Element)

在HTML4或XHTML中，下面的这些代码被用来修饰图片的注释。

然而，上述代码没有将文字和图片内在联系起来。因此，HTML5引入了<figure>元素。当和<figcaption>结合起来后，可以语义化地将注释和相应的图片联系起来。

7.重新定义<small>(Small Element Redefined)

在HTML4或XHTML中，<small>元素已经存在。然而，却没有如何正确使用这一元素的完整说明。在HTML5中，<small>被用来定义小字，如网站底部的版权状态，根据HTML5对此元素新的定义，<small>可以正确地诠释这些信息。

8.占位符 (Placeholder)

在HTML4或XHTML中，用JavaScript给文本框添加占位符。例如，可以提前设置好一些信息，当用户开始输入时，文本框中的文字就消失。

而在HTML5中，新的Placeholder就简化了这个问题。

9.必要属性 (Required Attribute)

HTML5中的新属性required指定了某一输入是否必需。有下列两种方法可以声明这一属性。

当文本框被指定必需时，如果空白的话表格就不能提交。下面是一个如何使用的例子。

在上面的例子中，如果输入内容为空且表格被提交，输入框将被高亮显示。

10. 自动聚焦属性 (Autofocus Attribute)

同样，HTML5的解决方案减少了对JavaScript的需要。如果一个特定的输入应该是“选择”或“聚焦”，默认情况下，采用自动聚焦属性。

11. 音频支持 (Audio Support)

目前，需要依靠第三方插件来渲染音频。然而在HTML5中，<audio>元素被引进，可支持音频。

使用<audio>元素时请注意包含两种音频格式。FireFox需要.ogg格式的文件，而Webkit浏览器则需要.mp3格式的。IE是不支持的，且Opera 10及以下版本只支持.wav格式。

12. 视频支持 (Video Support)

HTML5中不仅有<audio>元素，而且还有<video>元素。然而，与<audio>类似，HTML5中并没有指定视频解码器，由浏览器来决定。Safari和Internet Explorer 9支持H.264格式的视频，Firefox和Opera则支持开源Theora和Vorbis格式。因此，指定HTML5的视频时，必须提供这两种格式。

13.视频预载 (Preload Attribute in Videos Element)

当用户访问页面时，这一属性使得视频得以预载。为了实现这个功能，可以在<video>元素中加上preload或者只是preload。

14.显示控制条 (Display Controls)

如果使用视频预载中的代码，视频显示的仅是一张图片，没有控制条。为了渲染出播放控制条，必须在<video>元素内指定controls属性。

15.正规表达式 (Regular Expressions)

在HTML4或XHTML中，需用一些正规表达式来验证特定的文本。而在HTML5中，新的pattern属性能够在标签处直接插入一个正规表达式。

【例1-1】一个简单的HTML5播放视频的例子。

这段代码的执行结果如图1-3所示。

1.2.3 跨越浏览器的HTML5

在传统桌面平台，不管对于用户还是厂商，浏览器都是非常重要的工具和互联网入口。由于没有移动平台的孤岛效应，浏览器的入口地位就显得格外明显。现在，PC终端的主流浏览器主要有以下5种。

1. Internet Explorer浏览器

Internet Explorer是微软公司推出的一款网页浏览器，原称为Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7、8、9、10、11版本)，简称IE。在IE 7以前，中文直译为“网络探路者”，但在IE 7以后官方便直接俗称“IE浏览器”。

2015年3月，微软确认将放弃IE品牌。在Windows 10中IE被Microsoft Edge取代了。微软于2015年10月宣布2016年1月起停止支持老版本IE浏览器。

2016年1月12日，微软公司宣布停止对IE 8/9/10这3个版本的技术支持，用户将不会再收到任何来自微软官方的IE安全更新；作为替代方案，微软建议用户升级到IE 11或者改用Microsoft Edge浏览器。

从IE 10起，IE浏览器能很好地支持HTML5。

2. Chrome浏览器

Google Chrome是由Google公司开发的网页浏览器。该浏览器是基于其他开源软件而撰写的，包括WebKit，目标是提升稳定性、速度和安全性，创造出简单且有效率的使用者界面。软件名称来自于称作Chrome的网络浏览器GUI。Chrome支持W3C最新的Web协议和HTML5，且表现良好。

3. Firefox浏览器

Mozilla Firefox，中文俗称“火狐”（正式缩写为Fx或fx，非正式缩写为FF），是一个自由及开放源代码的网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。该浏览器提供了两种版本：普通版和ESR（Extended Support Release，延长支持）版，ESR版本是Mozilla专门为那些无法或不愿每隔6周就升级一次的企业打造的。Firefox ESR版的升级周期为42周，而普通Firefox的升级周期为6周。

根据2013年8月浏览器统计数据，Firefox在全球网页浏览器的市场占有率为76%～81%，用户数在各网页浏览器中排名第三。自Firefox29起，浏览器界面有很大程度的改变。

由于该浏览器开放了源代码，因此还有一些第三方编译版供使用。如pcxFirefox、苍月浏览器和tele009等。根据英国防病毒公司Sophos的最新调查数据显示，Firefox连续3年成为互联网用户最受信赖的浏览器。

Firefox很多年前就支持HTML5，而且自动升级，对HTML5支持性最好。

4. Safari浏览器

Safari是苹果计算机的操作系统Mac OS X中的浏览器，用来取代之前的Internet ExplorerforMac。Safari使用了KDE的KHTML作为浏览器的计算核心。该浏览器已支持Windows平台，但是与运行在Mac OS X上的Safari相比，有些功能丢失。Safari也是iPhone手机、iPodTouch和iPad平板电脑中iOS指定的默认浏览器。

Safari同样也支持HTML5。

5. Opera浏览器

Opera浏览器是一款由挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器,可以在Windows、Mac和Linux这3个操作系统平台上运行。Opera浏览器创建于1995年4月。2016年2月确定被奇虎360和昆仑万维收购。

Opera浏览器支持W3C标准和HTML5。

Opera还有手机应用版本，例如,在WindowsMobile和Android手机上安装的OperaMobile和Java版OperaMini。2006年Opera与Nintendo签下合约，提供NDS及Wii游乐器Opera浏览器软件。Opera浏览器支持多语言，包括简体中文和繁体中文。

在移动终端常用的浏览器中，除了上面介绍过的应用于iPhone手机、iPodTouch和iPad平板电脑中iOS指定的默认浏览器Safari，在WindowsMobile和Android手机上安装的OperaMobile和Java版OperaMini外，常用的还有以下3种移动终端的浏览器，它们都支持HTML5。

1）UCWEB手机浏览器。UC浏览器（原名UCWEB，2009年5月正式更名为UC浏览器）是一款把“互联网装入口袋” 的主流手机浏览器 ，由优视科技（原名优视动景）公司研制开发。兼备cmnet、cmwap等联网方式，速度快而稳定，具有视频播放、网站导航、搜索、下载和个人数据管理等功能。

2）百度手机浏览器。百度手机浏览器由百度公司研发，产品采用太空小熊形象，提供超强智能搜索，整合百度优质服务。产品提供网盘服务，UI界面时尚，极速内核，强劲动力。通过增强内核和几十项技术改进，支持手机端和计算机端的页面浏览，提供多项特色功能，让人们在手机上也能方便地使用原汁原味的计算机页面。

3）手机QQ浏览器。手机QQ浏览器是腾讯科技基于手机等移动终端平台推出的一款适合WAP和WWW网页浏览的软件，速度快，性能稳定，可以让用户畅享移动互联网在线生活。