第 一部分 HTML5实战
第 1章 HTML5简介 3
1．1 HTML、XHTML和HTML5 3
1．1．1 HTML和XHTML 3
1．1．2 HTML5 4
1．2 学前准备 7
1．3 本章练习 8
第 2章 新增元素 9
2．1 结构元素 9
2．1．1 header元素 9
2．1．2 nav元素 12
2．1．3 article元素 13
2．1．4 aside元素 14
2．1．5 section元素 14
2．1．6 footer元素 14
2．2 表单元素 15
2．2．1 新增input元素类型 15
2．2．2 新增其他表单元素 26
2．3 其他新增元素 29
2．3．1 address元素 29
2．3．2 time元素 31
2．3．3 progress元素 32
2．3．4 meter元素 34
2．3．5 figure和figcaption元素 34
2．3．6 fieldset和legend元素 35
2．4 改良后的元素 36
2．4．1 a元素 36
2．4．2 ol元素 37
2．4．3 small元素 38
2．4．4 script元素 39
2．5 本章练习 40
第3章 新增属性 42
3．1 公共属性 42
3．1．1 hidden属性 42
3．1．2 draggable属性 43
3．1．3 contenteditable属性 44
3．1．4 data-*属性 45
3．2 input元素的新增属性 47
3．2．1 autocomplete属性 47
3．2．2 autofocus属性 48
3．2．3 placeholder属性 49
3．2．4 required属性 50
3．2．5 pattern属性 51
3．3 form元素的新增属性 52
3．4 本章练习 54
第4章 元素拖放 56
4．1 元素拖放简介 56
4．2 dataTransfer对象 58
4．2．1 dataTransfer对象简介 58
4．2．2 dataTransfer对象应用 59
4．3 本章练习 62
第5章 文件操作 63
5．1 文件操作简介 63
5．2 File对象 68
5．3 FileReader对象 70
5．4 Blob对象 77
5．5 本章练习 81
第6章 本地存储 83
6．1 本地存储简介 83
6．2 localStorage 84
6．3 sessionStorage 88
6．4 indexedDB 90
6．4．1 操作“数据库” 91
6．4．2 操作“对象仓库” 94
6．4．3 增删查改 97
6．5 实战题：计数器 107
6．6 本章练习 108
第7章 音频视频 109
7．1 视频音频简介 109
7．1．1 Flash时代的逝去 109
7．1．2 HTML5时代的来临 110
7．2 开发视频 110
7．2．1 video元素 110
7．2．2 视频格式 112
7．2．3 自定义视频 113
7．3 开发音频 122
7．3．1 audio元素 122
7．3．2 音频格式 123
7．3．3 自定义音频 124
7．4 本章练习 125
第8章 离线应用 126
8．1 搭建服务器环境 126
8．2 离线存储 128
8．3 更新缓存 131
8．4 本章练习 132
第9章 多线程处理 133
9．1 Web Worker简介 133
9．2 Web Worker应用 135
9．3 实战题：后台计算 137
9．4 本章练习 138
第 10章 地理位置 139
10．1 地理位置简介 139
10．1．1 getCurrentPosition()方法 139
10．1．2 watchPosition()方法 143
10．1．3 clearWatch()方法 145
10．2 百度地图 147
10．2．1 API简介 147
10．2．2 API应用 151
10．3 本章练习 152
第 11章 桌面通知 153
11．1 Notification API简介 153
11．2 Notification API应用 155
11．3 本章练习 157
第 12章 Canvas 158
12．1 Canvas是什么 158
12．1．1 Canvas简介 158
12．1．2 Canvas与SVG 160
12．2 Canvas元素 160
12．2．1 Canvas元素 161
12．2．2 Canvas对象 162
12．3 直线 164
12．3．1 Canvas坐标系 164
12．3．2 直线的绘制 165
12．4 矩形 170
12．4．1 描边矩形 170
12．4．2 填充矩形 173
12．4．3 rect()方法 176
12．4．4 清空矩形 178
12．5 多边形 180
12．5．1 Canvas绘制箭头 181
12．5．2 Canvas绘制正多边形 182
12．5．3 Canvas绘制五角星 184
12．6 实战题：绘制调色板 186
12．7 本章练习 188
第二部分 CSS3实战
第 13章 CSS3简介 191
13．1 CSS3简介 191
13．2 浏览器私有前缀 192
13．3 一个酷炫的CSS3效果 194
13．4 本章练习 197
第 14章 新增选择器 198
14．1 CSS3选择器简介 198
14．2 属性选择器 199
14．3 子元素伪类选择器 201
14．3．1
：first-child、：last-child、：nth-child(n)、：only-child 201
14．3．2
：first-of-type、：last-of-type、：nth-of-type(n)、：only-of-type 204
14．4 UI伪类选择器 205
14．4．1 ：focus 205
14．4．2 ：：selection 206
14．4．3 ：checked 209
14．4．4 ：enabled和：disabled 210
14．4．5 ：read-write和：read-only 211
14．5 其他伪类选择器 212
14．5．1 ：root 212
14．5．2 ：empty 213
14．5．3 ：target 214
14．5．4 ：not() 217
14．6 本章练习 218
第 15章 文本样式 220
15．1 文本样式简介 220
15．2 文本阴影：text-shadow 220
15．2．1 W3C坐标系 220
15．2．2 text-shadow属性简介 221
15．2．3 定义多个阴影 224
15．3 文本描边：text-stroke 224
15．4 文本溢出：text-overflow 226
15．5 强制换行：word-wrap、
word-break 228
15．6 嵌入字体：@font-face 230
15．7 实战题：火焰字 232
15．8 本章练习 233
第 16章 颜色样式 234
16．1 颜色样式简介 234
16．2 opacity透明度 234
16．3 RGBA颜色 235
16．4 CSS3渐变 239
16．4．1 线性渐变 240
16．4．2 径向渐变 242
16．5 实战题：渐变按钮 248
16．6 实战题：鸡蛋圆 249
16．7 本章练习 250
第 17章 边框样式 251
17．1 边框样式简介 251
17．2 圆角效果：border-radius 251
17．2．1 border-radius实现圆角 252
17．2．2 border-radius实现半圆和圆 256
17．2．3 border-radius实现椭圆 258
17．2．4 border-radius的派生子属性 260
17．3 边框阴影：box-shadow 260
17．3．1 box-shadow属性简介 260
17．3．2 4个方向阴影独立样式 265
17．4 多色边框：border-colors 266
17．5 边框背景：border-image 269
17．5．1 border-image属性简介 269
17．5．2 border-image的派生子属性 272
17．6 实战题：3D卡通头像 273
17．7 本章练习 276
第 18章 背景样式 279
18．1 背景样式简介 279
18．2 背景大小：background-size 279
18．3 背景位置：background-origin 282
18．4 背景剪切：background-clip 285
18．5 多背景图片 288
18．6 本章练习 290
第 19章 CSS3变形 291
19．1 CSS3变形简介 291
19．2 平移：translate() 292
19．3 缩放：scale() 296
19．4 倾斜：skew() 300
19．5 旋转：rotate() 304
19．6 中心原点：transform-origin 305
19．7 实战题：个性照片墙 307
19．8 本章练习 309
第 20章 CSS3过渡 310
20．1 CSS3过渡简介 310
20．2 过渡属性：transition-property 312
20．3 过渡时间：transition-duration 313
20．4 过渡方式：transition-
timing-function 315
20．5 延迟时间：transition-delay 317
20．6 深入了解transition属性 318
20．6．1 transition-property取值为all 318
20．6．2 transition-delay的省略 320
20．6．3 transition属性的位置 320
20．7 实战题：鼠标指针移上去显示内容 321
20．8 实战题：图片文字介绍滑动效果 323
20．9 实战题：白光闪过效果 326
20．10 实战题：脉动效果 327
20．11 实战题：手风琴效果 328
20．12 本章练习 330
第 21章 CSS3动画 331
21．1 CSS3动画简介 331
21．2 @keyframes 333
21．3 动画名称：animation-name 335
21．4 持续时间：animation-duration 338
21．5 动画方式：animation-
timing-function 340
21．6 延迟时间：animation-delay 342
21．7 播放次数：animation-
iteration-count 343
21．8 播放方向：animation-direction 345
21．9 播放状态：animation-play-state 347
21．10 实战题：脉冲动画 348
21．11 实战题：loading效果 350
21．12 本章练习 352
第 22章 多列布局 353
22．1 多列布局 353
22．2 列数：column-count 354
22．3 列宽：column-width 356
22．4 间距：column-gap 358
22．5 边框：column-rule 360
22．6 跨列：column-span 362
22．7 实战题：瀑布流布局 364
22．8 本章练习 366
第 23章 滤镜效果 367
23．1 滤镜效果简介 367
23．2 亮度：brightness() 368
23．3 灰度：grayscale() 369
23．4 复古：sepia() 370
23．5 反色：invert() 371
23．6 旋转：hue-rotate() 372
23．7 阴影：drop-shadow() 373
23．8 透明度：opacity() 374
23．9 模糊度：blur() 375
23．10 对比度：contrast() 376
23．11 饱和度：saturate() 377
23．12 多种滤镜 378
23．13 实战题：鬼屋 379
23．14 本章练习 381
第 24章 弹性盒子模型 382
24．1 弹性盒子模型简介 382
24．2 放大比例：flex-grow 385
24．3 缩小比例：flex-shrink 387
24．4 元素宽度：flex-basis 389
24．5 复合属性：flex 391
24．6 排列方向：flex-direction 392
24．7 多行显示：flex-wrap 394
24．8 复合属性：flex-flow 396
24．9 排列顺序：order 397
24．10 水平对齐：justify-content 399
24．11 垂直对齐：align-items 401
24．12 实战题：水平居中和垂直居中 404
24．13 实战题：伸缩菜单 405
24．14 本章练习 407
第 25章 其他样式 408
25．1 outline属性 408
25．2 initial取值 409
25．3 calc()函数 410
25．4 overflow-x和overflow-y 413
25．5 pointer-events属性 417
25．6 本章练习 418
附录A HTML5新增元素 420
附录B HTML5新增属性 422
附录C CSS3新增选择器 423
附录D CSS3新增属性 425
鄂公网安备 42010302001612号 