HTML 5网页开发实例详解

(1)

HTML 5网页开发实例详解

周遥李春城编著

清华大学出版社

(2)

内容简介

本书从实际的应用场景出发，结合当下的热门技术，深入浅出地介绍了HTML 5所包含的各项新技术。本书

分为14章。第1~4章介绍了HTML 5和浏览器的发展史、HTML 5新特性的使用，最新的前端设计概念和第三方流

行应用框架，如响应式设计、移动端框架、MVC、图形库、游戏库、Node.js；第6~12章介绍了表单、Canvas、多

媒体、地理、拖放、存储、通信、离线应用等多个方向，并给出了大量实例；第13~14章通过两个完整的大型应

用实例，详细分析HTML 5的项目流程及设计技巧。

本书适用于所有前端开发初学者和网页设计入门者，也可作为大中专院校及培训学校教材及上机指导用书。

本书封面贴有清华大学出版社防伪标签，无标签者不得销售。

图书在版编目（CIP）数据

HTML 5网页开发实例详解 / 周遥, 李春城编著. －北京：清华大学出版社，2014 ISBN 978-7-302-36136-7

I. ①H… II. ①周… ②李… III. ①超文本标记语言－程序设计 IV. ①TP312 中国版本图书馆CIP数据核字（2014）第069756号

责任编辑：夏非彼封面设计：王翔责任校对：闫秀华责任印制：

出版发行：清华大学出版社

网址：http://www.tup.com.cn，http://www.wqbook.com

地址：北京清华大学学研大厦A座邮编：100084

社总机：010-62770175 邮购：010-62786544 投稿与读者服务：010-62776969，[email protected]

质量反馈：010-62772015，[email protected] 印刷者：北京天颖印刷有限公司

经销：全国新华书店

开本：190mm×260mm 印张：33 字数：845千字

版次：2014年6月第1版印次：2014年6月第1次印刷

印数：1~3000 定价：75.00元产品编号：057651-01

(3)

前言

你还在用 Flash吗？“帮主”早不用了

乔布斯生前在公开信《Flash之我见》中预言：像HTML 5这样在移动时代中创立的新标

准，将会在移动设备上获得胜利。

——国际巨头Google、苹果等都支持HTML 5标准，要不要学，你看着办！

BAT三巨头都偷偷用上HTML 5了

HTML 5目前在国内的发展达到了空前的高度，以BAT三大巨头互联网公司为例，它

们都已经争先恐后地将HTML 5的新技术融入到了现实的开发领域中。本书的例子会涉及

WebQQ、一淘网、大众点评网等公司在HTML 5方向的技术运用情况。

——还不知道BAT是谁？太out了，百度、阿里、腾讯，地球上的国人应该都知道吧。

HTML 5做了哪些改变

语义性、本地存储、设备访问、连接性、多媒体、平面和三维效果、性能和集成、CSS 3

是HTML 5技术的核心，本书不光介绍八大特性的理论，重点是通过实战示例让读者精通

它们。

——世界上有八大奇迹，HTML 5也有八大特性。

本书真的适合你吗

本书帮你从HTML 4时代过渡到HTML 5时代；本书提供现实生活中的应用，包括移动应

用和普通PC应用；本书会涉及HTML 5的游戏库、图表库、框架介绍和案例；本书从现实的

表单使用场景出发，解决低版本浏览器的兼容问题；本书介绍各种W3C规范来自什么标准，

用向何处；本书提供多套作者自己实际应用的跨浏览器的原生解决方案。

——怕HTML 5不兼容？没关系，本书给出了优雅降级和各种跨浏览器兼容方案。

本书涉及的技术或框架

Modernizr jQuery Paper.js WebGL SVG WebRTC Socket.IO MVC

Sencha Touch

jQuery Mobile JQ.Mobi

HTML 5 Boilerplate Less Framework Raphael

Highcharts Three.js Sublime Text 2 Node.js

Chrome浏览器调试 Fiddler加速

JSONP JSON Google 地图 Swig模板 Consolidate.js

(4)

HTML 5^{网页开发实例详解}

II

当前天气的APP

新闻阅读列表APP

一个网站的用户增长曲线图

网页中的3D效果

用Node.js搭建Web Server 销售数据图表

带字幕的视频播放器手机定位

可拖放文本阅读器聊天室

排队处理订单离线留言新消息提醒

WebQQ的通讯花开花落的动画 MP3播放器追踪用户位置用浏览器拍照和摄像类iPhone鼠标拖动效果文件拖放上传

桌面提醒工具微博信息实时推送在线代码编辑器预览网页内容手机遥控PPT

响应式新闻阅读列表

本书涉及的示例和案例

本书特点

1. 本书不论是理论知识的介绍，还是实例的开发，都从实际应用角度出发，精心选择开发中的典型例子，讲解细致，分析透彻。

2. 深入浅出、轻松易学，以实例为主线，激发读者的阅读兴趣，让读者能够真正学习到 HTML 5最实用、最前沿的技术。

3. 技术新颖、与时俱进，结合时下最热门的技术，如Node.js、响应式设计、移动开发、

MVC，让读者在学习HTML 5的同时，了解熟识更多相关的世界先进技术。对于一些无法全面讲解的框架，给出了GitHub的详细地址供读者参考。

4. 贴近读者、贴近实际，大量成熟第三方组件和框架的使用和说明，帮助读者快速找到问题的最优解决方案，书中很多实例来自作者工作的大众点评网。

5. 贴心提醒，本书根据需要在各章使用了很多“注意”、“说明”等小栏目，让读者可以在学习过程中可以更轻松地理解相关知识点及概念。

本书读者

● HTML 5开发初学者和前端爱好者

● 前端开发工程师

● 从事后端开发但对前端开发有兴趣的人员

● 想把网站移植到HTML 5技术上来的网页设计人员或站长

● 大中专院校及培训学校的学生

● 从HTML 4向HTML 5过渡的开发人员

本书配套源代码下载地址：http://pan.baidu.com/s/1o6wiaTk，若下载有问题，请电子邮件

联系[email protected]，邮件标题为“求代码，HTML5实例”

作者 2014年1月

II

(5)

第 1 章

HTML 5引发的Web 革命

作为一位长期从事互联网Web开发人员，在经历了早期单一的Web开发，到现今群雄逐鹿的互联网标准时代后，内心肯定迫切需要一项统一的Web标准。HTML 5正是具备担负这一伟大历史使命的最佳候选，

也正是它才能结束这一时代，开辟HTML的新纪元。

从1993年HTML诞生以来，HTML（超文本标记语言）逐渐成长为当今网络应用最广泛的语言，它的易用性、扩张性和与平台无关性成为其在网络技术应用中的杀手锏。但随着移动互联网的发展，原有的技术特性被消耗殆尽，开发成本变得越来越高，技术实现难度越来越大。传统的Web开发似乎正在慢慢从宝座上褪去光环，一点点被蚕食，逐渐沦为一个配角。时间倒回到2004年，一小组人成立了WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组），开始致力于开发HTML 5。2008年HTML 5的第一份草案由伊恩·希克森撰写。直到今日，经历了多年的发展和沉淀，已经初步形成以语义性、本地存储、设备访问、连接性、多媒体、平面和三维效果、性能和集成、CSS 3八大技术特征为一体的新一代HTML。“一次编写，到处部署”这一技术梦想，似乎离我们已经越来越近，Web开发人员的又一个春天即将到来。

在HTML 5的发展过程中，不得不感谢两家公司。第一家是乔布斯的苹果公司，2010年乔布斯公开声明封杀Flash，声称“Flash是为了使用鼠标的PC而设计的，不适用于用手指操作的触屏设备”，在苹果的触屏设备上永远不会出现Flash，这使得当下很多公司把目光移向HTML 5。另外一家是谷歌，它开发和设计了简洁、高效的Web浏览器Google Chrome，并发布了一系列以Gmail、Google Docs为代表的互联网应用，让人们认识到原来Web应用也可以如此的高效和丰富。

HTML 5已经经历了10个年头的发展，但它不是一项新的技术，是对HTML标准的改进和加强，现有的浏览器应用已经越来越多地加入了HTML 5特性，我们有理由相信在下一个10年，它仍旧会带着HTML的基因成为网络霸主，让我们拭目以待。

本章知识点：

● 了解HTML 5

● 认识主流浏览器

● 制作简单的HTML 5页面

● 检测浏览器对HTML 5的支持情况

1.1 你是不是真的了解HTML 5

如果读者认为HTML 5是一项与传统HTML不同，甚至是需要从零开始学习的一项技术，

那就大错特错了。HTML 5并没有完全地颠覆HTML，而是对HTML一部分繁冗的特性进行

简化，对不足的特性进行补足和加强。不用丢掉以前HTML的标签，也不需要重新学习以往

的知识，就可以使用HTML 5。举个简单的例子，将原有的HTML应用升级至HTML 5，只需

要在每个文档的第一行声明“<!DOCTYPE html>”，只有这一种格式，不需要定义不同的

DOCTYPE，这正体现了HTML 5化繁为简的特色。

(17)

2

HTML 5的新特性可以分为八大类，如图1.1所示。

图1.1 HTML 5的八大特性

虽然HTML 5仍处于完善当中，但是绝大部分浏览器已经实现了其中绝大部分特性，

千万不要错过这一技术变革，一起行动起来，成为合格的HTML 5布道者。

1.1.1 通过W3C认识HTML 5的发展史

HTML首次于1993年以因特网草案的形式发布，经历了2.0版本、3.2版本、4.0版本直到 1999年的4.01版本的演化和发展，慢慢由W3C掌握了HTML的标准和规范制定。W3C全称为 World Wide Web Consortium，指的是万维网联盟，于1994年10月创建，致力于实现Web标准化，其中最著名的标准规范包括XML、CSS、HTML等。

HTML经过多年的发展，直到Web 2.0的提出，被重新提到一个新的高度。传统的静态网站慢慢被一些动态网站所替代，其中最著名的技术莫过于Ajax。越来越多的开发者认识到，

通过浏览器也能够实现与PC软件相媲美的应用，此时出现了一大批Web 2.0的网站，如现今

的绝大多数网站，如图1.2所示。

图1.2 Web 2.0网站

(18)

3 Web 2.0虽然美好，但也有其技术的局限性，如多媒体的应用、数据的传输等方面仍然

显得势单力薄，广大的Web开发者期盼出现一个更强的标准，此时HTML 5的出现更像是一

剂强心剂，开发者不需要丢弃以往的开发经验，也不需要重头再开始学习，就可以实现以往

无法实现的功能。据维基百科记录，HTML 5的前身是Web Applications 1.0，该草案在2004年

由WHATWG提出，并于2007年获W3C接纳。之后新成立的HTML 5团队在2008年的1月22日

推出第一份正式草案。从2009年开始，各大浏览器陆续开始支持HTML 5的部分特性，直到

2012年12月17日，W3C宣布HTML 5规范正式定稿，至此HTML 5修成正果。可以通过图1.3了

解整个Web技术变革的时间线。

图1.3 Web技术变革的时间线

虽然HTML 5近两年非常火爆，常常出现在人们的视线中，但任何一项技术从出现到发

展，直到最后被广泛接受都不是一件容易的事情，期间需要度过种种困难，有些甚至已经超越了技术自身的范畴，尤其是在幕后的一些国际互联网巨头，起到了至关重要的作用。

近年来，W3C也开始出现一批国内互联网公司的身影，如2011年1月11日，腾讯公司加

入W3C，将共同参与包括Web APP、HTML 5等新互联网技术标准的研究和制定；2011年9月

25日，百度也加入W3C。越来越多的中国互联网公司正在加入W3C，势必对推动HTML 5的发展，尤其对中国互联网的快速发展起着积极的作用。

1.1.2 HTML 4、XHTML、HTML 5的区别

从HTML历史的发展角度来说，HTML 4、XHTML、HTML 5依次出现，每个都肩负着

自身的使命。

HTML 4出现之前，那是一个书写样式非常痛苦的年代，仅有的部分样式以属性的形式出

现在元素节点上，文档的表现和结构被完全地耦合在一起，1997年出现的HTML 4结束了这一

切，一个可以书写独立样式表，结构和表现相分离的HTML时代从此诞生。不仅如此，HTML 4

还扩展了HTML的脚本、框架、嵌入对象、表格、表单，并且为残疾人提供了访问的可能。

XHTML全称The Extensible HyperText Markup Language，中文名为可扩展超文本置标语言。

其1.0版本在2000年1月26日成为W3C推荐标准。XHTML是一种在HTML 4基础上进行改进和优

化的新语言，它的语法更加简洁、更加严谨。与HTML4相比XHTML有如下区别（只列举部

分）：

● 要求所有的标签都要闭合；

● 要求所有的元素和属性名都必须用小写字母；

● 要求标记必须有合理的嵌套；

● 要求所有属性值必须用单引号或双引号包括。

(19)

(20)

(21)

6

1.1.4 一张图告诉你如何学习HTML 5

HTML 5的学习必须从八大特性开始入手，图1.7给出了八大特性和其他相关的知识要点，可以看出HTML 5覆盖面之广，知识之庞杂。

图1.7 HTML 5的八大特性和相关知识要点

读者可以参考图1.7，通过本书的说明和示例一步步学习HTML 5，体会HTML 5带来的不一样的开发体验。

1.2 浏览器之争

最早的浏览器Mosaic由美国伊利诺州的伊利诺大学的NCSA组织在1993年3月份推出，当时

还只能显示一些简单的图片和图形。1994年网景推出Netscape Navigator给人们多了一种选择。

微软的IE（以下简称IE）推出后，战场烽烟四起，聪明的微软早期让IE通过Windows操作系统

捆绑战略一举击败了网景公司的Netscape Navigator，从而奠定了霸主地位。面对微软的强大危

险，1998年网景公司无奈将Netscape Navigator程序开源，同时成立了非盈利性的“Mozilla基金

(22)

7 会（Mozilla Foundation）”，2002年推出了Firefox。

伴随着微软操作系统的快速普及，IE屡创新高，2004年其市场份额达到历史巅峰93%。

在此期间的2003年，苹果公司发布Safari浏览器。好景不长，从2004年后IE的市场份额一步步

被其他浏览器蚕食，直到2008年，谷歌公司推出Google Chrome浏览器，一路高歌猛进，2012

年5月，Chrome浏览器在全球范围超过IE，一举拿下霸主地位。表1.1罗列了历年主流浏览器

市场份额占比。

表1.1 历年主流浏览器市场份额

浏览器 1994年 1996年 2000年 2004年 2006年 2008年 2009年 2010年 2011年 2012年 Chrome 未出现未出现未出现未出现未出现 0.91% 3.27% 10.25% 21.08% 32.64%

Safari 未出现未出现未出现 0.72% 3.42% 2.7% 3.10% 4.31% 5.33% 7.23%

Opera 未出现未出现 0.13% 0.59% 0.57% 2.7% 2.62% 1.96% 1.84% 1.71%

Mozilla Firefox 未出现未出现 0.07% 3.44% 11.46% 25.49% 30.48% 32.27% 28.20% 23.86%

IE 未出现 7.97% 81.53% 93.25% 83.15% 67.93% 59.7% 51.45% 42.93% 33.32%

Netscape 18% 84.91% 15.94% 0.27% 0.95% 停更停更停更停更停更

Mosaic 68% 停更停更停更停更停更停更停更停更停更

1.2.1 说说这些常见的浏览器

1993年3月，Mosaic的第一个面向普通用户的预览版本发布，同年9月份支持Windows等

操作系统，从此世界上第一个图形接口浏览器诞生，如图1.8是Mosaic浏览器的截图。

图1.8 Mosaic浏览器

1994年12月，Netscape浏览器的1.0版本发布，但当时互联网尚未完全普及，浏览器还属于

一项比较超前的科技，没有走进大众的生活中。Netscape浏览器并没有走多远，当Window 98出

现以后，微软公司将IE与操作系统进行捆绑并免费提供，从此Netscape市场份额开始下降，

终于在1998年的11月将Netscape软件开源，如图1.9为Netscape最后一个版本Netscape 9的截图。

(23)

8

图1.9 Netscape 9浏览器

IE的第一个版本于1995年8月16日发布，从此一个大家最耳熟能详的浏览器诞生了，伴随着Windows操作系统，IE不断成长，目前最新的版本是IE 10，效果如图1.10所示。

图1.10 IE 10浏览器

Mozilla这个单词由Mosaic Killer演变而来，当时的网景公司取这个名字是想让其取代当时世界第一的浏览器Mosaic。2002年Mozilla 1.0正式发布，之后升级缓慢，但2011年由于感

受到Google Chrome强大的压力，加快了升级步伐，从2011年的5.0版本经过快速迭代升级至

2013年最新的Finefox21.0版本，不过市场份额却与升级速度相反，但它确实是一款优秀的浏览器，如图1.11为Firefox 21.0版本的截图。

(24)

9 图1.11 Firefox 21.0

Opera中文名“欧朋”，从1997年正式发布Windows的2.1版本后，一直都是一款相对低调的浏览器，不过近几年由于移动互联网的兴起和“欧朋”较早的进入，“欧朋”这个名字

慢慢被大众所熟知，其优秀的UI设计和高效的性能一直是它多年来不变的特点，如图1.12是

最新版本Opera 12的截图。

图1.12 最新版本Opera 12

(25)

10

Safari是大名鼎鼎的苹果公司开发的浏览器，于2003年发布首个测试版本，Windows操作

系统的首个测试版本于2007年正式发布，不过很可惜，苹果公司于2012年的7月27号停止了

对Windows的更新。相较于之前出现的浏览器，Safari浏览器设计简洁、大方，秉承了苹果一

贯的设计理念，图1.13为Safari 5.1.7的截图。

图1.13 Safari5.1.7截图

最后一个出现的是Google Chrome，该款浏览器几乎集结了以上所有浏览器的特点，

从2008年出现后一路高歌猛进，取得了非常傲人的成绩，同时也成为像笔者一样的Web前

端人员平日开发调试的首选，同时还是本书示例展现的首选浏览器，如图1.14是Chrome

29.0.1530.2的截图。

图1.14 Chrome 29.0.1530.2浏览器

(26)

11 看完了目前世界上主流浏览器的介绍，接着，对比各组浏览器的性能数据（数据来源于网站http://sixrevisions.com），图1.15为JavaScript在各浏览器运行的速度对比，可以看到IE表现非常糟糕。

Firefox Google Chrome

IE Opera Safari

图1.15 JavaScript在各浏览器的运行速度

图1.16为浏览器CSS渲染速度对比，Google Chrome的表现非常突出，已经进入100ms以内。

图1.16 浏览器CSS渲染速度对比

如图1.17为浏览器运行时CPU使用情况对比，还是Google Chrome表现最为出色。

图1.17 浏览器CPU使用情况对比

综合上述数据，Google Chrome表现最佳，IE最糟糕，当然这只是目前为止的数据，期待

未来各种浏览器都有更出色的表现。

1.2.2 浏览器的兼容烦恼与策略

Web前端开发是一项具有挑战性的工作，除了要学会及时自我更新世界流行前端技术知识

外，还要学会应对不同浏览器的挑战。截至目前为止，一般网站需要兼容的浏览器有IE 的6、7、

(27)

12

8、9、10版本、Opera、Mozilla Firefox、Google Chrome、Safari，还有国内基于Trident或Webkit开发的一批浏览器，如遨游浏览器（Maxthon）、360浏览器、世界之窗（^{The world）}、搜狗浏览器、TT浏

览器等，可见，Web前端开发并非表面看起来那么轻松，而是一个相当繁杂的事情。

Trident是微软的视窗操作系统Windows搭载的网页浏览器——IE的排版引擎的名称。WebKit 是一个开源的浏览器引擎，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架开发的。

表1.2列出了各浏览器的内核。

表1.2 主流浏览器核心

IE、遨游、腾讯TT、世界之窗、360浏览器基于Trident内核

Safari、Google Chrome、Camino 基于WebKit内核

Mozilla Firefox、Camino 基于Gecko内核

Opera 基于Presto内核

开发者常见的需要应对的浏览器兼容性分两种：JavaScript和CSS。

（1）JavaScript兼容问题，比如想要获取元素中包含的所有文本内容，不同浏览器获取

方式如下：

// IE浏览器获取方式

document.getElementById('element').innerText = "element text";

// 非IE浏览器获取方式

document.getElementById('element').textContent = "element text ";

（2）CSS浏览器的兼容问题，比如设置元素透明度，不同浏览器的实现方式如下：

// IE浏览器使用滤镜实现

ﬁlter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50) // 非IE浏览器

opacity:0.5

现在的前端开发，已经出现了非常多的框架和类库用于浏览器的兼容问题，比如最常见的jQuery类库，解决获取元素中包含的所有文本内容兼容问题时，可以使用以下语法：

$('#element').text('element text');

平常在书写样式表时，若要使用CSS 3中的各种特效，都需要加上各种前缀让不同的浏

览器得以支持，如实现一个圆角效果代码如下：

border-radius: 3px; /* 圆角，水平半径为3px */

-moz-border-radius: 3px; /* Fierfox浏览器 */

-webkit-border-radius: 3px; /* WebKit核心浏览器 */

-o-border-radius: 3px; /* Opera浏览器 */

笔者推荐一个非常流行的解决方案，使用Less CSS Framework解决书写样式的兼容性问题，以下描述摘自官网：

“LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS既可以在客户端上运行（支持IE 6+，Webkit，Firefox），也可以借助Node.js或者Rhino在服务端运行。”

(28)

13 LESS中国官网地址为http://www.lesscss.net/，读者可以参考网站学习，本书后面也有专门的章节介绍该框架。

1.2.3 给你的浏览器打分

给读者推荐一个HTML 5评测网站，该网站用于测试浏览器支持HTML 5新特性的情况，

评测的总分为500分。按照目前网站的记录，桌面浏览器排行中排在第一的是国内遨游浏览

器4.0版本，分数为476分，桌面浏览器排行如图1.18所示。

图1.18 桌面浏览器HTML 5特性支持

另外，网站还提供了手机浏览器排行榜，如图1.19所示。

图1.19 手机浏览器HTML 5特性支持

通常，用平板电脑浏览网页的频率高于手机，平板电脑上的浏览器排行情况如图1.20

所示。

(29)

14

图1.20 平板电脑浏览器HTML 5特性支持

同时，笔者还测试了本地Google Chrome的HTML 5支持情况，版本为29.0.1541.0，测试

结果分数为473分，评测如图1.21所示。

图1.21 Google Chrome 29.0.1541.0评分

国内很多新兴的浏览器厂家经常用支持HTML 5的评分制造噱头，但是，一款优秀的浏

览器不只能一味求新。在给浏览器评分时，还需要针对于多个方面进行比较，如脚本执行、

页面渲染、安全性、易用性，这些基础功能，尤其在当今，用户经常采用浏览器进行电子购物消费，安全性显得尤其重要。希望国内浏览器厂商能在这方面下更多的功夫，为建设安全的网络平台打下坚固的基石。

1.3 学习制作简单的HTML 5页面

HTML 5有种类丰富的语义结构新标记，除了与块元素有很多相似性外，还拥有自身的

语义行为。在制作一个HTML 5页面时，首先要告知浏览器使用何种HTML或XHTML规范，

在HTML 5出现之前，经常看到冗长的规范语法，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(30)

15 HTML 5简化了这一约定，而且不区分大小写，DOCTYPE如下：

<!DOCTYPE html>

下面先通过一张截图观察简单的HTML 5页面，如图1.22所示。

图1.22 简单的HTML 5 页面

通过一张页面结构示意图查看页面基础构造，如图1.23所示。

图1.23 页面基础构造

页面被分为6个区域，分别为：标题、导航、介绍、主内容、侧边栏、页脚。

（1）页面基础结构代码如下：

01 <!doctype html>

02 <html>

03 <head>

(31)

16

04 <title>简单的HTML 5页面</title>

05 <link rel="stylesheet" href="../css/blog.css" type="text/css" />

06 </head>

07 <body>

08 <header>

09 <h1>HTML 5</h1>

10 </header>

11 <nav></nav>

12 <section class="intro"></section>

13 <section class="mainContent"></section>

14 <aside></aside>

15 <footer></footer>

16 </body>

17 </html>

（2）导航区域可以使用HTML 5或者XHTML结构，一个无序的UL列表，关键是该列表

必须放在nav标签内部，导航列表代码如下：

01 <ul>

02 <li class="selected"><a href="#">博客</a></li>

03 <li><a href="#">关于</a></li>

04 <li><a href="#">联系</a></li>

05 <li class="subscribe"><a href="#">RSS</a></li>

06 </ul>

（3）介绍区域使用了section标签，并添加了名为intro的样式类，同时还在内部添加 header标签，用于表示介绍区域的个体标题，这里可以看出header的用法，除了在整个文档中

使用之外，还能在局部的section区域中使用，介绍区代码如下：

01 <section class="intro">

02 <header>

03 <h2>什么是HTML 5</h2>

04 </header>

05 <p>HTML 5是用于取代1999年所制定的HTML 4.01和XHTML 1.0标准的HTML标准版 06 本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML 5技术。</p>

07 </section>

（4）主内容区同样使用了section标签，由于内容显示的是博客的文本，所以在内部添加

一层article标签的嵌套，代码如下：

01 <section class="mainContent">

02 <article class="blogPost">

03 <header>

04 <h2>HTML 5新标签</h2>

05 <p>

06 时间<time datetime="2013-7-1">2013-7-1</time>

07 作者 <a href="#">小周</a>

08 </p>

09 </header>

10 <p>通过制定如何处理所有HTML元素以及如何从错误中恢复的精确规则，

(32)

17

11 HTML 5改进了互操作性，并减少了开发成本。HTML 5还包含了新的元素，

12 比如：<nav>, <header>, <footer> 以及 <ﬁgure> 等等。</p>

13 </article>

14 </section>

（5）aside标签通常定义主体之外的内容，但是又与附近内容相关，一般会用于填充一

些不同分类的内容，本例使用aside标签制作侧边栏，放置文章分类的标签，代码如下：

01 <aside>

02 <section>

03 <header> <-- 标题 -->

04 <h3>标签</h3>

05 </header>

06 <ul>

07 <li><a href="#">HTML 5</a></li> <-- 分类内容 -->

08 </ul>

09 </section>

10 </aside>

（6）最后一块内容是footer标签所表示的页脚，通常出现在section或者document的尾部，可包含一些与站点或者内容相关的信息，如作者信息、站点导航、友情链接等，本例所用的footer代码如下：

01 <footer> <-- 页面页脚 -->

02 <div>

03 <section id="about"> <-- 关于 -->

04 <header>

05 <h3>关于</h3>

06 </header>

07 <p>关于内容</p>

08 </section>

09 <section id="blogroll"> <-- 友情链接 -->

10 <header>

11 <h3>友情链接</h3>

12 </header>

13 <ul>

14 <li><a href="#">大众点评网</a></li>

15 </ul>

16 </section>

17 <section id="popular"> <-- 相关流行内容 -->

18 <header>

19 <h3>流行</h3>

20 </header>

21 <ul>

22 <li><a href="#">流行内容</a></li>

23 </ul>

24 </section>

25 </div>

26 </footer>

HTML 5的到来使得浏览器更容易实现复杂布局，开发人员可以使用更少的时间去实现

(33)

18

以前的功能，同时可以将节约下来的时间去学习一直被前端开发者忽略的事情，如前端性能优化、前端架构等。

1.3.1 搭建开发HTML 5的浏览器环境

HTML 5是传统HTML的扩展和延伸，所以与传统的开发方式基本相同，笔者在Web开发时，通常有三件工具不可或缺：舒服的编辑器、强大的浏览器和代理工具。

1．舒服的编辑器

在编辑器的选择上，Web前端开发自由度是非常高的，即使是文本文档编辑器也可以

作为Web开发的工具，但是为了提高开发效率，还是要选择一款功能强大且流行的编辑器。

笔者推荐的是近年来席卷前端界的Sublime Text，一款独具个性的高级编辑器，如图1.24是

Sublime Text编辑器的截图。

图1.24 Sublime Text编辑器

Sublime Text支持目前主流的操作系统，如Windows、Mac、Linux，包括32位和64位，同时支持各种流行编程语言的语法高亮、代码补全等。该款编辑器插件相当丰富，同时版本更

新快。非常棒的一点是编辑器右边没有滚动条，取而代之的是代码缩略图。Sublime Text是款

收费软件，不过目前为止可以无限期的使用。

Sublime Text还有更多意想不到的强大功能，读者可以自行下载体验，编辑器下载地址为 http://www.sublimetext.com/3。

2．强大的浏览器

开发调试所使用的浏览器，笔者一般选择Google Chrome，这个在前面已经提过，选择

(34)

19 的原因是该款浏览器出色的脚本执行速度和页面渲染能力，同时还集成了强大的开发调试工

具，如图1.25为该浏览器开发者模式的截图。

图1.25 Google Chrome 浏览器开发模式

3．代理工具

第三样工具是请求代理工具，这里将介绍Windows操作系统上的Fiddler软件，如图1.26

所示。

图1.26 Fiddler软件

虽然Fiddler主要的功能是数据包抓取，不过开发时常常用于请求代理，如图1.27为

Fiddler代理的原理图。

(35)

20

图1.27 Fiddler代理的原理题

接着，举一个代理使用的例子，需求是将大众点评网首页代理到谷歌搜索首页，即将网址http://www.dianping.com代理到http://www.google.com网址上，Fiddler配置如图1.28所示。

图1.28 Fiddler代理配置

在通常的开发情况下，一般不会将整个页面地址代理到另外一个地址上，而是代理一些样式表或者脚本用于本地调试开发。

最基本的开发环境就介绍到这里。Web开发还有很多优秀的工具，可以提高开发速度和

测试效率，比如性能测试方面的DynaTrace Ajax Edition、JavaScript规范工具JSLint、IE测试工

具IETest等等，读者可以根据开发习惯和喜好选择合适的工具。

1.3.2 检测浏览器是否支持HTML 5标签

在开发HTML 5应用时，为了实现浏览器的兼容性，需要对一些不支持新特性的浏览器做优雅降级，目的是为了尽可能使用户体验更加顺畅，这时候就需要对不同的浏览器做功能检测，通常有几种方法可以检测是否支持HTML 5标签，如原生的标签兼容提示、浏览器检测、特征检测等。

1．原生的标签兼容提示

首先看原生标签提示，当浏览器遇到一些无法识别的标签时，只会将其作为一个普通文本节点进行展现，如HTML 5中的canvas标签，下面通过一个简单的实例对比支持与不支持浏

(36)

(37)

22

Agent是HTTP协议中头信息的一部分，用来告诉服务器客户端是什么浏览器，以及操作系统

等的信息。通过分析User Agent获取浏览器的类型和版本信息，对不支持的浏览器采取错误提

示。用浏览器检测这个方案看上去相当完美，不过有几个致命的缺点：

● User Agent可以伪造，很多浏览器支持用户修改User Agent信息。

● 因不断更新的浏览器版本，需要同步更新检测信息。

3．特征检测

最后介绍的一种方案应该是最完美的，一般称为特征检测，即通过判断特定的对象、属性、方法、行为确认功能是否可以使用，下面通过示例介绍该方法的使用，代码如下：

01 <!doctype html>

02 <html>

03 <title>特征检测</title>

04 <body></body>

05 <script>

06 var _canvas = document.createElement('canvas');

07 if (_canvas.getContext) {

08 document.body.innerHTML = '<canvas style="background- color:red"></canvas>';

09 } else {

10 document.body.innerHTML = '该浏览器不支持canvas';

11 };

12 </script>

13 </html>

该段示例运行效果与首段示例“原生标签提示”效果相同。

代码第6行创建一个canvas标签元素，然后在第7行通过获取新创建canvas元素的

getContex属性判断是否存在，当存在该属性时表示浏览器支持canvas元素。特征检测的优势在于，开发者不需要了解浏览器的支持情况，而是通过直接检测特性是否支持。

1.4 常见问题

从HTML 5问世以来，开发者就一直期待新带来的特性能解决以往Web开发中不能逾越的

问题，事实上HTML 5确实解决了开发者很多现实问题，但同时也存在着部分暂时无法实现的功能，如：

● 本地存储数据安全性；

● 性能问题；

● 离线存储同步问题；

● 直播视频。

(38)

23

不过笔者相信，上述的一些问题在不久的将来都将被克服，HTML 5将会出现在一个更

大的舞台上。

1.4.1 学好HTML 5要先学好Java吗

Web开发设计的知识点和技术比较庞杂，很多刚入门的新手对各种知识点的认识和把握不到位，容易引起误会，首先看两种技术的官方解释。

● HTML 5：是用于取代1999年所制定的HTML 4.01和XHTML 1.0标准的HTML标准版本，

用于强化Web网页的表现性能，包括HTML、CSS和JavaScript在内的一套技术组合。

● Java：是个简单、面向对象、分布式、解释性、健壮、安全与系统无关、可移植、高

性能、多线程和动态的语言。Sun Microsystems公司于1995年5月推出，由Java编程语

言、Java类文件格式、Java虚拟机和Java应用程序接口4个方面组成。

通过概念可以看出，学习HTML 5与学习Java没有必要的关联关系。但作为开发人员，

通过学习后端开发语言Java，有助于加深对前端开发的认识，如面向对象、设计模式的应用

等，同时还能知晓完整的Web开发周期所经历的步骤和过程，所以表面上看技术之间千差万

别，但又密不可分。除此之外，前端人员还可以补充如数据库、服务器开发方面的知识，对

日后的日常开发会起到事半功倍的效果。如图1.31给出了前端开发的知识体系。

图1.31 前端开发知识体系题

(39)

24

1.4.2 谁是HTML 5新规则下的牺牲品

从2006年开始，富互联网应用进入如火如荼的白热化战争，各种富应用技术百家争鸣，

如Adobe Flex、JavaFX、SilverLight等，一时之间让开发者不知如何选择。各种常见的富应用如下。

● Adobe Flex：由Macromedia公司在2004年3月发布，基于其专有的Macromedia Flash平台，支持富应用开发和部署的技术组合。

● JavaFX：由Sun公司开发的一种声明性的、静态类型脚本语言，开发富互联网应用程

序。

● SilverLight：融合了微软多种技术的Web呈现技术，提供了一套开发框架，并通过使

用基于向量的图像图层技术，支持任何尺寸图像的无缝整合，对基于ASP.NET、Ajax

在内的Web开发环境实现了无缝连接。

学习任何一门技术都将投入大量的时间和精力，包括笔者在内的多数Web开发人员，急

切需要一种类似于HTML的升级方案。终于，HTML 5的第一份正式草案于2008年1月22日公

布，虽然还不是很完善，且浏览器支持情况不同，但还是让人看到了希望。以JavaScript、

CSS、HTML为基础的三剑客，似乎又将再续辉煌。

与其他的技术相比，HTML 5有自己的优势，如：

● 用户可以不用再安装和更新浏览器上的各种插件。

● 即时的更新，不需要升级安装，只需要刷新网页。

● 跨域设备和平台。

● 公开的标准，由W3C推出。

● 良好的SEO支持，更容易被搜索引擎收纳。

2013年，越来越多的网站开发使用一部分HTML 5技术，相信未来HTML 5会给大家带来更大的想象空间。

1.4.3 HTML 5是否有未来

从HTML 5诞生这日起，笔者就一直认为它的前途将一片光明，由HTML 5作为HTML的一种补足更加的自然、顺畅。

近些年来，业内涌现了一大批使用HTML 5开发的应用，涵盖了视频、游戏等各方面，

下面通过笔者搜寻的一些例子向大家展现HTML 5取得的成就。

游戏Cut The Rope（割绳子），苹果iOS/Android平台上一款非常受欢迎的休闲游戏，如图1.32是该款游戏的网页版，使用HTML 5编写，支持Google Chrome、Safari、Firefox、IE 9+

等。

(40)

25 图1.32 HTML 5版“割绳子”游戏界面

网页版没有触控支持，其他效果与手机上基本没有区别，尤其在Google Chrome浏览器上表现非常出色，游戏网址为http://www.cuttherope.ie/。

再推荐一款HTML 5应用Google Body，展现的是一个3D人体模型，用户可以剥离各个解剖层，放大并定位至感兴趣的部位，单击即可获悉具体解剖结构，或者搜索肌肉、器官、骨骼及更多构造了解详情。（浏览器需支持WebGL），网址为http://www.zygotebody.com/。图 1.33为Google Body应用的截图。

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML 5 Canvas提供硬件 3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化（摘自百度百科）。

图1.33 Google Body应用界面

(41)

26

目前，市面上的HTML 5应用非常丰富，但有很大一部分的应用处于演示阶段，不过在

可以预见的将来HTML 5有无限的可能性，原本单一的浏览器环境正在慢慢变得多元化。同

时，大量高级HTML 5游戏引擎出现，更加丰富了原有Web开发人员的多元性，越来越多开发

者把目光放在HTML 5身上，可以很肯定地说，HTML 5王朝正在崛起，新的帝国正在崛起。

1.4.4 HTML 5在移动应用开发是否有前景

2012年的9月12日，对于HTML 5开发者是一个莫大的打击，Facebook CEO扎克伯格参加了TechCrunch Disrupt大会，接受了阿灵顿（Michael Arrington）的采访，指出可能犯的最大错

误就是“在HTML 5上下赌注太多，在本地程序下注太少。”，之后，美国第二大社交网站

LinkedIn也宣布放弃HTML 5，而改用原生代码来实现，总结起来原因大致如下：

● 应用占内存过大。

● 没有原生应用性能好，如旋转、滚动效果。

● 周边配套调试工具少，优化困难。

在国内，情况更加复杂，网络访问速度成为更大的障碍。虽然，HTML 5有离线缓存，

同时很多大型公司也在优化HTTP协议或者开发更快的新协议，但就目前来说HTML 5离移

动商业化还有一段距离。但是，在HTML 5的身上笔者看到了当年JavaScript的影子。早期的

JavaScript被用在表单验证，后来泛滥为制作漂浮广告等一些微不足道的地方，但俗话说是金

子总会发光，现在的JavaScript已然是浏览器端的霸主，截止目前JavaScript已经是排行前十的

语言，如图1.34为2013年1月份的编程语言排行榜。

图1.34 2013年1月编程语言排行

移动基于原生开发与HTML 5如同当年的PC本地应用之与浏览器。计算机诞生之初，网

络还没有广泛普及，当时的人们使用软盘或者光盘的方式进行大数据传输。随后，互联网的普及与浏览器的出现，打破了操作系统本地应用的神话，越来越多的本地应用被搬上浏览器，浏览器更像是一个即时更新的操作系统。设想一下未来操作系统的样子，在网络速度足够快的环境，所有的数据都将存储在云端，可以通过任何形式的终端共享数据，平日的应用都可以通过浏览器完成，操作系统将变得越来越轻量级，不管在何时、何地都能畅快地进行

分享、办公，也许这个梦想一点也不远，Firefox OS手机已经面市，Chrome Book也在售卖，

大型的公司正在开发更多在线应用，这样的未来还会远吗？

(42)

27

当然，现在的HTML 5还存在诸多的问题，大家对它也是褒贬不一，但是，依托于HTML

的广阔应用，HTML 5作为其功能的补足和扩展，完全有理由相信HTML 5的一部分成熟功

能，将会得到充分的利用。对于年轻一代的开发者来说，HTML 5必然是首选技能。

1.5 本章小结

本章主要讲述了HTML 5的发展史，介绍各个HTML版本的演变，并给出HTML 5特性结

构图。接着，通过不同浏览器的比较，了解HTML 5的支持情况和兼容方案，同时通过示例

展现HTML 5引入的新标签，感受HTML 5带来的简洁特性。本章同时还介绍了作为一位前端

工程师所要具备的技能，帮助大家更好的学习前端知识，最后，解答了学习HTML 5的常见

问题，从技术和终端平台方向帮助大家理清思路，确定目标。

从下一章开始，将具体介绍HTML 5的各种新特性。

HTML 5网页开发实例详解