第1章 HTML 5引发的 Web革命

1.1你是不是真的了解 HTML

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

1.1.2 HTML 4、XHTML、HTML 5的区别

1.1.3什么人应该学 HTML 5

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

1.2浏览器之争

1.2.1说说这些常见的浏览器

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

1.2.3给你的浏览器打分

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

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

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

1.4常见问题

1.4.1学好 HTML 5要先学好 java吗

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

1.4.3 HTML 5是否有未来

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

1.5本章小结

第2章 HTML 5的整体特性

2.1 HTML 5的新元素

2.1.1最新的交互元素 ——内容交互、菜单交互、状态交互

2.1.2 HTML 5页面结构

2.1.3 DOCTYPE和字符集

2.1.4其他标签元素

2.2 Modernizr库

2.2.1 Modernizr库是什么

2.2.2使用 Modernizr库提供的方法检测浏览器的各项指标

2.3表单和文件

2.3.1 input元素的新增类型

2.3.2 input元素新增的公用属性

2.3.3新增表单元素

2.3.4表单新增的验证方法

2.3.5 File对象

2.3.6 FileSystem接口

2.3.7 jQuery HTML5Validate HTML 5表单验证插件

2.4图形绘制

2.4.1 Canvas是什么

2.4.2什么情况下用 Canvas

2.4.3检测浏览器对 Canvas的支持情况

2.4.4在页面中加入Canvas

2.4.5 SVG是什么

2.4.6 SVG的使用

2.4.7 WebGL是什么

2.4.8 WebGL的使用

2.4.9 Paper.js图形库

2.5音频视频

2.5.1音频和视频编码解码器

2.5.2使用脚本控制播放

2.5.3 audio元素和 video元素的浏览器支持情况

2.5.4音视频的实时通信

2.6地理位置

2.6.1纬度和经度坐标

2.6.2有哪些定位数据

2.6.3怎么保护自己的隐私

2.6.4构建地理位置应用

2.7拖放

2.7.1 Datatransfer对象

2.7.2拖放的事件监听

2.7.3带拖放功能的网站

2.7.4构建网页的拖放应用

2.8 Web存储

2.8.1设置和获取数据

2.8.2 LocalStorage与SessionStorage

2.8.3网站本地存储兼容性方案

2.8.4如何在实际开发中使用本地存储

2.9 HTML 5的通信

2.9.1 PostMessage API

2.9.2 XMLHttpRequest Level

2.9.3 WebSocket API

2.9.4 Socket.IO通信框架介绍

2.10 Web Workers

2.10.1与HTML5 Web Workers通信

2.10.2多个 Javascript文件的加载与执行

2.10.3子Web Workers和内嵌 Web Workers

2.10.4构建 Web Workers应用

2.11离线 Web应用API

2.11.4搭建简单的离线应用程序

2.12微数据

2.12.1语义化概念

2.12.2 Microdata的前世今生

2.12.3如何使用 Microdata优化网页

2.12.4国内网站如何使用 Microdata

2.13 HTML 5 History

2.13.1 History API介绍

2.13.2 History与Hash

2.13.3什么是 MVC

2.13.4主流 MVC框架介绍

2.14选择器

2.14.1选择器分类

2.14.2使用选择器操作页面中的元素

2.15 CSS 3特性

2.15.1 CSS 3带来了什么

2.15.2开放字体格式（ WOFF）

2.15.3背景（ Backgrounds）

2.15.4文字效果（ Text Effects）

2.15.5边框（ Border）

2.15.6用户界面（ User interface）

2.15.7多列（ Multiple Columns）

2.15.8转换（ Transform）

2.15.9过渡（ Transition）

2.16本章小结

第3章 HTML 5相关概念和框架

3.1响应式 Web设计

3.1.1什么是响应式 Web设计

3.1.2流式布局

3.1.3媒体查询

3.1.4 Twitter Bootstrap理念

3.1.5 Twitter Bootstrap应用

3.2移动 JavaScript框架

3.2.1 Sencha Touch

3.2.2 jQuery Mobile介绍和例子

3.2.3 PhoneGap

3.2.4 JQ.Mobi

3.3 CSS3UI框架

3.3.1 HTML 5 Boilerplate

HTML 5网页开发实例详解

3.3.2 Less Framework

3.4 HTML 5图表库

3.4.1 Raphael

3.4.2 Highcharts

3.5游戏库 ——Three.js的使用

3.6本章小结

第4章环境搭建

4.1选择一款编辑器

4.1.1 Notepad++编辑器

4.1.2 UltraEdit编辑器

4.1.3 Sublime Text 2编辑器

4.2 Node.js

4.2.1 Node.js介绍

4.2.2 Node.js安装

4.2.3使用 Node.js的

4.2.4如何在 Node.js中调试

4.2.5使用 Node.js搭建 Web Server

4.3 jQuery框架

4.3.1 jQuery框架简介

4.3.2 jQuery常用

4.4其他实战开发技巧

4.4.1如何在 Chrome浏览器调试脚本

4.4.2如何通过 Fiddler加速开发

4.5本章小结

第5章 HTML 5元素与表单大演练

5.1示例 1创建跨浏览器的 HTML 5表单

5.1.1示例效果

5.1.2代码设计

5.1.3代码分析

5.1.4相关知识

5.2示例 2搞定低版本浏览器的兼容性问题

5.2.1示例效果

5.2.2代码设计

5.2.3代码分析

5.2.4相关知识

5.3示例 3创建 HTML 5版的注册页面

5.3.1示例效果

5.3.2代码设计

5.3.3代码分析

5.3.4相关知识

5.4示例 4用HTML 5的验证方法验证注册页面

5.4.1示例效果

5.4.2代码设计

5.4.3代码分析

5.4.4相关知识

5.5示例 5搞定输入框自动聚焦问题

5.5.1示例效果

5.5.2代码设计

5.5.3代码分析

5.5.4相关知识

5.6示例 6搞定表单的自动完成

5.6.1示例效果

5.6.2代码设计

5.6.3代码分析

5.7示例 7使用数字微调控件

5.7.1示例效果

5.7.2代码设计

5.7.3代码分析

5.7.4相关知识

5.8示例 8添加滑动控件

5.8.1示例效果

5.8.2代码设计

5.8.3代码分析

5.8.4相关知识

5.9示例 9发送多个文件

5.9.1示例效果

5.9.2代码设计

5.9.3代码分析

5.9.4相关知识

5.10示例 10利用正则表达式创建自定义输入类型

5.10.1示例效果

5.10.2代码设计

5.11示例 11预览上传的图片

5.11.1示例效果

5.11.2代码设计

5.11.3代码分析

5.11.4相关知识

5.12示例 12无刷新异步上传

5.12.1示例效果

5.12.2代码设计

5.12.3代码分析

5.12.4相关知识

5.13示例 13拖曳上传文件

5.13.1示例效果

5.13.2代码设计

5.13.3代码分析

第6章 Canvas图画大演练

6.1示例 1绘制图形（矩形和圆形）

6.1.1示例效果

6.1.2代码设计

6.1.3代码分析

6.2示例 2在图形中写字

6.2.1示例效果

6.2.2代码设计

6.2.3代码分析

6.3示例 3在画布中使用渐变色

6.3.1示例效果

6.3.2代码分析

6.4示例 4输出图片文件

6.4.1示例效果

6.4.2代码分析

6.5示例 5操作图片像素

6.5.1示例效果

6.5.2代码分析

6.6示例 6制作动画计时器

6.6.1示例效果

6.6.2代码设计

6.6.3代码分析

6.7示例 7在画布中剪贴图像

6.7.1示例效果

6.7.2代码设计

6.7.3代码分析

6.8示例 8实现相片的 360°旋转特效

6.8.1示例效果

6.8.2代码分析

6.9示例 9一个 HTML 5版销售数据图表

6.9.1示例效果

6.9.2代码设计

6.9.3代码分析

6.10示例 10制作一个简单动画

6.10.1示例效果

6.10.2代码设计

6.10.3代码分析

第7章音频和视频大演练

7.1示例 1在网页中加入已有的视频

7.1.1示例效果

7.1.2代码分析

7.2示例 2制做在线音频播放器

7.2.1示例效果

7.2.2代码设计

7.2.3代码分析

7.3示例 3做一个自己的视频播放器

7.3.1示例效果

7.3.2代码设计

7.3.3代码分析

7.4示例 4动态显示媒体文件播放时间

7.4.1示例效果

7.4.2代码分析

7.5示例 5解决视频自定义工具条全屏问题

7.5.1示例效果

7.5.2代码分析

7.6示例 6实现一个视频的进度条

7.6.1示例效果

7.6.2代码分析

7.7示例 7给播放器添加快进慢进按钮

7.7.1示例效果

7.7.2代码分析

7.8示例 8处理带字幕的视频

7.8.1示例效果

7.8.2代码分析

7.9示例 9用HTML 5拍照和摄像

7.9.1示例效果

7.9.2代码设计

7.9.3代码分析

7.9.4相关知识

第8章地理位置大演练

8.1示例 1通过 IP地址获取地理定位

8.1.1示例效果

8.1.2代码设计

8.1.3代码分析

8.1.4相关知识

8.2示例 2通过 Wi-Fi获取地理定位

8.2.1示例效果

8.2.2代码设计

8.2.3代码分析

8.2.4相关知识

8.3示例 3通过 GPS获取地理定位

8.3.1示例效果

8.3.2代码设计

8.3.3代码分析

8.3.4相关知识

8.4示例 4手机地理定位

8.4.1示例效果

8.4.2代码分析

8.4.3相关知识

8.5示例 5用户自定义的地理定位

8.5.1示例效果

8.5.2代码设计与分析

8.6示例 6在Google Map显示我在这里

8.6.1示例效果

8.6.2代码设计

8.6.3代码分析

8.7示例 7处理定位错误

8.7.1示例效果

8.7.2代码设计

8.7.3代码分析

8.8示例 8使用 Google地图追踪用户的位置

8.8.1示例效果

8.8.2代码设计

8.8.3代码分析

8.9示例 9使用 Google地图查找路线

8.9.1示例效果

8.9.2代码设计与分析

第9章拖放大演练

9.1示例 1实现网页元素的拖放

9.1.1示例效果

9.1.2代码设计

9.1.3代码分析

9.2示例 2拖放图标

9.2.1示例效果

9.2.2代码设计

9.2.3代码分析

9.3示例 3设置拖放的效果

9.3.1示例效果

9.3.2代码分析

9.4示例 4对照片进行排序

9.4.1示例效果

9.4.2代码设计

9.4.3代码分析

9.4.4相关知识

9.5示例 5拖放文件

9.5.1示例效果

9.5.2代码设计

9.5.3代码分析

9.6示例 6将商品拖入购物车

9.6.1示例效果

9.6.2代码设计

9.6.3代码分析

9.7示例 7拖放图片保存服务器

9.7.1示例效果

9.7.2代码设计和分析

9.8示例 8拖动脚本文件进行压缩

9.8.1示例效果

9.8.2代码设计

9.8.3代码分析

9.9示例 9可拖放文本阅读器

9.9.1示例效果

9.9.2代码设计

9.9.3代码分析

第10章本地存储大演练

10.1示例 1保存与读取登录用户名与密码

10.1.1示例效果

10.1.2代码设计

10.1.3代码分析

10.2示例 2保存与读取临时数据

10.2.1示例效果

10.2.2代码分析

10.3示例 3使用本地数据库

10.3.1示例效果

10.3.2代码设计和分析

10.4示例 4桌面提醒工具

10.4.1示例效果

10.4.2代码设计和分析

10.5示例 5存储 JSON对象

10.5.1示例效果

10.5.2代码设计和分析

10.6示例 6封堵数据泄漏

10.6.1示例效果

10.6.2代码设计

10.6.3代码分析

10.7示例 7存储数据的共享

10.7.1示例效果

10.7.2代码设计和分析

10.8示例 8删除本地缓存

10.8.1示例效果

10.8.2代码设计和分析

第11章 HTML 5通信大演练

第12章离线 Web应用大演练

第13章 HTML 5手机遥控 PPT

第14章响应式设计之新闻阅读列表设计

附录 A主流浏览器对 HTML 5新特性的支持情况

附录 B传统 HTML标签及说明

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

　　乔布斯生前在公开信《Flash之我见》中预言：像HTML5这样在移动时代中创立的新标准，将会在移动设备上获得胜利。——国际巨头Google、苹果等都支持HTML5标准，要不要学，你看着办！

　　BAT三巨头都偷偷用上HTML5了

　　HTML5目前在国内的发展达到了空前的高度，以BAT三大巨头互联网公司为例，它们都已经争先恐后地将HTML5的新技术融入到了现实的开发领域中。本书的例子会涉及WebQQ、一淘网、大众点评网等公司在HTML5方向的技术运用情况。

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

　　HTML5做了哪些改变

　　语义性、本地存储、设备访问、连接性、多媒体、平面和三维效果、性能和集成、CSS3是HTML5技术的核心，本书不光介绍八大特性的理论，重点是通过实战示例让读者精通它们。

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

　　本书真的适合你吗

　　本书帮你从HTML4时代过渡到HTML5时代；本书提供现实生活中的应用，包括移动应用和普通PC应用；本书会涉及HTML5的游戏库、图表库、框架介绍和案例；本书从现实的表单使用场景出发，解决低版本浏览器的兼容问题；本书介绍各种W3C规范来自什么标准，用向何处；本书提供多套作者自己实际应用的跨浏览器的原生解决方案。

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

　　本书涉及的技术或框架

　　ModernizrjQueryMobileChrome浏览器调试

　　jQueryJQ.MobiFiddler加速

　　Paper.jsHTML5BoilerplateJSONP

　　WebGLLessFrameworkJSON

　　SVGRaphaelGoogle地图

　　WebRTCHighchartsSwig模板

　　Socket.IOThree.jsConsolidate.js

　　MVCSublimeText2

　　SenchaTouchNode.js

　　本书涉及的示例和案例

　　当前天气的APPWebQQ的通讯

　　新闻阅读列表APP花开花落的动画

　　一个网站的用户增长曲线图MP3播放器

　　网页中的3D效果追踪用户位置

　　用Node.js搭建WebServer用浏览器拍照和摄像

　　销售数据图表类iPhone鼠标拖动效果

　　带字幕的视频播放器文件拖放上传

　　手机定位桌面提醒工具

　　可拖放文本阅读器微博信息实时推送

　　聊天室在线代码编辑器

　　排队处理订单预览网页内容

　　离线留言手机遥控PPT

　　新消息提醒响应式新闻阅读列表

　　本书特点

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

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

　　3.技术新颖、与时俱进，结合时下最热门的技术，如Node.js、响应式设计、移动开发、MVC，让读者在学习HTML5的同时，了解熟识更多相关的世界先进技术。对于一些无法全面讲解的框架，给出了GitHub的详细地址供读者参考。

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

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

　　本书读者

　　●HTML5开发初学者和前端爱好者

　　●前端开发工程师

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

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

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

　　●从HTML4向HTML5过渡的开发人员

　　本书配套源代码下载地址：http://pan.baidu.com/s/1o6wiaTk，若下载有问题，请电子邮件联系booksaga@163.com，邮件标题为“求代码，HTML5实例”

　　作者2014年1月