第1章 HTML 5引发的Web革命 1
1.1 你是不是真的了解HTML5 1
1.1.1 通过W3C认识HTML5的发展史 2
1.1.2 HTML4、XHTML、HTML5的区别 3
1.1.3 什么人应该学HTML5 5
1.1.4 一张图告诉你如何学习HTML5 6
1.2 浏览器之争 6
1.2.1 说说这些常见的浏览器 7
1.2.2 浏览器的兼容烦恼与策略 11
1.2.3 给你的浏览器打分 13
1.3 学习制作简单的HTML5页面 14
1.3.1 搭建开发HTML 5的浏览器环境 18
1.3.2 检测浏览器是否支持HTML 5标签 20
1.4 常见问题 22
1.4.1 学好HTML 5要先学好Java吗 23
1.4.2 谁是HTML 5新规则下的牺牲品 24
1.4.3 HTML 5是否有未来 24
1.4.4 HTML 5在移动应用开发是否有前景 26
1.5 本章小结 27
第2章 HTML 5的整体特性 28
2.1 HTML 5的新元素 28
2.1.1 最新的交互元素——内容交互、菜单交互、状态交互 28
2.1.2 HTML 5页面结构 31
2.1.3 DOCTYPE和字符集 32
2.1.4 其他标签元素 34
2.2 Modernizr库 36
2.2.1 Modernizr库是什么 36
2.2.2 使用Modernizr库提供的方法检测浏览器的各项指标 37
2.3 表单和文件 40
2.3.1 input元素的新增类型 40
2.3.2 input元素新增的公用属性 41
2.3.3 新增表单元素 44
2.3.4 表单新增的验证方法 46
2.3.5 File对象 48
2.3.6 FileSystem接口 50
2.3.7 iQuerv html5Validate HTML 5表单验证插件 55
2.4 图形绘制 57
2.4.1 Canvas是什么 57
2.4.2 什么情况下用Canvas 57
2.4.3 检测浏览器对Canvas的支持情况 58
2.4.4 在页面中加入Canvas 58
2.4.5 SVG是什么 60
2.4.6 SVG的使用 60
2.4.7 WebGL是什么 61
2.4.8 WebGL的使用 61
2.4.9 Paper.js图形库 62
2.5 音频视频 63
2.5.1 音频和视频编码解码器 63
2.5.2 使用脚本控制播放 64
2.5.3 audio元素和video元素的浏览器支持情况 65
2.5.4 音视频的实时通信 66
2.6 地理位置 68
2.6.1 纬度和经度坐标 68
2.6.2 有哪些定位数据 69
2.6.3 怎么保护自己的隐私 70
2.6.4 构建地理位置应用 71
2.7 拖放 73
2.7.1 Datatransfer对象 74
2.7.2 拖放的事件监听 74
2.7.3 带拖放功能的网站 76
2.7.4 构建网页的拖放应用 77
2.8 Web存储 79
2.8.1 设置和获取数据 79
2.8.2 LocalStorage与SessionStorage 80
2.8.3 网站本地存储兼容性方案 82
2.8.4 如何在实际开发中使用本地存储 87
2.9 HTML 5的通信 88
2.9.1 PostMessage API 88
2.9.2 XMLHttpRequest Level 2 91
2.9.3 WebSocket API 93
2.9.4 Socket.IO通信框架介绍 95
2.10 Web Workers 97
2.10.1 与HTML5 Web Workers通信 98
2.10.2 多个JavaScript文件的加载与执行 98
2.10.3 子Web Workers和内嵌Web Workers 98
2.10.4 构建Web Workers应用 99
2.11 离线Web应用 102
2.11.1 离线Web应用相关API 102
2.11.2 Manifest使用介绍 104
2.11.3 使用ApplicationCache API 105
2.11.4 搭建简单的离线应用程序 106
2.12 微数据 109
2.12.1 语义化概念 109
2.12.2 Microdata的前世今生 110
2.12.3 如何使用Mierodata优化网页 111
2.12.4 国内网站如何使用Microdata 113
2.13 HTML 5 Historv 114
2.13.1 HistoryAPI介绍 115
2.13.2 History与Hash 117
2.13.3 什么是MVC 119
2.13.4 主流MVC框架介绍 119
2.14 选择器 120
2.14.1 选择器分类 121
2.14.2 使用选择器操作页面中的元素 123
2.15 CSS 3特性 124
2.15.1 CSS 3带来了什么 124
2.15.2 开放字体格式（WOFF） 125
2.15.3 背景（Backgrounds） 127
2.15.4 文字效果（Text Effects） 129
2.15.5 边框（Border） 130
2.15.6 用户界面（User interface） 132
2.15.7 多列（Multiple Columns） 134
2.15.8 转换（Ttansform） 135
2.15.9 过渡（Transition） 135
2.16 本章小结 136
第3章 HTML 5相关概念和框架 137
3.1 响应式Web设计 137
3.1.1 什么是响应式Web设计 137
3.1.2 流式布局 138
3.1.3 媒体查询 139
3.1.4 Twitter Bootstrap理念 140
3.1.5 Twitter Bootstrap应用 140
3.2 移动JavaScript框架 143
3.2.1 Sencha Touch 143
3.2.2 jQuery Mobile介绍和例子 147
3.2.3 PhoneGap 149
3.2.4 JQ.Mobi 151
3.3 CSS 3 UI框架 153
3.3.1 HTML 5 Boilerplate 153
3.3.2 Less Framework 154
3.4 HTML 5图表库 155
3.4.1 Raphael 155
3.4.2 Highcharts 157
3.5 游戏库——Three.js的使用 159
3.6 本章小结 161
第4章 环境搭建 162
4.1 选择一款编辑器 162
4.1.1 Notepad＋＋编辑器 162
4.1.2 UltraEdit编辑器 163
4.1.3 Sublime Text 2编辑器 163
4.2 Node.js 164
4.2.1 Node.js介绍 164
4.2.2 Node.js安装 165
4.2.3 使用Node.js的NPM 168
4.2.4 如何在Node.js中调试 172
4.2.5 使用Node.js搭建Web Server 175
4.3 jQuery框架 178
4.3.1 jQuery框架简介 178
4.3.2 jQuery常用API 178
4.4 其他实战开发技巧 181
4.4.1 如何在Chrome浏览器调试脚本 181
4.4.2 如何通过Fiddler加速开发 187
4.5 本章小结 189
第5章 HTML 5元素与表单大演练 190
5.1 示例1 创建跨浏览器的HTML 5表单 190
5.1.1 示例效果 190
5.1.2 代码设计 192
5.1.3 代码分析 194
5.1.4 相关知识 195
5.2 示例2 搞定低版本浏览器的兼容性问题 195
5.2.1 示例效果 195
5.2.2 代码设计 197
5.2.3 代码分析 201
5.2.4 相关知识 202
5.3 示例3 创建HTML 5版的注册页面 202
5.3.1 示例效果 202
5.3.2 代码设计 203
5.3.3 代码分析 208
5.3.4 相关知识 209
5.4 示例4 用HTML 5的验证方法验证注册页面 210
5.4.1 示例效果 210
5.4.2 代码设计 211
5.4.3 代码分析 213
5.4.4 相关知识 216
5.5 示例5 搞定输入框自动聚焦问题 217
5.5.1 示例效果 217
5.5.2 代码设计 218
5.5.3 代码分析 219
5.5.4 相关知识 219
5.6 示例6 搞定表单的自动完成 220
5.6.1 示例效果 220
5.6.2 代码设计 220
5.6.3 代码分析 221
5.7 示例7 使用数字微调控件 221
5.7.1 示例效果 221
5.7.2 代码设计 223
5.7.3 代码分析 225
5.7.4 相关知识 226
5.8 示例8 添加滑动控件 227
5.8.1 示例效果 227
5.8.2 代码设计 227
5.8.3 代码分析 229
5.8.4 相关知识 229
5.9 示例9 发送多个文件 230
5.9.1 示例效果 230
5.9.2 代码设计 232
5.9.3 代码分析 234
5.9.4 相关知识 235
5.10 示例10 利用正则表达式创建自定义输入类型 236
5.10.1 示例效果 236
5.10.2 代码设计 237
5.11 示例11 预览上传的图片 238
5.11.1 示例效果 238
5.11.2 代码设计 240
5.11.3 代码分析 241
5.11.4 相关知识 242
5.12 示例12 无刷新异步上传 242
5.12.1 示例效果 242
5.12.2 代码设计 244
5.12.3 代码分析 249
5.12.4 相关知识 250
5.13 示例13 拖曳上传文件 251
5.13.1 示例效果 251
5.13.2 代码设计 252
5.13.3 代码分析 254
第6章 Canvas图画大演练 256
6.1 示例1 绘制图形（矩形和圆形） 256
6.1.1 示例效果 256
6.1.2 代码设计 257
6.1.3 代码分析 259
6.2 示例2 在图形中写字 260
6.2.1 示例效果 260
6.2.2 代码设计 262
6.2.3 代码分析 266
6.3 示例3 在画布中使用渐变色 268
6.3.1 示例效果 268
6.3.2 代码分析 269
6.4 示例4 输出图片文件 270
6.4.1 示例效果 270
6.4.2 代码分析 271
6.5 示例5 操作图片像素 272
6.5.1 示例效果 272
6.5.2 代码分析 274
6.6 示例6 制作动画计时器 276
6.6.1 示例效果 276
6.6.2 代码设计 277
6.6.3 代码分析 281
6.7 示例7 在画布中剪贴图像 282
6.7.1 示例效果 282
6.7.2 代码设计 283
6.7.3 代码分析 286
6.8 示例8 实现相片的360°旋转特效 287
6.8.1 示例效果 287
6.8.2 代码分析 288
6.9 示例9 一个HTML 5版销售数据图表 290
6.9.1 示例效果 290
6.9.2 代码设计 290
6.9.3 代码分析 291
6.10 示例10 制作一个简单动画 292
6.10.1 示例效果 292
6.10.2 代码设计 293
6.10.3 代码分析 295
第7章 音频和视频大演练 297
7.1 示例1 在网页中加入已有的视频 297
7.1.1 示例效果 297
7.1.2 代码分析 298
7.2 示例2 制做在线音频播放器 298
7.2.1 示例效果 298
7.2.2 代码设计 299
7.2.3 代码分析 300
7.3 示例3 做一个自己的视频播放器 301
7.3.1 示例效果 301
7.3.2 代码设计 302
7.3.3 代码分析 303
7.4 示例4 动态显示媒体文件播放时间 304
7.4.1 示例效果 304
7.4.2 代码分析 305
7.5 示例5 解决视频自定义工具条全屏问题 306
7.5.1 示例效果 306
7.5.2 代码分析 306
7.6 示例6 实现一个视频的进度条 308
7.6.1 示例效果 308
7.6.2 代码分析 308
7.7 示例7 给播放器添加快进慢进按钮 310
7.7.1 示例效果 310
7.7.2 代码分析 311
7.8 示例8 处理带字幕的视频 312
7.8.1 示例效果 312
7.8.2 代码分析 312
7.9 示例9 用HTML 5拍照和摄像 313
7.9.1 示例效果 313
7.9.2 代码设计 314
7.9.3 代码分析 316
7.9.4 相关知识 316
第8章 地理位置大演练 317
8.1 示例1 通过IP地址获取地理定位 317
8.1.1 示例效果 317
8.1.2 代码设计 318
8.1.3 代码分析 320
8.1.4 相关知识 321
8.2 示例2 通过Wi-Fi获取地理定位 322
8.2.1 示例效果 322
8.2.2 代码设计 322
8.2.3 代码分析 324
8.2.4 相关知识 325
8.3 示例3 通过GPS获取地理定位 325
8.3.1 示例效果 325
8.3.2 代码设计 326
8.3.3 代码分析 327
8.3.4 相关知识 327
8.4 示例4 手机地理定位 328
8.4.1 示例效果 328
8.4.2 代码分析 329
8.4.3 相关知识 330
8.5 示例5 用户自定义的地理定位 331
8.5.1 示例效果 331
8.5.2 代码设计与分析 333
8.6 示例6 在Google Map显示我在这里 335
8.6.1 示例效果 335
8.6.2 代码设计 336
8.6.3 代码分析 338
8.7 示例7 处理定位错误 339
8.7.1 示例效果 339
8.7.2 代码设计 340
8.7.3 代码分析 342
8.8 示例8 使用Google地图追踪用户的位置 343
8.8.1 示例效果 343
8.8.2 代码设计 345
8.8.3 代码分析 347
8.9 示例9 使用Google地图查找路线 348
8.9.1 示例效果 348
8.9.2 代码设计与分析 351
第9章 拖放大演练 357
9.1 示例1 实现网页元素的拖放 357
9.1.1 示例效果 357
9.1.2 代码设计 358
9.1.3 代码分析 359
9.2 示例2 拖放图标 360
9.2.1 示例效果 360
9.2.2 代码设计 361
9.2.3 代码分析 362
9.3 示例3 设置拖放的效果 363
9.3.1 示例效果 363
9.3.2 代码分析 363
9.4 示例4 对照片进行排序 365
9.4.1 示例效果 365
9.4.2 代码设计 365
9.4.3 代码分析 367
9.4.4 相关知识 368
9.5 示例5 拖放文件 369
9.5.1 示例效果 369
9.5.2 代码设计 369
9.5.3 代码分析 371
9.6 示例6 将商品拖入购物车 371
9.6.1 示例效果 371
9.6.2 代码设计 373
9.6.3 代码分析 375
9.7 示例7 拖放图片保存服务器 376
9.7.1 示例效果 376
9.7.2 代码设计和分析 378
9.8 示例8 拖动脚本文件进行压缩 382
9.8.1 示例效果 382
9.8.2 代码设计 383
9.8.3 代码分析 384
9.9 示例9 可拖放文本阅读器 384
9.9.1 示例效果 384
9.9.2 代码设计 386
9.9.3 代码分析 388
第10章 本地存储大演练 389
10.1 示例1 保存与读取登录用户名与密码 389
10.1.1 示例效果 389
10.1.2 代码设计 390
10.1.3 代码分析 391
10.2 示例2 保存与读取临时数据 392
10.2.1 示例效果 392
10.2.2 代码分析 392
10.3 示例3 使用本地数据库 393
10.3.1 示例效果 393
10.3.2 代码设计和分析 395
10.4 示例4 桌面提醒工具 398
10.4.1 示例效果 398
10.4.2 代码设计和分析 399
10.5 示例5 存储JSON对象 401
10.5.1 示例效果 401
10.5.2 代码设计和分析 402
10.6 示例6 封堵数据泄漏 404
10.6.1 示例效果 404
10.6.2 代码设计 406
10.6.3 代码分析 408
10.7 示例7 存储数据的共享 408
10.7.1 示例效果 408
10.7.2 代码设计和分析 409
10.8 示例8 删除本地缓存 411
10.8.1 示例效果 411
10.8.2 代码设计和分析 412
第11章 HTML 5通信大演练 415
11.1 示例1 微博消息实时推送 415
11.1.1 示例效果 415
11.1.2 代码设计与分析 416
11.2 示例2在线代码编辑器 419
11.2.1 示例效果 419
11.2.2 代码设计与分析 420
11.3 示例3 在iFrame中嵌入可变的编辑器 423
11.3.1 示例效果 423
11.3.2 代码设计与分析 424
11.4 示例4 预览网站内容 427
11.4.1 示例效果 427
11.4.2 代码设计与分析 428
11.5 示例5 定时给客户发消息 431
11.5.1 示例效果 431
11.5.2 代码设计与分析 433
11.6 示例6 通过WebSocket创建聊天室 438
11.6.1 示例效果 438
11.6.2 代码设计与分析 442
第12章 离线Web应用大演练 452
12.1 示例1 使用定时器 452
12.1.1 示例效果 452
12.1.2 代码设计和分析 453
12.2 示例2 排队处理订单 455
12.2.1 示例效果 455
12.2.2 代码设计和分析 456
12.3 示例3 在后台运行JavaScript 459
12.3.1 示例效果 459
12.3.2 代码设计和分析 460
12.4 示例4 开发简单的离线应用 462
12.4.1 示例效果 462
12.4.2 代码设计和分析 463
12.5 示例5 检测网络的当前状态 466
12.5.1 示例效果 466
12.5.2 代码设计和分析 467
12.6 示例6 开发离线留言网页 471
12.6.1 示例效果 471
12.6.2 代码设计 472
12.6.3 代码分析 474
12.7 示例7 添加Geolocation跟踪 475
12.7.1 示例效果 475
12.7.2 代码设计和分析 476
12.8 示例8 设计离线事件处理程序 478
12.8.1 示例效果 478
12.8.2 代码设计和分析 480
第13章 HTML 5手机遥控PPT 483
13.1 控制器页面预览 483
13.2 使用移动设备访问控制器页面 485
13.3 代码设计和分析 487
13.3.1 启动服务器 487
13.3.2 index路由的逻辑规则和对应模板内容 488
13.3.3 handle路由的逻辑规则和对应模板内容 489
13.4 整个实例的流程图 491
13.5 相关知识点 492
13.5.1 Swig模板 492
13.5.2 Consolidate.js库 492
13.6 本章小结 493
第14章 响应式设计之新闻阅读列表设计 494
14.1 原型设计 494
14.2 模块设计 496
14.2.1 视觉模块设计 497
14.2.2 前端模块设计 497
14.2.3 使用Media Queries自适应各种分辨率的客户端 499
14.3 运行效果 500
14.4 本章小结 503
附录A 主流浏览器对HTML 5新特性的支持情况 504
附录B 传统HTML标签及说明 507