前言

为什么要写这本书

虽然HTML 5的最终标准还未尘埃落定，但是它正在孕育一场巨大的革命。从技术的角度来讲，HTML 5的出现将是Web开发标准的一次重要飞跃，它不仅能提供更加丰富、强大、炫丽的功能，还将改变互联网的很多方面。HTML 5不会完全取代插件，但的确可以使浏览器无需借助插件就能够实现更多的功能—从位置跟踪到把数据保存到云端。HTML 5的标签将取代那些完成简单任务的插件，而且在某些时候可以开发一些高级的应用。

准确地说，HTML 5将从以下几个方面改变未来的整个互联网世界。

1. 降低插件的重要性

过去，很多功能只能通过插件或者复杂的hack（本地绘图API和本地Socket等）来实现，而HTML 5提供了对这些功能的原生支持。插件的方式存在很多问题：

插件安装可能失败。

插件可以被禁用或屏蔽（例如Apple的iPad就不支持Flash插件）。

插件自身会成为被攻击的对象。

插件不容易与HTML文档的其他部分集成（因为插件边界、剪裁和透明度问题）。

HTML 5解决这些问题的一个办法就是使浏览器原生地支持相关的标签。只需浏览器支持相应的HTML 5标签，如<audio>和<video>等各种标签，不需要任何插件，就可以像使用<img>一样方便地在页面内嵌入音频和视频。

2. 支持动态生成图像

过去，网页中显示的图像来自于直接下载的GIF或JPG图像，而在HTML 5中，图像可能并不是直接来自图像文件，而是由某个canvas（画布）对象临时生成的。利用HTML 5，开发人员可以在JavaScript层针对动态数据进行计算后绘制出各种复杂的图形。另外，目前已经开发出一些针对HTML 5的类似工具，这些工具将进一步提高Web开发人员驾驭图像的能力，随着这些工具的成熟，开发人员也将开发出更多更为专业的复杂图形。

3. 允许Web程序利用本地存储

Web程序其实早就可以利用浏览器端的本地存储空间存储很多信息，比如IE允许最多300个Cookie，最多存储4096字节的内容。不过，要开发真正实用的Web应用，需要更多的存储空间。通过HTML 5，可以实现这种需求。

对于本地存储，开发者可以按照需求随意使用，比如把云服务的应用和数据保存在本地硬盘上，使云应用的交付、安装和部署都非常像传统的应用程序。无论是否连接到互联网，云应用程序都可以照常运行，因为之前已经从服务器上下载了HTML 5应用的JavaScript代码，这部分代码就保存在本地。本地数据库实际上扮演的是智能缓存的角色。

对于游戏开发，可以在本地存储一些情景信息和装备信息，这样可避免每次与服务器建立连接时都要下载这些信息，从而节省下载资料的时间。

4. 简化Web开发的数据提取

从网页中提取过数据的Web开发人员都知道，HTML 5之前的HTML结构除了告诉浏览器数据在哪里之外，几乎不能再提供任何有意义的信息。开发人员需要了解与数据本身有关的信息，以了解这些数据的真正含义。HTML 5中所谓的微格式（microformat）引入了一种新的机制，它在HTML中新增了一些专门的标签，以帮助程序员分析标签中数据的真实含义。

没有人能够预测微格式到底会给网络带来多少改变，但很容易看出，这种新的机制将给Web开发人员带来很多方便，帮助他们开发出更有效率的Web应用。如果有一个好的、标准的方式来表示日期和时间，那么在为网站开发与时间有关的Web程序时，就无需另外编写专门的代码来分析网站访问者可能使用什么时间格式，这样，日历、时间表和日程安排等需要从多个数据源收集时间信息的应用也就变得非常简单了。

5. 支持位置服务

在Web世界里，很多人只知道其IP地址，根本不知道那些数字对应的计算机所处的真实世界是什么样的。比如，过去几乎不可能知道某台计算机所在的地理位置，而现在通过地理位置服务可以很好地解决这个问题。HTML 5允许JavaScript询问浏览器用户的地理位置，比如纬度和经度信息。通常桌面系统不支持这一功能（因为需要有GPS或Wi-Fi），如果终端是智能手机，这个功能就可以发挥作用。

6. 让Web视频播放更流畅

HTML 5中的video元素使Web开发人员很容易把视频内容与网页中的其他内容整合起来，同时也使互联网视频内容越来越丰富，从而使网页成为视频内容的主要发布场所。

毫无疑问，在未来的互联网世界里，HTML 5将对Web开发起到很重要的作用。目前，HTML 5引起了很多Web开发人员的强烈兴趣，越来越多的开发人员开始学习并在实际工作中尝试使用HTML 5，但是目前市场上的相关图书都是以介绍基础理论知识为主，从纯粹实践的角度去讲解HTML 5的书寥寥无几。为了使读者通过实践掌握HTML 5，笔者对HTML 5进行了详细的研究，并收集了一些比较具有代表性的贴近实际工作的案例，在此基础上撰写了本书。希望本书能够为致力于利用HTML 5开发Web应用的读者提供一些参考，使读者对HTML 5有一个比较深入的了解，并能够在未来的互联网开发工作中充分运用这些知识。

本书特色

为了使有一定基础的读者能通过实战的方式进一步学习HTML 5的相关知识，本书以实例为主，同时对每个实例所涉及的重要理论知识进行了精辟的讲解。总体而言，本书有如下几个方面的特色。

1.案例丰富，实践性强

目前HTML 5的应用在国内还处于初级阶段，市面上已经出版的相关图书几乎都以讲解HTML 5的功能和特点为主，也就是以理论为主，从实践的角度去写的书很少，涉及大型实际案例的更是少之又少。HTML 5的功能丰富而强大，掌握了它的基本功能并不代表能自如地将其应用到实际工作中，因为还缺乏一个实战练习的过程。为了弥补上述不足，本书以案例为主，针对HTML 5的每个重要知识点都设计了大型的案例，这些案例不仅实践性极强，而且可以直接在工作中使用。

2.内容详细，讲解透彻

本书的内容非常详细，每个案例的制作步骤都以通俗易懂的语言进行阐述。大部分案例的介绍都按照案例概述、页面显示效果、案例知识点以及代码剖析的顺序，读者在阅读每一个案例时，先获得一个总体印象，然后直观地看到该案例在浏览器中的显示效果，接下来了解案例中所用到的HTML 5的相关知识点，最后通过代码剖析来掌握如何一步步实现HTML 5的某个功能。通过这样一个循序渐进的方式，读者能够更加深入地了解HTML 5的每一个功能点。

3.图文并茂，效果直观

每个案例都配有相应的页面显示效果图，读者在阅读案例代码前可以先通过案例的页面显示效果对案例有个直观的印象，初步了解案例要实现的功能。

4.源码详尽，便于调试

本书所有案例的代码都是笔者亲自调试并运行成功的，读者可以对这些代码进行修改，以观察各种不同效果，并加深对案例代码的理解。

读者对象

本书适合以下读者阅读：

HTML 5用户和爱好者

Web网站设计者以及相关美工人员

Web网站或应用程序的开发者（包括Web前端开发工程师和后端开发工程师）

开设Web设计相关课程的大专院校学生

如何阅读本书

本书全部案例的源代码都是经笔者测试无误的，因此建议读者阅读每个案例的同时在浏览器运行这些源代码并查看运行效果，以便更好地理解这些源代码中的每一个元素、函数或方法的作用。读者也可以向某些Web网站或Web应用程序添加一些调试代码，或者在源代码的基础上进行一些修改或扩展，以便对案例的实现过程以及HTML 5的元素与API有一个比较深入的理解，进而更快地编写出属于自己的HTML 5网站或Web应用程序。

本书附录中介绍了截至2011年7月五大浏览器的最新版（Firefox 5.0、Opera 11.50、Google Chrome 12.0、Safari 5.0以及IE9.0）对HTML 5的支持情况。

勘误和支持

由于笔者水平有限，加之时间仓促，书中难免会出现一些错误或者不准确的地方，恳请读者批评指正。笔者QQ号码为240824399，联系邮箱为240824399@qq.com，欢迎读者通过QQ或E-mail与笔者联系，真诚期待得到读者的反馈。

致谢

感谢机械工业出版社华章公司的编辑杨福川和姜影，感谢杨福川的魄力和远见，感谢姜影的耐心和认真，感谢他们在这半年多的时间中始终支持我的写作，是他们的鼓励和帮助引导我顺利完成全部书稿。

谨以此书献给众多热爱HTML 5的朋友们，以及国内致力于Web网站及Web应用程序开发的全体同行们。

陆凌牛

2011年8月于常州