第1章HTML5中新的结构元素 1
1.1初学者“菜谱”:建立HTML5初始文件 1
1.1.1 doctype 2
1.1.2字符编码 2
1.1.3 JavaScript和CSS链接 2
1.1.4语法编写风格 3
1.2这些新元素从何而来 4
1.3初学者“菜谱”:使用header元素建立网站标头 4
1.4初学者“菜谱”:使用hgroup元素组合标题 7
1.5初学者“菜谱”:使用nav元素创建导航 7
1.6中级“菜谱”:使用新article元素 10
1.7中级“菜谱”:使用section元素对内容分组 11
1.8初学者“菜谱”:使用aside标记创建侧边栏 13
1.9初学者“菜谱”:使用footer元素 15
1.10中级“菜谱”:使用HTML5大纲工具验证结构 17
1.11高级“菜谱”:使用所有新标记建立新闻页面 19
1.12高级“菜谱”:使用所有新元素来建立搜索结果页面 23
1.13小结 28
第2章 组合、文本级和重新定义的语义 29
2.1初学者“菜谱”:使用figure和figcaption元素插入图片和图注 29
2.2初学者“菜谱”:使用time元素插入日期和时间 31
2.3初学者“菜谱”:使用details元素创建可伸缩控件 32
2.4初学者“菜谱”:使用address元素提供通信信息 34
2.5初学者“菜谱”:使用mark元素高亮文本 35
2.6初学者“菜谱”:使用s元素显示不准确或不相关的内容 36
2.7现存元素的变化 36
2.7.1 cite元素 37
2.7.2 ol元素 37
2.7.3 dl元素 39
2.7.4 small元素 41
2.7.5 b和strong元素 41
2.7.6 i和em元素 42
2.7.7 abbr元素 42
2.7.8 hr元素 43
2.7.9不复存在的元素 43
2.8初学者“菜谱”:为多个元素添加相同的超链接 43
2.9中级“菜谱”:利用Microdata添加语义信息 44
2.10中级“菜谱”:在HTML5中使用WAI-ARIA 46
2.11高级“菜谱”:编写带有评论的文章页面 48
2.12小结 50
第3章 应对浏览器的HTML5支持 51
3.1初学者“菜谱”:IE支持问题 51
3.1.1利用JavaScript解决HTML5兼容问题 51
3.1.2使CSS兼容 52
3.2模板 52
3.3初学者“菜谱”:HTML5特性检查 53
3.4中级“菜谱”:使用jQuery替代Calendar标记 54
3.5中级“菜谱”:利用Modernizr检查特性 57
3.6 Polyfilling 60
3.7 HTML5验证网站 61
3.8小结 62
第4章CSS3新布局和样式技巧 63
4.1中级“菜谱”:使用CSS3媒介查询(Media Query)建立响应式设计 63
4.1.1合理使用 69
4.1.2目标设备为iPhone和Android手机 69
4.2初学者“菜谱”:使用@font-face进行自定义字体 69
4.2.1文件格式和跨浏览器问题 71
4.2.2字体服务 72
4.3中级“菜谱”:使用CSS渐变和复合背景创建按钮 73
4.4中级“菜谱”:使用变换和过渡以美化网站 76
4.5高级“菜谱”:利用CSS创建动画 81
4.6小结 85
第5章HTML5 Web表单 87
5.1验证 87
5.2 HTML 4输入类型 87
5.3初学者“菜谱”:建立联系人表单 89
5.3.1 input type=“email” 89
5.3.2 input type=“tel” 91
5.3.3 input type=“url” 91
5.4初学者“菜谱”:利用input type=“search”建立搜索表单 92
5.5初学者“菜谱”:建立日历和时间控件 93
5.5.1 input type=“datetime” 93
5.5.2 input type=“datetime-local” 94
5.5.3 input type=“date” 94
5.5.4 input type=“time” 94
5.5.5 input type=“month” 95
5.5.6 input type=“week” 95
5.5.7限定日期和时间 96
5.6初学者“菜谱”:创建数字选择器 96
5.7初学者“菜谱”:创建滑块(无需JavaScript) 97
5.8初学者“菜谱”:创建颜色选择器 98
5.9初学者“菜谱”:使用output元素显示结果 98
5.10初学者“菜谱”:使用占位文字(placeholder) 99
5.11初学者“菜谱”:利用list和datalist完成自动补全功能 100
5.12初学者“菜谱”:使用progress元素跟踪任务完成程度 101
5.13初学者“菜谱”:使用meter元素进行计量 102
5.14初学者“菜谱”:页面载入时跳转到某个form元素 103
5.15 初学者“菜谱”:允许多个条目 104
5.16初学者“菜谱”:利用required属性进行基本验证 105
5.17中级“菜谱”:编写自定义验证规则 105
5.18初学者“菜谱”:限制用户输入 106
5.18.1 step 106
5.18.2 min, max 106
5.18.3 formnovalidate, novalidate 107
5.19中级“菜谱”:自定义表单样式 107
5.20错误消息 109
5.21高级“菜谱”:综合应用以创建注册表单 109
5.22小结 113
第6章Canvas绘图 115
6.1 Canvas介绍 115
6.1.1初始工作 116
6.1.2 X和Y坐标 117
6.2初学者“菜谱”:在Canvas上绘制网格 117
6.3初学者“菜谱”:绘制简单的图形和线段 122
6.3.1绘制长方形或正方形并设置样式 122
6.3.2为图形添加渐变填充 123
6.3.3绘制线段或路径 124
6.4中级“菜谱”:使用路径绘制多边形 126
6.5中级“菜谱”:绘制弧形和圆形 129
6.6初学者“菜谱”:添加文字 129
6.7初学者“菜谱”:绘制图片 130
6.8中级“菜谱”:裁剪图片 131
6.9中级“菜谱”:子图动画 132
6.10高级“菜谱”:为图片添加动画 136
6.11高级“菜谱”:柱形图表动画 139
6.12小结 145
第7章HTML5嵌入视频 147
7.1初学者“菜谱”:使用video元素插入视频 147
7.1.1浏览器和设备支持 148
7.1.2 HTML5和视频编码 148
7.1.3为何我们需要了解编码 149
7.2中级“菜谱”:在所有浏览器中使用视频 150
7.2.1为过时浏览器添加回滚内容 150
7.2.2新的视频属性 153
7.3中级“菜谱”:为视频创建字幕 155
7.4媒体API 159
7.5高级“菜谱”:创建自定义控件 160
7.6小结 168
第8章HTML5嵌入音频 169
8.1初学者“菜谱”:利用audio元素嵌入音频 169
8.2中级“菜谱”:在所有浏览器中使用音频 170
8.3新的音频属性 172
8.3.1 src属性 172
8.3.2 preload属性 172
8.3.3 loop属性 172
8.3.4 autoplay属性 172
8.3.5 controls属性 173
8.4媒体API 174
8.5中级“菜谱”:创建混音器 175
8.6高级“菜谱”:添加流媒体广播 179
8.7小结 187
第9章 修改浏览器历史记录 189
9.1历史记录(History)基础 189
9.2初学者“菜谱”:使用pushState添加历史记录 190
9.3初学者“菜谱”:创建图片查看器 193
9.4中级“菜谱”:在图片查看器中弹出状态 195
9.5初学者“菜谱”:使用replaceState修改历史记录 197
9.6中级“菜谱”:修改页面历史记录 199
9.7高级“菜谱”:使用高级状态数据在页面间传递信息 201
9.8中级“菜谱”:测试历史记录安全性 205
9.9实用库 208
9.10小结 208
第10章Geolocation API位置感知 211
10.1 Geolocation简介 211
10.1.1浏览器兼容性 212
10.1.2获取位置:getCurrent Position 212
10.2初学者“菜谱”:简单使用getCurrent-Position获取当前位置 213
10.3中级“菜谱”:使用getCurrentPosition映射位置 216
10.4中级“菜谱”:使用PositionOptions确定距离 221
10.5高级“菜谱”:使用watchPosition跟随移动中的位置 227
10.6小结 234
第11章 客户端存储 235
11.1客户端存储概要 235
11.1.1数据安全 236
11.1.2键与值:sessionStorage和localStorage 237
11.2初学者“菜谱”:获取和写入会话存储 238
11.3初学者“菜谱”:使用会话存储记录样式 241
11.4中级“菜谱”:使用本地存储保存表单 245
11.5高级“菜谱”:捕获本地存储事件 249
11.6 Web SQL Database API 256
11.7高级“菜谱”:使用Web数据库创建货物列表 259
11.8小结 267
第12章 通信与线程 269
12.1 WebSocket API简介 269
12.2初学者“菜谱”:通过Web Sockets交流 270
12.3通过Web Workers创建线程 274
12.4初学者“菜谱”:创建Web Worker 275
12.5中级“菜谱”:添加双向通信 279
12.6高级“菜谱”:利用共享Web Worker 282
12.7小结 288
第13章HTML5中的浏览器体验 289
13.1拖放API 289
13.2初学者“菜谱”:div间拖放 290
13.3高级“菜谱”:利用事件和dataTransfer 294
13.4应用程序缓存和API 302
13.4.1浏览器缓存安全 303
13.4.2引用清单(Manifest)文件 303
13.5初学者“菜谱”:创建清单文件 303
13.5.1 CACHE 304
13.5.2 FALLBACK 304
13.5.3 NETWORK 305
13.5.4更新缓存 305
13.6初学者“菜谱”:离线使用页面 306
13.7应用缓存API 308
13.8通知(Notifiication)API 309
13.8.1通知权限 310
13.8.2浏览器兼容性 310
13.9初学者“菜谱”:显示简单的通知 311
13.10高级“菜谱”:创建Tweet通知页面 314
13.11小结 322
第14章 使用本地文件 323
14.1 File API介绍 323
14.2初学者“菜谱”:获取文件属性 324
14.3初学者“菜谱”:拖放、处理多个文件 326
14.4 FileReader接口 330
14.5中级“菜谱”:使用readAsDataURL预览图片 331
14.6高级“菜谱”:使用readAsText解析CSV文件 335
14.7 File API扩展规范 342
14.8高级“菜谱”:创建本地文件 344
14.9小结 349
第15章 整合设备数据 351
15.1设备API简史 351
15.2通讯录API 352
15.3初学者“菜谱”:获取所有联系人和手机号码 354
15.4 Messaging API 357
15.5 Network Information API 358
15.6电池状态事件 358
15.7 HTML Media Capture 359
15.8中级“菜谱”:使用File Input捕获图片 359
15.9设备方向和移动事件 363
15.10中级“菜谱”:创建水准仪 364
15.11小结 368