没什么难的HTML5完全自学手册

本书作为HTML5网页开发语言的教程，系统地介绍了HTML5的相关知识点。全书共12章，从HTML5的基础知识及其元素的用法开始，后面依次讲解了HTML5的表单与文件API、Canvas绘制图形、音频与视频、本地存储、离线Web应用、地理位置API、通信API、XMLHttpRequest API、Web Workers API等内容。本书内容全面、结构清晰，有助于读者理解相关知识点。全书的每个知识点都结合相应的代码实例，并展示对应的实例效果图，有助于提高读者的编程能力。读者在实际开发过程中可以应用自如，达到学以致用的目的。本书适合网页编程爱好者及从事Web网页开发的相关读者阅读。

刘河飞，曾在多家企业工作，从事JavaWeb开发工作，拥有多年Web开发经验，热爱并长期专注于Web前端学习，现从事Web前端工作，以及HTML5应用的实践。擅长HTML、CSS、Java等开发技术,并能应用这些技术结合数据库开发过大型应用网站。了解W3C标准，掌握DIV CSS页面架构和布局方式，能够熟练应用HTML/CSS/JavaScript技术，开发符合W3C标准的大型网站前端页面。

目 录

第1章 认识HTML5 1
1.1 HTML5的发展历史 1
1.2 HTML5可以做什么 2
1.3 世界知名浏览器厂商对HTML5的支持 3
1.4 如何学习HTML5 3
1.4.1 学习HTML5的资源推荐 3
1.4.2 编写HTML5的软件推荐 4
1.4.3 你的第一个HTML5实例 4
1.4.4 对你的第一个HTML5实例解析 5
第2章 HTML5的与众不同 7
2.1 语法的改变 7
2.1.1 HTML5语法的改变 7
2.1.2 HTML5版本的兼容性 9
2.1.3 标记实例 11
2.2 新增的元素和废除的元素 12
2.2.1 新增的结构元素 12
2.2.2 新增的其他元素 13
2.2.3 新增的input元素类型 22
2.2.4 废除的元素 24
2.3 新增的属性和废除的属性 25
2.3.1 新增的属性 25
2.3.2 废除的属性 41

2.4 全局属性 42
2.5 HTML5新增的事件 50
第3章 HTML5的结构 52
3.1 HTML5新增的主体结构元素 52
3.1.1 article元素 52
3.1.2 aside元素 55
3.1.3 nav元素 58
3.1.4 pubdate元素 60
3.1.5 section元素 61
3.1.6 time元素 63
3.2 HTML5新增的非主体结构元素 64
3.2.1 address元素 64
3.2.2 header元素 65
3.2.3 hgroup元素 67
3.2.4 footer元素 67
3.2.5 main元素 69
3.3 使用HTML5新增的结构元素编排一份网页纲要 70
3.3.1 编排内容区块 70
3.3.2 网页编排实例 75
第4章 HTML5中的表单与文件API 83
4.1 HTML5表单新增属性与input元素类型的变化 83
4.1.1 表单新增属性 84
4.1.2 input元素类型的变化 101
4.2 HTML5中的表单验证 110
4.2.1 自动验证 111
4.2.2 输入域验证 111
4.2.3 取消验证 118
4.2.4 自定义错误提示信息 118
4.3 HTML5表单新增的页面元素 120
4.3.1 新增的figure和figcaption元素 120
4.3.2 新增的details元素 121
4.3.3 新增的mark元素 123
4.3.4 新增的progress元素 124
4.3.5 新增的meter元素 125
4.3.6 新增的dialog元素 126
4.3.7 改良的ol与dl列表 127
4.3.8 改良的a元素 130
4.3.9 加以限制的cite元素 132
4.3.10 重新定义的small元素 133
4.3.11 安全性增强的iframe元素 133
4.3.12 增强的script元素 139
4.4 HTML5中的文件API 144
4.4.1 通过file对象选择文件 145
4.4.2 文件的Blob对象 146
4.4.3 文件的FileReader接口 153
4.4.4 文件的ArrayBuffer与ArrayBufferView对象 160
4.4.5 文件系统API的各种操作 167
4.5 HTML5中的拖放API 200
4.5.1 实现拖放的步骤 200
4.5.2 dataTransfer对象应用详解 201
第5章 HTML5中的canvas绘制图形 207
5.1 canvas概述 207
5.1.1 canvas是什么 207
5.1.2 canvas坐标 208
5.1.3 在页面中放置canvas元素 208
5.2 canvas应用 209
5.2.1 canvas画直线 209
5.2.2 canvas画矩形 217
5.2.3 canvas画圆 218
5.2.4 canvas画圆角矩形 223
5.2.5 擦除canvas画布 224
5.2.6 canvas画曲线 225
5.2.7 使用clip()函数在指定区域绘图 228
5.2.8 绘制自定义图形 229
5.2.9 canvas使用Path2D对象绘制路径 230
5.2.10 canvas绘制文字 232
5.2.11 canvas绘制渐变图形 236
5.2.12 canvas绘制变形图形 239
5.2.13 canvas 给图形绘制阴影 249
5.3 canvas处理图像 251
5.3.1 canvas绘制图像 252
5.3.2 图像平铺 256
5.3.3 图像裁剪 258
5.3.4 像素处理 260
5.3.5 灰度控制 264
5.4 canvas高级功能 265
5.4.1 图形组合 265
5.4.2 图像混合 267
5.4.3 自定义画板 270
5.5 补充知识 272
5.5.1 保存与恢复状态 272
5.5.2 canvas画布的文件保存功能 273
5.5.3 canvas的简单应用实例 274
第6章 HTML5中的音频与视频 280
6.1 HTML5 audio与video概述 280
6.1.1 视频容器 281
6.1.2 音频和视频的编码器与解码器 281
6.1.3 HTML5对audio和video的限制 282
6.1.4 当今浏览器对audio和video元素的支持情况 282
6.2 使用HTML5 audio和video API 283
6.2.1 浏览器支持性检测 283
6.2.2 HTML5页面中播放视频和音频的方法 284
6.2.3 多媒体的属性 286
6.2.4 多媒体的方法 306
6.2.5 多媒体的事件 308
6.2.6 进阶功能——给音频或视频添加字幕 311
6.2.7 构建HTML5音频与视频的开发实例 317
第7章 HTML5本地存储 329
7.1 HTML5 Web Storage 329
7.1.1 Web Storage概述 329
7.1.2 检测浏览器的支持情况 330
7.1.3 Web Storage中的API简介 331
7.1.4 采用Web Storage来存储JSON对象的数据 332
7.1.5 采用Web Storage实现留言本 335
7.2 本地数据库 336
7.2.1 本地数据库的基本概念 336
7.2.2 使用本地数据库API 337
7.2.3 使用本地数据库SQLLite实现Web留言本 339
7.3 indexedDB数据库的使用 341
7.3.1 连接数据库 341
7.3.2 创建对象仓库与索引 344
7.3.3 indexedDB实现保存与获取数据 349
7.3.4 indexedDB数据库中的事务 352
7.3.5 查询数据 354
7.3.6 统计对象仓库中的数据条数 360
第8章 HTML5构建离线Web应用程序 362
8.1 离线Web应用程序 362
8.1.1 离线Web应用程序概述 362
8.1.2 Web应用程序的本地缓存与浏览器的网页缓存的区别 363
8.2 搭建简单的离线Web应用程序 364
8.2.1 缓存文件（.manifest） 364
8.2.2 服务器的配置 365
8.3 浏览器与服务器的交互过程 368

8.4 applicationCache对象 369
8.4.1 update()方法 369
8.4.2 abort()方法 371
8.4.3 swapCache()方法 371
8.4.4 applicationCache对象的事件 372
第9章 HTML5地理位置（Geolocation）API 376
9.1 Geolocation API的基本知识 376
9.1.1 经度和纬度坐标 377
9.1.2 IP地址地理定位 378
9.1.3 GPS地理定位 379
9.1.4 Wi-Fi地理定位 379
9.1.5 手机地理定位 380
9.1.6 用户自定义的地理定位数据 380
9.1.7 取得当前地理位置 380
9.1.8 监视当前地理位置信息 384
9.1.9 停止获取当前用户的地理位置信息 385
9.1.10 position对象 385
9.2 隐私 387
9.2.1 触发隐私保护机制 387
9.2.2 处理用户地理位置信息 387
9.3 HTML5 Geolocation API的应用 388
9.3.1 使用HTML5 Geolocation 构建实时应用 388
9.3.2 Google Maps API 392
9.3.3 在Google地图上显示“我在这里” 394
9.3.4 HTML5 Geolocation API在百度地图中的应用 395
第10章 HTML5通信（Communication）API 398
10.1 跨文档消息传输 398
10.1.1 使用postMessage API 398
10.1.2 跨文档消息传输实例 399
10.2 WebSocket通信 402
10.2.1 WebSocket通信的基本知识 402
10.2.2 使用WebSocket API 402
10.2.3 发送对象 406
第11章 XMLHttpRequest API的应用 408
11.1 利用XMLHttpRequest从服务器端获取二进制数据 408
11.1.1 ArrayBuffer响应数据 409
11.1.2 Blob响应数据 412
11.2 使用XMLHttpRequest发送数据 413
11.2.1 发送字符串数据 413
11.2.2 发送表单数据 415
11.2.3 发送Blob对象 416
11.2.4 发送ArrayBuffer对象 418
11.2.5 上传文件 420
11.3 实现跨域请求数据 422
第12章 HTML5 Web Workers API 424
12.1 HTML5 Web Workers详述 424
12.1.1 Web Workers的基础知识 424
12.1.2 与线程进行数据交互 427
12.1.3 使用HTML5 Web Workers API 429
12.2 HTML5 Web Workers中的线程 432
12.2.1 线程中的函数、变量和类 432
12.2.2 单层嵌套 434
12.2.3 在多个子线程中进行数据交互 436

前  言

用心打造完全针对基础读者的自学手册，让读者用最短的时间、以轻松的方式尽快入门，享受更多的乐趣。
HTML从1993年至今，经历了5代的发展。作为网络语言标准规范，其在计算机的发展上起着举足轻重的作用。起初并没有HTML1，而是1993年IETF的一个草案，并不是成型的标准。两年之后，即1995年，HTML 2.0诞生了。随着万维网的诞生和发展，HTML的发展速度可谓迅猛。1996年，HTML 3.2成为W3C的推荐标准。随后在1997年和1999年，HTML 4.0成为W3C的推荐标准。HTML4阶段持续了10年左右，在诸多人员的努力下，终于诞生了我们现在使用的HTML5。HTML5在前几代的基础上进行了重大的修改，使其在当今互联网上的应用非常广泛。HTML5继承了原来HTML的功能，在不破坏之前标准的前提下增加了很多属性。2014年该标准规范终于制定完成。
近年来，Web前端技术的发展如日中天，而领衔这一领域发展的HTML5功不可没。HTML5从根本上改变了开发商开发Web应用程序的方式，从桌面浏览器到移动应用，这种语言和标准正在影响着各种操作平台。随着移动应用领域的不断普及，市场越来越大，对基于移动应用平台开发的需求也日益增多。大家争论不休的一个问题就是开发Web应用还是原生应用?而随着HTML5标准的发展，两者之间的差异已经逐渐变得模糊，今天各大媒体都争相报道与HTML5有关的内容。那么，HTML5未来的发展趋势到底是什么?下面来说一下笔者眼中HTML5的未来市场。
1．移动优先
在大数据时代，移动设备剧增，对移动应用的需求日益增多。尤其是手机已经成为人们生活中非常重要的一部分，很大一部分人的生活已经离不开手机。移动优先已经成为发展趋势，与此同时，人们对移动应用的需求也越来越多、要求也越来越高。这些应用极大地方便了人们的生活。所以未来HTML5会优先发展移动应用。而当今，一、二线城市企业在招聘前端工程师的时候已经明确提出了对HTML5的技能要求。HTML5功能强大，开发的产品友好，在企业级开发中表现出色，越来越受到企业的欢迎。这无疑有助于开拓HTML5的市场。
2．游戏开发
现如今，游戏开发可谓IT行业中的翘楚，尤其是手游市场。传统的手游开发需要在两种主流的系统上运行，即iOS和Android（当然还有其他手机系统），但是在iOS上开发收费游戏时就有局限性了，必须向苹果公司付费，每一单都需要有一定的提成。而用HTML5开发Web应用就可以巧妙地避开这一提成。可以说HTML5的这一强大优势无疑成为开发商获益的途径之一。
3．响应式设计和兼容性
在HTML5改变移动平台开发前，必须迈出重要一步，那就是解决“响应式设计和兼容性”问题。如今，移动设备的屏幕尺寸让开发者眼花缭乱，如何让开发出的应用软件能够自适应不同尺寸的屏幕已成为急需解决的问题。要想做好响应式设计并非一件易事。这时就需要HTML5洞悉内容与屏幕之间的反馈关系，响应式设计要完全脱离“流”，转而注重内容是如何在网页和移动设备中被处理的。这一过程还在继续，随着HTML5的不断发展，终会让功能越来越完善，界面更加友好。
4．设备访问
消除Web应用与原生应用界限的最大障碍就是浏览器访问移动设备基本特性的能力，如照相机、通讯录、加速器等，HTML5的推动者正在努力完善HTML5以实现此功能。对许多移动开发商来说，提高设备访问能力是HTML5最令人激动的革新，这意味着Web应用能够登陆移动设备而无须做任何PhoneGap打包。游戏开发商当然最开心，因为某些特性对他们来说是封锁的，比如，能整合到游戏中的加速器。这就开启了另一个可能的世界，比如，能与云更好地整合并提高游戏可玩性。有了HTML5这个平台，开发商可以不再依赖Java、CSS3、HTML及其他程序语言。
5．离线缓存
所谓离线缓存，就是在离线的情况下，Web应用还可以正常运行。传统意义上的Web应用需要依赖网络，而HTML5的离线缓存可以冲破这道束缚。利用离线缓存技术，可以在离线情况下正常使用Web应用。目前已有相关产品实现了这种功能。
对于HTML爱好者来说，这本书非常适合，其中包含了当前极其全面的学习资源。本书通过对官网上的在线文档、博客及相关书籍进行收集和整理，同时结合笔者在软件开发中的编程经验，将有关HTML5的零碎知识点组织成系统化的概念和技术分类来进行讲解。
本书共12章，从最基础的知识开始讲解，让从未接触过计算机的读者也能在读完此书后对HTML5有较为深刻的理解，并为其强大的功能深深折服。全书采用从易到难、循序渐进的方式进行讲解，内容几乎涉及当今HTML应用的各个方面。第1～6章介绍HTML5基础，此部分内容可以让初学者在短时间内对HTML5有一个整体的感知；第7章主要讲解本地存储，涉及数据库，为后续Web开发奠定基础；第8章主要讲解HTML5在Web开发方面的应用；第9～12章介绍了HTML5的各种API，这对有一定开发基础的HTML爱好者来说是必备的技能，在以后的开发工作中会多次用到，读者不需要刻意记忆这些API，用到时查阅即可。
本书的读者对象
?    对HTML5感兴趣的初学者。
?    有一定Web前端技术基础的读者。
?    从事HTML5前端开发的人员。
?    想使用HTML5做一些小产品的开发人员。
?    想自学HTML5的编程爱好者。
?    大中专院校的学生。