本书由资深Web开发专家亲自执笔，内容的权威性上应该是毋庸置疑的。
本书在内容结构上将继承《jQuery权威指南》一书的优点，几乎每个知识点都将配一个精心设计的案例，以便于读者融会贯通和动手实践，这将是本书区别于现有同类书的一个最大特点。全书一共分为10章，全书以HTML 5的使用环境和基本特征开篇，依次详细地讲解了HTML 5中新增的交互元素、重要元素、表单与文件、视频与音频、绘画、数据存储、离线应用、网络应用和拖放等核心内容。

HTML 5实战
陶国荣　 著
依据HTML 5标准的最新草案撰写，对HTML 5进行了系统、全面、透彻的讲解
106个精心设计的经典案例对各个知识点进行了补充和阐释，理论与实践完美结合
封底：
IT技术的世界永远都是瞬息万变的，几年前，无论是技术界、产业界，还是媒体界，都一致看好RIA技术的发展与前途。但是短短几年之后，HTML 5的出现使这一格局发生了颠覆性的变化。Adobe希望通过收购PhoneGap来延续Flash的生命并实现在HTML 5时代的完美转型，Microsoft则将Silverlight的命运寄托在了Windows Phone身上。
HTML 5的盛行是大势所趋，作为技术人员的你，如果不想被时代所抛弃，建议趁早拥抱HTML 5带来的变革。如果要学习HTML 5，在现有的同类书中，本书应该是一个绝佳的选择。它不仅讲了最新的HTML 5技术，而且内容十分全面，很适合系统地学习。除此之外，本书还有一个很大的特色，几乎每个知识点都配有一个完整的案例，每个案例包括功能描述、实现代码、效果展示和代码分析等几个部分，非常便于读者一边学习一边实践，从而提高学习效率。
—— 51CTO（www.51cto.com）
无论是浏览器厂商，还是大型的互联网企业，都在HTML 5上做了重要的战略部署，能否在HTML 5时代Hold住，也许会决定企业未来的命运。作为技术人员，我们需要掌握的技能永远都要随着市场的需求而变化，HTML 5必将盛行，我们应该未雨绸缪。如何才能又好又快地从宏观和微观上掌握HTML 5的最新技术？本书是一个不错的选择！它内容全面，既适合作为系统学习的教材，又适合在开发时参考。同时，书中提供的106个案例为我们动手实践提供了丰富的素材。强烈推荐！
—— HTML 5用户组　
作者的上一本书《jQuery权威指南》凭借优质的内容和创新性的写作方式而得到了读者的一致好评，并取得了不错的销售成绩，这在原创图书中的确不多见。在内容上，本书在理论和实践上都非常突出，系统全面，实战性强；在写作方式上，本书继承了《jQuery权威指南》的优点，而且一些细节之处还有所改进，相信将进一步提高读者的学习体验。值得期待!
—— HTML51（www.html51.com）
前：
随着各主流浏览器厂商和各大型互联网企业对HTML 5支持力度的不断加大，以及技术应用环境的日益成熟，Web技术正在经历一场新的变革，而这场变革的主角就是HTML 5。HTML 5不仅仅是一次版本的升级，它代表了Web技术发展的新方向，是开发者的未来，是新一代的Web技术标准。它在最大程度上完成了富Web应用的本地化，消除了浏览器对插件的依赖；优秀的错误处理系统，使页面捕获错误更加灵活且高效；对本地离线存储的更好支持，使开发Web离线应用程序更加方便与快捷；众多新增的页面标记，将给用户的视觉与交互带来焕然一新的体验。
本书有3个重要的特点：
第一，实用。全书始终围绕一个“用”字，无论是理论知识的讲解，还是实战案例的设计，无一例外，都从实用的角度出发，由浅入深，逐步推进。
第二，全面。本书详细而完整地介绍了HTML 5的新功能与新特征，同时还包含丰富的使用技巧和最佳实践。
第三，新颖。HTML 5的标准一直在持续不断地更新，本书的内容是根据最新的标准撰写而成的。
作者简介




陶国荣　 资深Web技术专家，有十余年开发经验，是国内较早专业从事Web开发的一线技术人员和培训讲师。一直致力于HTML、JavaScript、CSS、jQuery等Web开发技术的研究和实践，在HTML页面的优化与用户体验的研究领域，以及页面框架搭建、数据流向分析、页面静态优化等方面都拥有丰富的实践经验。自HTML 5的草案发布以来，一直密切关注HTML 5的发展，坚持在实际工作中学习与研究，并进行实践。他还是微软技术方面的专家，精通C#、ASP．NET和SQL Server等技术。
此外，他还是一位知名的技术作家，出版了多部技术著作，其中《jQuery权威指南》是他的代表作之一，这本书凭借过硬的质量和良好的学习体验获得了广大读者的高度评价，并取得了骄人的销售成绩。

为什么要写这本书
　　当今时代，网络应用正处在不断变革中，而作为与应用密切相关的前端技术更是备受瞩目，其中，以HTML 5为代表的新一代技术尤为受到多方的关注，因为HTML 5不仅仅是一次简单的技术升级，更代表了未来Web开发的方向，被寄予了太多的期望与依托。曾有人预言，在不久的将来，不仅仅是Web服务端，就连客户端的开发也将是HTML 5的天下。
　　在2004年，HTML 5的草案被提起，直到2007年才被W3C所接纳，最终于2008年首份草案被公布。　　HTML 5的框架在原版本的基础上，废除了许多HTML 4中不合理的效果标记，创造性地增加了很多用于富媒体、富图形的新标记，最大限度地减少了对外部插件的依赖；同时，通过对本地离线存储方式的优化，使HTML 5更加有利于移动客户端的开发。
　　当然，HTML 5所涉及的新特征与新功能十分广泛，远不能通过简短的几句话进行概括，许多新增加的API或元素属性需要借助相关的书籍来引导开发者进行学习，使其快速掌握HTML 5。但纵观市场中已出版的书籍，绝大多数是简单的定义解析与理论灌输，没有对应的实例操作，缺乏真正的实践指导。为了使广大的Web开发者真正了解与全面掌握HTML 5，笔者撰写了本书。衷心希望读者能通过本书的学习与实践演练，早日开发出更加前沿与时尚的Web应用。
　　“临渊羡鱼，不如退而结网”，每一位从事Web应用开发的工程师，无论是从事前端开发还是服务端的代码开发，都有理由更新自己的知识结构，掌握这一门技术。
本书特点
　　“学以致用”是本书的一个重要特点，全书始终体现一个“用”字，无论是理论知识的介绍，还是实例的开发，无一例外都是从实用的角度出发，每一个实例都是精心选择的，介绍详细；为了使读者能够通过实例执行后的页面效果加深对应用的理解，每一个示意图都精心编排，简明易懂；全书由浅入深，逐步推进，以实例为主线，激发读者的阅读兴趣；全面、详细、完整地介绍HTML 5的新功能与新特征，又是本书的另外一个重要特点。
如何阅读本书
　　本书面向的是Web开发者，不论是前端开发者，还是后台程序员，都可以使用本书。由于本书的结构是层进式的，各章节之间有一定的关联，因此，建议读者按章节的顺序，逐章阅读；在实践时，尽量不要照搬书中的实例，要理解主要的、核心的代码，自己动手开发相似功能的应用，并逐步完善其功能，从而真正掌握代码的实质。
联系作者
　　写作本书耗时半年，其中积累了笔者数年心得与技术感悟。希望本书能给每位阅读过本书的人带来思路上的启发与技术上的提升，使每位读者能够有所悟、有所得。同时，也非常希望能借此机会与国内热衷于HTML 5技术的开发者进行交流。由于本人水平有限，其中难免存在疏漏之处，希望大家批评、指正。大家可以通过邮箱tao_guo_rong@163.com与笔者联系。
　　另外，参加本书编写工作的还有：刘义、李建洲、李静、裴星如、李建勤、陶红英、陈建平、孙文华、孙义、陶林英、闵慎华、孙芳、赵刚。
致谢
　　首先要感谢机械工业出版社华章分社的编辑们，尤其是杨福川与白宇，正是他们在写作过程中的全程指导，才使整个创作思路不断被完善，全书的框架不断被优化，确保了本书顺利完稿。另外，要感谢我的家人，正是他们的理解与默默支持，才使我能够全心写作，顺利完成本书的编写工作。

陶国荣
2011年8月

计算机\程序设计

“学以致用”是本书的一个重要特点，全书始终体现一个“用”字，无论是理论知识的介绍，还是实用示例的开发，无一例外，都是从实用的角度出发，每一个示例都是精心选择，详细介绍；为使读者能够通过示例执行后的页面效果加深对应用的理解，每一个示意图都精心编排，扼要说明；全书由浅入深，逐步推进，以示例为主线，带动与引导读者的阅读兴趣，是本书的特点之一；全面，详细、完整地介绍HTML 5的新功能与新特征，又是本书的另外一个重要特点。

陶国荣 著：内容简介本书由国内资深Web技术专家亲自执笔，4大Web开发社区一致鼎力推荐，权威性毋庸置疑。内容新颖，基于jQuery的最新版本撰写，所有新功能和新特性一览无余；内容全面，不仅讲解了jQuery技术本身的方方面面，而且还包括与jQuery相关的扩展知识；实战性强，不仅每个知识点都配有完整的小案例，而且还有两个综合性的案例。本书不仅能满足读者系统学习理论知识的需求，还能满足需要充分实践的需求。全书一共分为11章，首先以示例的方式对jQuery做了全局性的介绍，以便于为读者建立jQuery的大局观，这对初学者尤为重要；其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括需求分析、代码实现和结果展示三部分）；再接着对jQuery UI和jQuery实用工具函数等扩展知识，以及jQuery的开发技巧与性能优化等方面的重要知识做了详尽的阐述；最后以两个具有代表性的综合案例结束全书，希望能帮助读者将前面所学的理论知识真正贯穿于实践中，迅速进入jQuery的殿堂。

前　　言
第1章　拥抱HTML 5 /1
1.1　一个简单的HTML 5页面 /2
1.1.1　搭建支持的浏览器环境 /2
1.1.2　检测浏览器是否支持HTML 5标记 /2
1.1.3　使用HTML 5结构编写一个简单的Web页面 /4
1.2　HTML 5页面的特征 /6
1.2.1　应用全新的HTML 5特征结构化元素 /6
1.2.2　使用CSS文件美化HTML 5新元素 /9
1.3　本章小结 /10
第2章　HTML 5中常用的交互元素 /11
2.1　内容交互元素 /12
2.1.1　details 元素 /12
2.1.2　summary元素 /16
2.2　菜单交互元素 /17
2.2.1　menu元素 /17
2.2.2　command元素 /20
2.3　状态交互元素 /23
2.3.1　progress元素 /24
2.3.2　meter元素 /26
2.4　本章小结 /28
第3章　HTML 5中的重要元素 /29
3.1　html根元素 /30
3.2　文档元素 /32
3.3　脚本 /34
3.4　节点 /37
3.4.1　section 元素 /37
3.4.2　nav 元素 /38
3.4.3　hgroup 元素 /38
3.4.4　address 元素 /38
3.5　分组内容 /39
3.5.1　ul 元素 /39
3.5.2　ol 元素 /40
3.5.3　dl 元素 /41
3.6　文本层次语义 /42
3.6.1　time 元素 /42
3.6.2　mark 元素 /43
3.6.3　cite 元素 /45
3.7　嵌入内容 /46
3.7.1　img元素 /46
3.7.2　iframe元素 /47
3.7.3　object元素 /48
3.8　公共属性 /48
3.8.1　draggable属性 /48
3.8.2　hidden属性 /50
3.8.3　spellcheck属性 /51
3.8.4　contenteditable属性 /53
3.9　本章小结 /55
第4章　HTML 5中的表单 /57
4.1　input元素的新增类型 /58
4.1.1　email邮件类型 /58
4.1.2　url地址类型 /60
4.1.3　number数字类型 /62
4.1.4　range数字滑动条 /64
4.1.5　date日期类型 /66
4.1.6　search搜索类型 /69
4.2　input元素新增的公用属性 /71
4.2.1　autofocus 属性 /71
4.2.2　pattern 属性 /73
4.2.3　placeholder 属性 /75
4.2.4 　required 属性 /76
4.3　新增表单元素 /78
4.3.1　datalist 元素 /78
4.3.2　output 元素 /80
4.3.3　keygen 元素 /81
4.4　表单新增的验证方法和属性 /83
4.4.1　checkValidity显式验证法 /83
4.4.2　使用setCustomValidity方法修改提示信息 /85
4.4.3　表单的novalidate属性 /87
4.5　本章小结 /89
第5章　HTML 5中的文件 /91
5.1　选择文件 /92
5.1.1　选择单个文件 /92
5.1.2　选择多个文件 /93
5.1.3　使用Blob接口获取文件的类型与大小 /95
5.1.4　通过类型过滤选择的文件 /97
5.1.5　通过accept属性过滤选择文件的类型 /99
5.2　使用FileReader接口读取文件 /101
5.2.1　FileReader 接口的方法 /101
5.2.2　使用 readAsDataURL方法预览图片 /101
5.2.3　使用 readAsText方法读取文本文件 /104
5.2.4　侦听FileReader接口中的事件 /106
5.3　使用DataTransfer对象拖放上传图片文件 /109
5.4　文件读取时的错误与异常 /112
5.4.1　发生错误与异常的条件 /112
5.4.2　错误代码说明 /113
5.5　本章小结 /114
第6章　HTML 5中的视频和音频 /115
6.1　多媒体元素基本属性 /116
6.1.1　元素格式 /116
6.1.2　width与height属性 /117
6.1.3　controls属性 /119
6.1.4 　poster属性 /121
6.1.5　networkState 属性 /122
6.1.6　error 属性 /124
6.1.7　其他属性 /127
6.2　多媒体元素常用方法 /131
6.2.1　媒体播放时的方法 /131
6.2.2　canPlayType 方法 /133
6.3　多媒体元素重要事件 /136
6.3.1　媒体播放事件 /136
6.3.2　timeupdate 事件 /138
6.3.3　其他事件 /140
6.4　本章小结 /141
第7章　HTML 5绘图基础 /143
7.1　画布的基础知识 /144
7.1.1　canvas元素的基本用法 /144
7.1.2　绘制带边框矩形 /146
7.1.3　绘制渐变图形 /148
7.2　在画布中使用路径 /151
7.2.1　moveTo与lineTo的用法 /151
7.2.2　使用arc方法绘制圆形 /153
7.2.3　绘制渐变圆形 /157
7.3　对画布中图形的操作 /160
7.3.1　变换图形原点坐标 /160
7.3.2　组合多个图形 /163
7.3.3　添加图形阴影 /166
7.4　处理画布中的图像 /168
7.4.1　绘制图像 /168
7.4.2　平铺图像 /171
7.4.3　切割图像 /174
7.4.4　处理像素 /176
7.5　画布的其他应用 /179
7.5.1　绘制文字 /179
7.5.2　保存、恢复及输出图形 /182
7.5.3　制作简单的动画 /185
7.6　本章小结 /188
第8章　HTML 5中的数据存储 /189
8.1　Web Storage存储简介 /190
8.1.1　sessionStorage对象 /190
8.1.2　localStorage对象 /192
8.2　localStorage详解 /196
8.2.1　清空localStorage数据 /196
8.2.2　遍历localStorage数据 /199
8.2.3　使用JSON对象存取数据 /202
8.2.4　管理localStorage数据 /205
8.3　Web SQL数据库基础 /210
8.3.1　打开与创建数据库 /210
8.3.2　执行事务 /212
8.3.3　插入数据 /215
8.3.4　数据管理 /218
8.4　本章小结 /225
第9章　HTML 5中的离线应用 /227
9.1　离线应用程序 /228
9.1.1　manifest 文件简介 /228
9.1.2　配置IIS服务器 /229
9.1.3　离线应用的开发过程 /231
9.2　本地缓存的更新及状态检测 /233
9.2.1　updateready事件 /234
9.2.2　update方法 /236
9.2.3　swapCache方法 /239
9.2.4　更新本地缓存时触发的其他事件 /241
9.3　检测在线状态 /244
9.3.1　onLine 属性 /244
9.3.2　online 与offline事件 /246
9.3.3　离线数据交互应用开发过程 /249
9.4　本章小结 /254
第10章　HTML 5中的其他应用型API /255
10.1　Web Sockets API /256
10.1.1　postMessage方法 /256
10.1.2　使用WebSocket 传送数据 /260
10.1.3　使用WebSocket 传送JSON对象 /263
10.2　Geolocation API /267
10.2.1　使用 getCurrentPosition方法获取当前地理位置 /267
10.2.2　使用Google地图锁定位置 /273
10.3　Web Workers API /275
10.3.1　Worker对象处理线程 /276
10.3.2　使用线程传递JSON对象 /279
10.3.3　使用线程嵌套交互数据 /281
10.4　本章小结 /284
第11章　HTML 5中元素的拖放 /285
11.1　拖放基础 /286
11.1.1　使用JavaScript代码实现拖放 /286
11.1.2　在HTML 5中实现拖放时触发的事件 /288
11.2　dataTransfer对象应用详解 /291
11.2.1　使用setData与getData方法存入与读取拖放数据 /292
11.2.2　使用setDragImage方法设置拖放图标 /295
11.2.3　使用effectAllowed与dropEffect属性设置拖放效果 /297
11.3　拖放应用实战 /300
11.3.1　购物车的实现 /300
11.3.2　相册的管理 /304
11.4　本章小结 /307



实 例 目 录
实例1-1　　检测浏览器是否支持HTML 5 /2
实例1-2　　Hello,World页面的实现 /4
实例1-3　　页面分栏实现 /6
实例1-4　　样式化页面实现 /9
实例2-1　　交互元素