第1章 拥抱HTML 5

1.1一个简单的HTML5页面

1.1.1搭建支持的浏览器环境

1.1.2检测浏览器是否支持HTML 5标记

1.1.3使用HTML 5结构编写一个简单的Web页面

1.2 HTML 5页面的特征

1.2.1应用全新的HTML 5特征结构化元素

1.2.2使用CSS文件美化HTML 5新元素

1.3本章小结

第2章HTML 5中常用的交互元素

2.1内容交互元素

2.1.1 details元素

2.1.2 summary元素

2.2菜单交互元素

2.2.1 menu元素

2.2.2 command元素

2.3状态交互元素

2.3.1 progress元素

2.3.2 meter元素

2.4本章小结

第3章HTML 5中的重要元素

3.1 html根元素

3.2文档元素

3.3脚本

3.4节点

3.4.1 section元素

3.4.2 nav元素

3.4.3 hgroup元素

3.4.4 address元素

3.5分组内容

3.5.1 ul元素

3.5.2 ol元素

3.5.3 dl元素

3.6文本层次语义

3.6.1 time元素

3.6.2 mark元素

3.6.3 cite元素

3.7嵌入内容

3.7.1 img元素

3.7.2 iframe元素

3.7.3 object元素

3.8公共属性

3.8.1 draggable属性

3.8.2 hidden属性

3.8.3 spellcheck属性

3.8.4 contenteditable属性

3.9本章小结

第4章HTML 5中的表单

4.1 input元素的新增类型

4.1.1 email邮件类型

4.1.2 url地址类型

4.1.3 number数字类型

4.1.4 range数字滑动条

4.1.5 date日期类型

4.1.6 search搜索类型

4.2 input元素新增的公用属性

4.2.1 autofocus属性

4.2.2 pattern属性

4.2.3 placeholder属性

4.2.4 required属性

4.3新增表单元素

4.3.1 datalist元素

4.3.2 output元素

4.3.3 keygen元素

4.4表单新增的验证方法和属性

4.4.1 checkValidity显式验证法

4.4.2使用setCustomValidity方法修改提示信息

4.4.3表单的novalidate属性

4.5本章小结

第5章HTML 5中的文件

5.1选择文件

5.1.1选择单个文件

5.1.2选择多个文件

5.1.3使用Blob接口获取文件的类型与大小

5.1.4通过类型过滤选择的文件

5.1.5通过accept属性过滤选择文件的类型

5.2使用FileReader接口读取文件

5.2.1 FileReader接口的方法

5.2.2使用readAsDataURL方法预览图片

5.2.3使用readAsText方法读取文本文件

5.2.4侦听FileReader接口中的事件

5.3使用DataTransfer对象拖放上传图片文件

5.4文件读取时的错误与异常

5.4.1发生错误与异常的条件

5.4.2错误代码说明

5.5本章小结

第6章HTML 5中的视频和音频

6.1多媒体元素基本属性

6.1.1元素格式

6.1.2 width与height属性

6.1.3 controls属性

6.1.4 poster属性

6.1.5 networkState属性

6.1.6 error属性

6.1.7其他属性

6.2多媒体元素常用方法

6.2.1媒体播放时的方法

6.2.2 canPlayType方法

6.3多媒体元素重要事件

6.3.1媒体播放事件

6.3.2 timeupdate事件

6.3.3其他事件

6.4本章小结

第7章HTML 5绘图基础

7.1画布的基础知识

7.1.1 canvas元素的基本用法

7.1.2绘制带边框矩形

7.1.3绘制渐变图形

7.2在画布中使用路径

7.2.1 moveTo与lineTo的用法

7.2.2使用arc方法绘制圆形

7.2.3绘制渐变圆形

7.3对画布中图形的操作

7.3.1变换图形原点坐标

7.3.2组合多个图形

7.3.3添加图形阴影

7.4处理画布中的图像

7.4.1绘制图像

7.4.2平铺图像

7.4.3切割图像

7.4.4处理像素

7.5画布的其他应用

7.5.1绘制文字

7.5.2保存、恢复及输出图形

7.5.3制作简单的动画

7.6本章小结

第8章HTML 5中的数据存储

8.1 Web Storage存储简介

8.1.1 sessionStorage对象

8.1.2 localStorage对象

8.2 localStorage详解

8.2.1清空localStorage数据

8.2.2遍历localStorage数据

8.2.3使用JSON对象存取数据

8.2.4管理localStorage数据

8.3 Web SQL数据库基础

8.3.1打开与创建数据库

8.3.2执行事务

8.3.3插入数据

8.3.4数据管理

8.4本章小结

第9章HTML 5中的离线应用

9.1离线应用程序

9.1.1 manifest文件简介

9.1.2配置IIS服务器

9.1.3离线应用的开发过程

9.2本地缓存的更新及状态检测

9.2.1 updateready事件

9.2.2 update方法

9.2.3 swapCache方法

9.2.4更新本地缓存时触发的其他事件

9.3检测在线状态

9.3.1 onLine属性

9.3.2 online与offline事件

9.3.3离线数据交互应用开发过程

9.4本章小结

第10章HTML 5中的其他应用型API

10.1 Web Sockets API

10.1.1 postMessage方法

10.1.2使用WebSocket传送数据

10.1.3使用WebSocket传送JSON对象

10.2 Geolocation API

10.2.1使用getCurrentPosition方法获取当前地理位置

10.2.2使用Google地图锁定位置

10.3 Web Workers API

10.3.1 Worker对象处理线程

10.3.2使用线程传递JSON对象

10.3.3使用线程嵌套交互数据

10.4本章小结

第11章HTML 5中元素的拖放

11.1拖放基础

11.1.1使用JavaScript代码实现拖放

11.1.2在HTML5中实现拖放时触发的事件

11.2 dataTransfer对象应用详解

11.2.1使用setData与getData方法存入与读取拖放数据

11.2.2使用setDragImage方法设置拖放图标

11.2.3使用effectAllowed与dropEffect属性设置拖放效果

11.3拖放应用实战

11.3.1购物车的实现

11.3.2相册的管理

11.4本章小结

实例1-1检测浏览器是否支持HTML

实例1-2 Hello，World页面的实现

实例1-3页面分栏实现

实例1-4样式化页面实现

实例2-1交互元素﹤details﹥的使用

实例2-2用脚本控制交互元素﹤details﹥的使用

实例2-3交互元素﹤summary﹥与﹤details﹥的结合使用

实例2-4交互元素﹤menu﹥的使用

实例2-5交互元素﹤command﹥与﹤menu﹥的结合使用

实例2-6交互元素﹤progress﹥的使用

实例2-7交互元素﹤meter﹥的使用

实例3-1元素﹤html﹥的使用

实例3-2元素﹤head﹥的使用

实例3-3元素﹤script﹥与﹤noscript﹥的使用

实例3-4元素﹤ol﹥的使用

实例3-5元素﹤mark﹥的使用

实例3-6元素﹤cite﹥的使用

实例3-7公共属性draggable的使用

实例3-8公共属性hidden的使用

实例3-9公共属性spellcheck的使用

实例3-10公共属性contenteditable的使用

实例4-1 email类型的﹤input﹥元素的使用

实例4-2 url类型的﹤input﹥元素的使用

实例4-3 number类型的﹤input﹥元素的使用

实例4-4 range类型的﹤input﹥元素实现颜色选择器

实例4-5 分类展示不同形式的选择日期

实例4-6 search类型的﹤input﹥元素的使用

实例4-7 ﹤input﹥元素中autofocus属性的使用

实例4-8 ﹤input﹥元素中pattern属性的使用

实例4-9 ﹤input﹥元素中placeholder属性的使用

实例4-10 ﹤input﹥元素中required属性的使用

实例4-11 ﹤datalist﹥元素的使用

实例4-12 ﹤output﹥元素的使用

实例4-13 ﹤keygen﹥元素的使用

实例4-14调用表单的checkValidity方法

实例4-15调用表单的setCustomValidity方法

实例4-16表单中novalidate属性的使用

实例5-1选择单个文件上传

实例5-2选择多个文件上传

实例5-3获取上传文件的类型与大小

实例5-4通过类型过滤上传文件

实例5-5通过accept属性过滤上传文件的类型

实例5-6使用readAsDataURL方法预览图片

实例5-7使用readAsText方法读取文本文件

实例5-8展示文件读取时触发事件的先后顺序

实例5-9使用DataTransfer对象拖放上传图片文件

实例6-1使用多媒体元素播放文件

实例6-2设置﹤video﹥元素的大小与样式

实例6-3设置﹤video﹥元素的控制条工具属性

实例6-4设置﹤video﹥元素的poster属性

实例6-5获取﹤video﹥元素networkState属性的返回值

实例6-6获取﹤video﹥元素error属性的返回值

实例6-7自定义﹤video﹥元素控制条工具栏

实例6-8使用canPlayType方法检测浏览器支持媒体类型

实例6-9获取多媒体元素在播放事件中的不同状态

实例6-10通过timeupdate事件动态显示媒体文件播放时间

实例7-1使用﹤canvas﹥元素绘制正方形

实例7-2使用﹤canvas﹥元素绘制带边框的矩形

实例7-3使用﹤canvas﹥元素绘制有渐变色的图形

实例7-4使用moveTo与lineTo方法绘制多条直线

实例7-5使用arc方法绘制多个不同样式的圆形

实例7-6使用﹤canvas﹥元素绘制径向渐变的圆形

实例7-7使用﹤canvas﹥元素移动、缩放、旋转图形

实例7-8使用﹤canvas﹥元素设置多图形组合显示的方式

实例7-9使用﹤canvas﹥元素添加绘制图形阴影

实例7-10使用drawImage方法在画布中绘制图像

实例7-11使用createPattern方法在画布中平铺图像

实例7-12使用clip方法在画布中切割图像

实例7-13使用getImageData与putImageData方法处理图像像素

实例7-14使用fillText与strokeText方法绘制文字

实例7-15 在画布中保存、恢复及输出图形

实例7-16在画布中制作简单的动画

实例8-1使用sessionStorage对象保存与读取临时数据

实例8-2使用localStorage对象保存与读取登录用户名与密码

实例8-3清空localStorage对象保存的全部数据

实例8-4遍历localStorage对象保存的全部数据

实例8-5使用JSON对象存取数据

实例8-6管理localStorage数据

实例8-7使用openDatabase打开与创建数据库

实例8-8使用transaction方法执行事务

实例8-9使用executeSql方法插入记录

实例8-10使用executeSql方法管理数据记录

实例9-1开发一个简单的离线应用

实例9-2监测updateready事件触发

实例9-3使用update方法更新本地缓存

实例9-4使用swapCache方法更新本地缓存

实例9-5检测离线应用在加载过程中触发的事件

实例9-6通过onLine属性检测网络的当前状态

实例9-7通过online与offline事件检测网络的当前状态

实例9-8开发一个离线留言数据交互应用

实例10-1使用postMessage方法实现跨文档传输数据

实例10-2使用WebSocket对象传送数据

实例10-3使用WebSocket传送JSON对象

实例10-4使用getCurrentPosition方法获取出错数据信息

实例10-5使用getCurrentPosition方法获取地理位置信息

实例10-6使用Google地图锁定位置

实例10-7使用Worker对象处理线程

实例10-8使用线程传递JSON对象

实例10-9使用线程嵌套交互数据

实例11-1使用JavaScript代码实现元素拖放

实例11-2元素在拖放过程中触发的事件

实例11-3使用setData与getData方法存入与读取拖放数据

实例11-4使用setDragImage方法设置拖放图标

实例11-5使用effectAllowed与dropEffect属性设置拖放效果

实例11-6使用拖放API将商品拖入购物车

实例11-7使用拖放API将图片拖入回收站