HTML 5实战PDF电子书下载

第1章 拥抱HTML 5 1

1.1一个简单的HTML5页面 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在HTML5中实现拖放时触发的事件 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 52

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

实例1-3页面分栏实现 6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

实例8-6管理localStorage数据 206

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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