第1章HTML 5入门基础 1
1.1 HTML 5概述 1
1.1.1 HTML 5的诞生 1
1.1.2 HTML 5的组织 2
1.1.3 HTML 5的目标 2
1.1.4 HTML 5的浏览器支持情况 4
1.2 HTML的基本结构 5
1.2.1 HTML文档的编写规范 5
1.2.2文档开始标签 7
1.2.3文档头部标签 8
1.2.4文档主体标签 8
1.2.5编写文档的注意事项 8
1.3 HTML 5与HTML4的区别 9
1.3.1语法的改变 9
1.3.2新增的元素和废除的元素 12
1.3.3新增的属性和废除的属性 17
1.4 Flash、Silverlight与HTML 5 20
1.5项目案例:运行HTML 5测试页面 21
1.6习题 22
1.7实践疑难解答 23
1.7.1为什么要使用HTML 5 23
1.7.2 HTML 5的安全问题 25
第2章HTML 5的页面属性和元素 27
2.1 html根元素 27
2.2文档头部元素 29
2.3 HTML 5全局属性 34
2.3.1 hidden属性 35
2.3.2 spellcheck属性 35
2.3.3 contenteditable属性 37
2.3.4 draggable属性 38
2.4结构元素 38
2.4.1 header元素 38
2.4.2 article元素 39
2.4.3 aside元素 40
2.4.4 footer元素 41
2.5交互元素 42
2.5.1 progress元素 42
2.5.2 meter元素 44
2.5.3 details元素和summary元素 45
2.5.4 menu元素 46
2.5.5 command元素 48
2.6文本层次语义元素 49
2.6.1 cite元素 49
2.6.2 mark元素 51
2.6.3 time元素 52
2.7页面节点 53
2.7.1 section元素 53
2.7.2 nav元素 54
2.7.3 hgroup元素 55
2.7.4 address元素 56
2.8分组元素 57
2.8.1 ul元素 58
2.8.2 ol元素 58
2.8.3 dl元素 60
2.9项目案例:设计旅游网站首页 60
2.10习题 68
2.11实践疑难解答 70
2.11.1 command元素无法显示效果 70
2.11.2 HTML 5中如何使用新增加的元素 71
第3章 使用HTML5设计表单 72
3.1传统表单元素 72
3.1.1表单标记 72
3.1.2基本表单元素 75
3.2新增输入类型 76
3.2.1 email类型 76
3.2.2 search类型 77
3.2.3 url类型 78
3.2.4 number类型 79
3.2.5 telephone number类型 81
3.2.6 range类型 83
3.2.7 color类型 84
3.2.8时间日期类型 85
3.3新增表单属性 86
3.3.1 autocomplete属性 87
3.3.2 autofocus属性 88
3.3.3 disabled属性 90
3.3.4 form属性 90
3.3.5 list属性 92
3.3.6 multiple属性 93
3.3.7 min、 max和step属性 94
3.3.8 placeholder属性 95
3.3.9 pattern属性 96
3.3.10 required属性 98
3.3.11 readonly属性 99
3.4新增表单元素 101
3.4.1 datalist元素 101
3.4.2 keygen元素 101
3.4.3 output元素 102
3.4.4 optgroup元素 102
3.5提交时的验证处理 104
3.5.1自动验证 105
3.5.2显示验证 106
3.5.3自定义验证 108
3.5.4取消验证 108
3.6项目案例:设计购物网站注册页面 109
3.7习题 112
3.8实践疑难解答 114
3.8.1如何区分使用method属性的参数值get和post 114
3.8.2 HTML 5在自定义验证时无法显示错误提示信息 115
第4章 基于HTML5的多媒体支持 116
4.1 HTML 5中多媒体的新增特性 116
4.2多媒体的支持条件 116
4.2.1视频和音频编解码器 117
4.2.2支持视频和音频的浏览器 117
4.2.3多媒体的格式 118
4.3在HTML 5中创建视频 119
4.3.1 video元素的属性 119
4.3.2 video元素的方法 121
4.3.3 video元素的事件 122
4.4在HTML 5中创建音频 124
4.4.1 audio元素的属性 124
4.4.2 audio元素的事件 125
4.5项目案例:制作网页视频播放器 126
4.6习题 131
4.7实践疑难解答 133
4.7.1关于video元素方法的问题 133
4.7.2 video元素的事件问题 134
第5章 基于HTML 5的绘图 136
5.1 canvas简介 136
5.1.1 canvas的历史 137
5.1.2 canvas与SVG及VML的差异 137
5.1.3 canvas的简单使用 137
5.2绘制文字 139
5.3绘制简单图形 141
5.3.1绘制矩形 141
5.3.2绘制直线 143
5.3.3绘制三角形 145
5.3.4绘制圆形 147
5.3.5绘制笑脸 149
5.4绘制渐变图形 150
5.4.1绘制线性渐变 150
5.4.2绘制径向渐变 152
5.5绘制变形图形 154
5.5.1保存和恢复状态及输出图像 154
5.5.2坐标变换 157
5.5.3矩阵变换 159
5.6组合多个图形 161
5.7为图形绘制阴影 163
5.8图像的简单操作 165
5.8.1绘制图像 165
5.8.2图像平铺 167
5.8.3图像裁剪和复制 169
5.9项目案例:绘制小车滚动特效 171
5.10习题 174
5.11实践疑难解答 176
第6章 基于HTML 5的文件上传 178
6.1使用file对象选择文件 178
6.1.1选择一个文件 178
6.1.2选择多个文件 181
6.1.3通过类型过滤选择的文件 183
6.1.4通过accept属性过滤选择的文件 185
6.2使用FileReader接口读取文件 188
6.2.1 FileReader接口简介 188
6.2.2使用readAsDataURLO方法预览图片 189
6.2.3使用readAsText()方法读取文本文件内容 191
6.2.4 FileReader接口中的事件 194
6.3文件读取时的错误与异常 197
6.3.1发生错误与异常的条件 197
6.3.2错误代码说明 200
6.4项目案例:多文件上传至服务器 200
6.5习题 207
6.6.实践疑难解答 209
6.6.1 HTML 5中accept属性的使用 209
6.6.2使用readAsDataURL()方法读取文件时的问题 209
第7章HTML5数据存储 211
7.1 Web Storage存储 211
7.1.1 sessionStorage对象 211
7.1.2 localStorage对象 213
7.2数据操作 214
7.2.1保存数据 214
7.2.2读取数据 215
7.2.3清空数据 217
7.2.4遍历数据 219
7.2.5使用JSON对象存取数据 221
7.3 HTML 5数据库 224
7.3.1创建与打开数据库 224
7.3.2执行SQL语句 225
7.3.3数据管理 228
7.4项目案例:实现留言本 233
7.5习题 236
7.6实践疑难解答 237
7.6.1本地存储是否可以代替Cookie 237
7.6.2本地数据存储存在限制 238
第8章HT ML 5的高级应用 239
8.1获取地理位置 239
8.1.1 Geolocation API概述 239
8.1.2 position对象 242
8.1.3使用Google地图锁定当前位置 245
8.2网络通信API 247
8.2.1 postMessage()方法 247
8.2.2跨文档消息传输 247
8.3使用Web Worker处理线程 249
8.3.1 Web Worker概述 250
8.3.2线程中的JavaScript 253
8.3.3使用线程处理JSON对象 254
8.3.4线程嵌套 255
8.4离线应用程序 258
8.4.1离线Web应用程序概述 258
8.4.2 manifest文件 258
8.4.3 applicationCache对象 263
8.5拖放操作 268
8.5.1拖放API 268
8.5.2 dataTransfer对象 270
8.6项目案例:将图片拖放到回收站 272
8.7习题 275
8.8实践疑难解答 278
8.8.1 Opera浏览器如何清除本地缓存 278
8.8.2拖动操作完成后如何显示图片 278
第9章CSS样式和CSS选择器 280
9.1 CSS简介 280
9.1.1 CSS概述 280
9.1.2 CSS发展历史 281
9.1.3 CSS的基本使用 281
9.2 CSS 3选择器概述 283
9.3属性选择器 284
9.3.1 [*=val]属性选择器 284
9.3.2 [att^=val]属性选择器 285
9.3.3 [att$=val]属性选择器 287
9.4伪元素选择器 288
9.4.1 fiirst-line和first-letter选择器 288
9.4.2 before选择器 289
9.4.3 after选择器 291
9.5结构化伪类选择器 291
9.5.1 root选择器 292
9.5.2 not选择器 294
9.5.3 first-child和last-child选择器 295
9.5.4 nth-child(n)和nth-last-child(n)选择器 296
9.5.5 nth-of-type(n)和nth-last-of-type(n)选择器 298
9.5.6 empty选择器 300
9.5.7 target选择器 301
9.6其他选择器 303
9.6.1 UI元素伪类选择器 303
9.6.2兄弟选择器 310
9.7 content属性的简单使用 312
9.8项目案例:控制保龄球显示位置 317
9.9习题 322
9.10实践疑难解答 323
9.10.1 :nth-child和:nth-of-type选择器的区别 323
9.10.2如何在IE7-8下使用CSS 3的伪类选择器 324
第10章 背景、边框和渐变的相关属性 326
10.1背景样式 326
10.1.1 background-size属性 326
10.1.2 background-clip属性 328
10.1.3 background-origin属性 330
10.1.4 background-break属性 332
10.2项目案例1:实现书架效果 333
10.3边框样式 335
10.3.1 border-color属性 335
10.3.2 border-image属性 336
10.3.3 border-radius属性 339
10.4项目案例2:相片背景设置边框 341
10.5渐变 343
10.5.1线性渐变 343
10.5.2径向渐变 347
10.5.3重复渐变 350
10.6项目案例3:设计填充内容效果 351
10.7习题 353
10.8实践疑难解答 354
10.8.1为什么使用border-radius属性无法设置圆角边框 354
10.8.2怎样实现径向渐变非同心圆的效果 355
第11章 盒模型、字体与多列布局 356
11.1完善的盒模型 356
11.1.1 box-sizing属性 356
11.1.2 box-shadow属性 359
11.1.3 overflow-x和overflow-y属性 361
11.1.4 resize属性 363
11.2文本与字体 364
11.2.1 text-shadow属性 364
11.2.2 text-overflow属性 366
11.2.3 word-break属性 368
11.2.4 word-wrap属性 369
11.2.5@font-face属性 371
11.2.6 font-size-adjust属性 374
11.3多列布局 378
11.3.1 columns属性 378
11.3.2 column-width属性 380
11.3.3 column-count属性 381
11.3.4 column-gap属性 382
11.3.5 column-rule属性 384
11.3.6 column-span属性 386
11.3.7 column-fill属性 388
11.4项目案例1:设计相册浏览页面 389
11.5项目案例2:设计精美的多列网页版式 391
11.6习题 395
11.7实践疑难解答 397
11.7.1 input宽度比textarea少2px的问题 397
11.7.2设计一个两行两列的布局版式页面 397
第12章CSS 3的高级应用 399
12.1过渡 399
12.1.1浏览器支持情况 399
12.1.2 transition-duration属性 400
12.1.3 transition-property属性 400
12.1.4 transition-delay属性 401
12.1.5 transition-timing-function属性 402
12.1.6 transition属性 403
12.1.7多个颜色过渡 404
12.2变形 405
12.2.1变形的相关属性 405
12.2.2平移 406
12.2.3缩放 408
12.2.4倾斜 410
12.2.5旋转 411
12.2.6更改变形的原点坐标 413
12.3动画 415
12.3.1关键帧 415
12.3.2动画属性 417
12.3.3图片轮换显示的动画效果 421
12.4项目案例:3D立体效果显示 423
12.5习题 427
12.6实践疑难解答 429
12.6.1 JavaScript中如何设置和获取CSS 3中的属性值 429
12.6.2动画如何循环播放 430
第13章 制作鲜花网站页面 431
13.1鲜花网站简介 431
13.2鲜花首页模块 432
13.2.1结构分析 432
13.2.2设计顶部区域 434
13.2.3设计底部区域 436
13.2.4设计中间区域 437
13.3鲜花列表 442
13.3.1运行效果 442
13.3.2设计列表内容 443
13.4鲜花详细 446
13.4.1运行效果 447
13.4.2设计详细内容 447
13.5购物车 450
13.5.1运行效果 450
13.5.2设计页面内容 451
13.6我的账户 453
13.7用户注册 455
13.8当前位置 457
参考答案 461