疯狂HTML 5+CSS 3+JavaScript讲义（第2版）

W3C于2016年11月1日正式发布了HTML 5.1规范，该规范已经得到广大浏览器厂商的支持，主流的*新版本的浏览器几乎都支持该规范。与此同时，前端开发的持续火爆，使得HTML 5成为目前的热门领域。本书是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书，系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML 5的绘图支持、HTML 5的多媒体支持、CSS 3的功能和用法、*前沿的变形与动画功能等。除此之外，本书还系统地介绍了JavaScript编程知识，包括JavaScript基本语法、DOM编程，以及HTML 5新增的本地存储、Indexed数据库、离线应用、JavaScript多线程、客户端通信支持、WebSocket编程等。本书的定位是一本前端开发的“实战性”图书，因此在介绍各知识点时并不是简单地停留在知识点层面阐述，而是结合了大量实例来让读者对照练习、学以致用。本书*后还提供了一个基于HTML 5技术的小游戏：疯狂俄罗斯方块。该游戏综合运用了HTML 5的绘图支持、客户端存储等技术，具有较高的参考价值。本书提供了配套的答疑网站，如果读者在阅读本书时遇到了技术问题，可以登录疯狂Java联盟（http：//www.crazyit.org）发帖，笔者将会及时予以解答。

十多年的软件开发从业经验，疯狂软件教育中心教学总监。疯狂Java实训营创始人，疯狂Java体系原创图书作者。广东技术师范学院计算机科学系的兼职副教授，51CTO专家门诊特邀嘉宾。培训的学生已在华为、IBM、阿里软件、网易、电信盈科等名企就职。国内著名高端IT技术作家，已出版《疯狂Java讲义》《疯狂Android讲义》《轻量级Java EE企业应用实战》《疯狂iOS讲义（基础篇）（高级篇）》《疯狂 Swift讲义》《疯狂Ajax讲义》《疯狂XML讲义》《经典Java EE企业应用实战》《Struts 2.x**指南》《疯狂HTML 5/CSS 3/JavaScript讲义》等著作。其 中疯狂Java体系图书均已沉淀多年、赢得极高的市场认同、多次重印成为超级畅销图书，并被多所“985”“211”高校选作教材，不少图书已被翻译成繁体中文版、 授权到台湾地区。

?
第1章　HTML 5简介\t1
1．1　HTML历史与HTML 5\t2
1．1．1　HTML发展历史\t2
1．1．2　HTML 4．01和XHTML\t3
1．1．3　HTML和XHTML的文档类型定义（DTD）\t4
1．1．4　从XHTML到HTML 5\t5
1．2　HTML 5的优势\t6
1．2．1　解决跨浏览器问题\t6
1．2．2　部分代替了原来的JavaScript\t6
1．2．3　更明确的语义支持\t7
1．2．4　增强了Web应用程序的功能\t8
1．3　HTML 5的基本结构和语法变化\t8
1．3．1　HTML 5的基本结构\t8
1．3．2　标签不再区分大小写\t9
1．3．3　元素可以省略结束标签\t10
1．3．4　支持boolean值的属性\t11
1．3．5　允许属性值不使用引号\t12
1．4　本章小结\t12
第2章　HTML 5的常用元素与属性\t14
2．1　HTML 5保留的常用元素\t15
2．1．1　基本元素\t15
2．1．2　文本格式相关元素\t17
2．1．3　语义相关元素\t19
2．1．4　使用a元素添加超链接和锚点\t21
2．1．5　列表相关元素\t24
2．1．6　使用img元素添加图片\t27
2．1．7　表格相关元素\t30
2．2　HTML 5增强的iframe元素\t34
2．2．1　HTML 5新增的srcdoc属性\t35
2．2．2　HTML 5新增的seamless属性\t36
2．2．3　HTML 5新增的sandbox属性\t36
2．3　HTML 5保留的通用属性\t40
2．3．1　id、style、class属性\t40
2．3．2　dir属性\t41
2．3．3　title属性\t42
2．3．4　lang属性\t43
2．3．5　accesskey属性\t43
2．3．6　tabindex属性\t43
2．4　HTML 5新增的通用属性\t44
2．4．1　contentEditable属性\t44
2．4．2　designMode属性\t46
2．4．3　hidden属性\t46
2．4．4　spellcheck属性\t47
2．4．5　contextmenu属性\t47
2．5　HTML 5新增的结构元素\t48
2．5．1　article与section元素\t48
2．5．2　header与footer元素\t51
2．5．3　nav与aside元素\t52
2．5．4　main元素\t53
2．5．5　figure与figcaption元素\t54
2．6　HTML 5新增的语义元素\t55
2．6．1　mark元素\t55
2．6．2　time元素\t56
2．6．3　details与summary元素\t56
2．6．4　ruby、rtc、rb、rt和rp元素\t57
2．6．5　bdi元素\t58
2．6．6　wbr元素\t58
2．6．7　menu和menuitem元素\t59
2．7　HTML 5头部和元信息\t59
2．7．1　link元素\t60
2．7．2　base元素\t62
2．7．3　meta元素\t62
2．8　HTML 5新增的拖放API\t63
2．8．1　启动拖动\t63
2．8．2　接受“放”\t65
2．8．3　DataTransfer对象\t67
2．8．4　拖放行为\t69
2．8．5　改变拖放图标\t70
2．9　本章小结\t71
第3章　HTML 5表单相关的元素和属性\t72
3．1　HTML原有的表单及表单控件\t73
3．1．1　form元素\t73
3．1．2　input元素\t74
3．1．3　使用label定义标签\t77
3．1．4　使用button定义按钮\t78
3．1．5　select与option元素\t79
3．1．6　HTML 5增强的textarea\t80
3．1．7　fieldset与legend元素\t82
3．2　HTML 5新增的表单属性\t83
3．2．1　form属性\t83
3．2．2　formaction属性\t83
3．2．3　formxxx属性\t84
3．2．4　autofocus属性\t85
3．2．5　placeholder属性\t85
3．2．6　list属性\t86
3．2．7　autocomplete属性\t87
3．2．8　label的control属性\t88
3．2．9　表单元素的labels属性\t88
3．2．10　文本框的selectionDirection属性\t89
3．2．11　复选框的indeterminate属性\t89
3．3　HTML 5新增的表单元素\t90
3．3．1　功能丰富的input元素\t90
3．3．2　output元素\t93
3．3．3　meter元素\t94
3．3．4　progress元素\t95
3．3．5　keygen元素\t95
3．4　HTML 5新增的客户端校验\t96
3．4．1　使用校验属性执行校验\t96
3．4．2　调用checkValidity方法进行校验\t97
3．4．3　自定义错误提示\t98
3．4．4　关闭校验\t99
3．5　本章小结\t100
第4章　HTML 5的绘图支持\t101
4．1　使用canvas元素\t102
4．2　绘图\t103
4．2．1　canvas绘图基础：CanvasRenderingContext2D\t103
4．2．2　绘制几何图形\t105
4．2．3　点线模式\t107
4．2．4　绘制字符串\t109
4．2．5　设置阴影\t110
4．2．6　使用路径\t111
4．2．7　绘制曲线\t115
4．2．8　绘制位图\t117
4．3　坐标变换\t118
4．3．1　使用坐标变换\t118
4．3．2　坐标变换与路径结合使用\t119
4．3．3　使用矩阵变换\t121
4．4　控制叠加风格\t123
4．5　控制填充风格\t124
4．5．1　线性渐变\t124
4．5．2　径向渐变\t126
4．5．3　位图填充\t127
4．6　位图处理\t128
4．6．1　位图裁剪\t128
4．6．2　像素处理\t129
4．7　输出位图\t132
4．8　动画制作\t133
4．8．1　基于定时器的动画\t133
4．8．2　基于requestAnimationFrame的动画\t135
4．9　本章小结\t136
第5章　HTML 5的多媒体支持\t137
5．1　使用audio和video元素\t138
5．2　使用JavaScript脚本控制媒体播放\t141
5．2．1　HTMLAudioElement与HTMLVideoElement支持的方法\t141
5．2．2　HTMLAudioElement与HTMLVideoElement的属性\t143
5．3　事件监听\t144
5．3．1　事件\t144
5．3．2　监听器\t145
5．4　track元素\t146
5．4．1　使用track元素添加字幕\t146
5．4．2　WebVTT文件简介\t147
5．4．3　字幕内容的标记\t148
5．5　本章小结\t149
第6章　级联样式单与CSS选择器\t150
6．1　样式单概述\t151
6．1．1　CSS概述\t151
6．1．2　CSS的发展历史\t152
6．2　CSS样式单的基本使用\t152
6．2．1　引入外部样式文件\t152
6．2．2　导入外部样式单\t154
6．2．3　使用内部CSS样式\t155
6．2．4　使用行内样式\t156
6．3　CSS选择器\t158
6．3．1　元素选择器\t158
6．3．2　属性选择器\t159
6．3．3　ID选择器\t161
6．3．4　class选择器\t162
6．3．5　包含选择器\t163
6．3．6　子选择器\t164
6．3．7　CSS 3新增的兄弟选择器\t165
6．3．8　选择器组合\t166
6．4　伪元素选择器\t167
6．4．1　内容相关的属性\t169
6．4．2　插入图像\t170
6．4．3　只插入部分元素\t171
6．4．4　配合quotes属性执行插入\t171
6．4．5　配合counter-increment属性添加编号\t172
6．4．6　使用自定义编号\t173
6．4．7　添加多级编号\t174
6．5　CSS 3新增的伪类选择器\t176
6．5．1　结构性伪类选择器\t176
6．5．2　UI元素状态伪类选择器\t186
6．5．3　：target伪类选择器\t193
6．5．4　：not伪类选择器\t194
6．6　在脚本中修改显示样式\t195
6．6．1　随机改变页面的背景色\t195
6．6．2　动态增加立体效果\t196
6．7　本章小结\t197
第7章　字体与文本相关属性\t198
7．1　字体相关属性\t199
7．1．1　使用text-shadow添加阴影\t201
7．1．2　添加多个阴影\t202
7．1．3　使用font-size-adjust属性微调字体大小\t203
7．2　CSS 3支持的颜色表示方法\t205
7．3　文本相关属性\t206
7．3．1　使用white-space控制空白的处理行为\t208
7．3．2　文本自动换行：word-break\t209
7．3．3　用word-warp控制长单词或URL地址换行\t210
7．4　CSS 3新增的服务器字体\t212
7．4．1　使用服务器字体\t212
7．4．2　定义粗体、斜体字\t213
7．4．3　优先使用客户端字体\t214
7．5　本章小结\t215
第8章　背景、边框和边距相关属性\t216
8．1　盒模型简介\t217
8．2　背景相关属性\t217
8．2．1　背景图片固定\t219
8．2．2　CSS 3新增的background-clip属性\t220
8．2．3　CSS 3新增的background-origin属性\t221
8．2．4　CSS 3新增的background-size属性\t222
8．2．5　CSS 3为background-repeat新增的space和round\t224
8．2．6　CSS 3新增的多背景图片\t225
8．3　使用渐变背景\t226
8．3．1　使用linear-gradient设置线性渐变\t226
8．3．2　使用repeating-linear-gradient设置循环线性渐变\t230
8．3．3　使用radial-gradient设置径向渐变\t231
8．3．4　使用repeating-radial-gradient设置循环径向渐变\t238
8．4　边框相关属性\t239
8．4．1　CSS 3提供的渐变边框\t241
8．4．2　CSS 3提供的圆角边框\t242
8．4．3　CSS 3提供的图片边框\t244
8．5　使用opacity控制透明度\t246
8．6　padding和margin相关属性\t247
8．6．1　内填充相关属性\t247
8．6．2　外边距相关属性\t248
8．7　本章小结\t249
第9章　大小、定位、轮廓相关属性\t250
9．1　width、height相关属性\t251
9．1．1　CSS 3新增的box-sizing属性\t252
9．1．2　CSS 3新增的resize属性\t253
9．1．3　CSS 3新增的calc函数\t254
9．2　定位相关属性\t255
9．3　轮廓相关属性\t257
9．4　用户界面和滤镜属性\t258
9．4．1　appearance属性\t259
9．4．2　使用filter属性应用滤镜\t260
9．5　本章小结\t263
第10章　盒模型与布局相关属性\t264
10．1　盒模型和display属性\t265
10．1．1　两种最基本的盒类型\t265
10．1．2　none值和visibility属性\t267
10．1．3　inline-block类型的盒模型\t267
10．1．4　inline-table类型的盒模型\t270
10．1．5　使用table类型的盒模型实现表格\t271
10．1．6　list-item类型的盒模型\t272
10．1．7　run-in类型的盒模型\t273
10．2　对盒添加阴影\t275
10．2．1　使用box-shadow属性\t275
10．2．2　对表格及单元格添加阴影\t277
10．3　布局相关属性\t278
10．3．1　通过float属性实现多栏布局\t279
10．3．2　使用clear属性实现换行\t280
10．3．3　使用overflow设置滚动条\t282
10．3．4　使用overflow-style控制滚动方式\t283
10．3．5　使用clip属性控制裁剪\t284
10．4　CSS 3新增的多栏布局\t285
10．4．1　使用column-width指定栏宽度\t286
10．4．2　使用column-gap和column-rule控制分栏间隔\t287
10．4．3　使用column-span设置跨栏\t288
10．5　使用弹性盒布局\t289
10．5．1　使用flex类型的盒模型\t290
10．5．2　通过flex-direction指定盒内元素的排列方向\t291
10．5．3　使用flex-wrap控制换行\t293
10．5．4　使用order控制元素显示顺序\t294
10．5．5　使用flex属性控制子元素的缩放\t295
10．5．6　使用align-items和align-self控制对齐方式\t301
10．5．7　使用justify-content控制元素分布\t302
10．5．8　使用align-content控制行的分布方式\t304
10．6　本章小结\t306
第11章　表格、列表相关属性及media query\t307
11．1　表格相关属性\t308
11．1．1　使用border-collapse、border-spacing控制单元格边框\t308
11．1．2　使用caption-side控制表格标题的位置\t310
11．1．3　使用table-layout控制表格布局\t311
11．2　列表相关属性\t313
11．2．1　使用list-style属性控制列表项\t313
11．2．2　使用list-style属性控制普通元素\t315
11．3　控制光标的属性\t316
11．4　media query和响应式布局\t317
11．4．1　media query语法\t318
11．4．2　针对浏览器宽度响应式布局\t319
11．4．3　响应手机浏览器\t321
11．5　本章小结\t323
第12章　变形与动画相关属性\t324
12．1　CSS 3提供的变形支持\t325
12．1．1　4种基本变形\t326
12．1．2　同时应用多种变形\t330
12．1．3　指定变换中心点\t331
12．1．4　使用矩阵变换\t333
12．2　CSS 3新增的3D变换\t337
12．2．1　perspective属性\t337
12．2．2　transform-style属性\t339
12．2．3　backface-visibility属性\t340
12．3　CSS 3提供的Transition动画\t341
12．3．1　多个属性同时渐变\t342
12．3．2　指定动画速度\t344
12．4　CSS 3提供的Animation动画\t345
12．4．1　同时改变多个属性的动画\t347
12．4．2　鱼眼效果\t348
12．5　本章小结\t349
第13章　JavaScript语法详解\t350
13．1　JavaScript简介\t351
13．1．1　运行JavaScript\t352
13．1．2　导入JavaScript文件\t352
13．1．3　使用script元素的defer推迟脚本执行\t353
13．1．4　使用script元素的async异步执行脚本\t354
13．1．5　noscript元素\t355
13．2　数据类型和变量\t356
13．2．1　定义变量的方式\t356
13．2．2　类型转换\t357
13．2．3　变量作用域\t358
13．2．4　变量提升\t361
13．2．5　新增的let变量\t362
13．2．6　使用const定义常量\t363
13．3　基本数据类型\t364
13．3．1　数值类型\t364
13．3．2　字符串类型\t369
13．3．3　布尔类型\t372
13．3．4　undefined和null\t373
13．3．5　正则表达式\t374
13．4　复合类型\t376
13．4．1　对象\t376
13．4．2　数组\t376
13．4．3　函数\t379
13．5　运算符\t381
13．5．1　赋值运算符\t381
13．5．2　算术运算符\t382
13．5．3　位运算符\t383
13．5．4　加强的赋值运算符\t385
13．5．5　比较运算符\t385
13．5．6　逻辑运算符\t386
13．5．7　三目运算符\t388
13．5．8　逗号运算符\t389
13．5．9　void运算符\t389
13．5．10　typeof和instanceof运算符\t390
13．6　语句\t391
13．6．1　语句块\t391
13．6．2　空语句\t391
13．6．3　异常抛出语句\t392
13．6．4　异常捕捉语句\t393
13．6．5　with语句\t394
13．7　流程控制\t395
13．7．1　分支\t395
13．7．2　while循环\t397
13．7．3　do while循环\t398
13．7．4　for循环\t398
13．7．5　for in循环\t399
13．7．6　break和continue\t400
13．8　函数\t403
13．8．1　定义函数的3种方式\t403
13．8．2　递归函数\t406
13．8．3　局部变量和局部函数\t407
13．8．4　函数、方法、对象、变量和类\t409
13．8．5　函数的实例属性和类属性\t413
13．8．6　调用函数的3种方式\t415
13．8．7　函数的独立性\t416
13．8．8　函数提升\t418
13．8．9　箭头函数\t421
13．9　函数的参数处理\t425
13．9．1　基本类型和复合类型的参数传递\t425
13．9．2　空参数\t426
13．9．3　参数类型\t427
13．10　面向对象\t429
13．10．1　面向对象的概念\t429
13．10．2　对象和关联数组\t430
13．10．3　继承和prototype\t431
13．10．4　构造器实现伪继承\t436
13．10．5　使用apply或call实现伪继承\t437
13．11　创建对象\t437
13．11．1　使用new关键字调用构造器创建对象\t438
13．11．2　使用Object直接创建对象\t438
13．11．3　使用JSON语法创建对象\t440
13．12　本章小结\t443
第14章　DOM编程详解\t444
14．1　DOM模型概述\t445
14．2　DOM模型和HTML文档\t446
14．2．1　HTML元素之间的继承关系\t446
14．2．2　HTML元素之间常见的包含关系\t447
14．3　访问HTML元素\t448
14．3．1　根据ID访问HTML元素\t448
14．3．2　根据CSS选择器访问HTML元素\t449
14．3．3　利用节点关系访问HTML元素\t451
14．3．4　访问表单控件\t453
14．3．5　访问列表框、下拉菜单的选项\t454
14．3．6　访问表格子元素\t455
14．4　修改HTML元素\t456
14．5　增加HTML元素\t458
14．5．1　创建或复制节点\t458
14．5．2　添加节点\t460
14．5．3　为列表框、下拉菜单添加选项\t460
14．5．4　动态添加表格内容\t462
14．6　删除HTML元素\t463
14．6．1　删除节点\t463
14．6．2　删除列表框、下拉菜单的选项\t464
14．6．3　删除表格的行或单元格\t465
14．7　传统的DHTML模型\t467
14．8　使用window对象\t469
14．8．1　访问页面URL\t471
14．8．2　客户机屏幕信息\t472
14．8．3　弹出新窗口\t473
14．8．4　确认对话框和输入对话框\t473
14．8．5　使用定时器\t474
14．8．6　桌面通知\t476
14．9　navigator和地理定位\t479
14．9．1　HTML 5新增的geolocation属性\t480
14．9．2　获取地理位置\t481
14．9．3　在高德地图上定位\t483
14．9．4　获取电池信息\t484
14．10　HTML 5增强的History API\t485
14．11　使用document对象\t490
14．11．1　动态页面\t491
14．11．2　读写Cookie\t492
14．12　HTML 5新增的浏览器分析\t493
14．12．1　分析时间性能\t493
14．12．2　分析导航行为\t495
14．13　本章小结\t496
第15章　事件处理机制\t497
15．1　事件模型的基本概念\t498
15．2　绑定事件处理函数\t499
15．2．1　绑定HTML元素属性\t499
15．2．2　绑定JavaScript对象属性\t501
15．2．3　addEventListener与attachEvent\t502
15．3　事件处理函数的执行环境\t505
15．3．1　事件处理函数中this关键字\t505
15．3．2　访问事件对象\t507
15．3．3　使用返回值取消默认行为\t510
15．3．4　调用顺序\t510
15．3．5　在代码中触发事件\t511
15．3．6　事件传播\t512
15．3．7　取消事件的默认行为\t517
15．3．8　转发事件\t519
15．4　事件类型\t521
15．4．1　事件类型概述\t521
15．4．2　文档事件\t523
15．4．3　鼠标滚轮事件\t525
15．4．4　键盘事件\t528
15．4．5　触屏事件和移动设备事件\t529
15．5　本章小结\t534
第16章　本地存储与离线应用\t535
16．1　Web Storage\t536
16．1．1　Storage接口\t536
16．1．2　使用Storage存储、读取数据\t538
16．1．3　基于Web Storage的记事本\t539
16．1．4　存储结构化数据\t541
16．1．5　监听存储事件\t543
16．2　Indexed数据库API\t545
16．2．1　使用IDBFactory打开数据库\t545
16．2．2　使用IDBDatabase创建对象存储和索引\t547
16．2．3　使用IDBTransaction（事务）\t550
16．2．4　使用IDBObjectStore执行CRUD操作\t551
16．2．5　使用IDBObjectStore根据主键检索数据\t557
16．2．6　使用IDBIndex根据索引检索数据\t559
16．2．7　使用复合索引\t562
16．3　离线应用\t564
16．3．1　离线应用与浏览器缓存的区别\t564
16．3．2　构建离线应用\t564
16．3．3　判断在线状态\t566
16．3．4　applicationCache对象\t567
16．3．5　离线应用的事件与监听\t569
16．4　本章小结\t571
第17章　文件支持与二进制数据\t572
17．1　HTML 5增强的文件上传域\t573
17．1．1　FileList对象与File对象\t573
17．1．2　使用FileReader读取文件内容\t574
17．2　ArrayBuffer与TypedArray\t578
17．2．1　TypedArray类\t579
17．2．2　DataView类\t581
17．3　Blob类\t583
17．3．1　使用Blob对象\t583
17．3．2　存储Blob对象\t585
17．4　本章小结\t587
第18章　Web Worker多线程API\t588
18．1　使用Worker创建多线程\t589
18．2　与Worker线程进行数据交换\t591
18．2．1　与Worker线程交换数据\t591
18．2．2　Worker线程中可用的API\t593
18．3　Worker线程嵌套\t594
18．3．1　嵌套Worker线程\t594
18．3．2　子线程之间的数据交换\t596
18．4　使用SharedWorker创建共享线程\t597
18．4．1　SharedWorker的用法\t598
18．4．2　共享线程实例\t601
18．5　Promise\t603
18．5．1　Promise基本用法\t603
18．5．2　链式调用then方法\t605
18．5．3　Promise链\t606
18．5．4　catch的用法\t607
18．5．5　all和race的用法\t609
18．6　本章小结\t611
第19章　客户端通信\t612
19．1　跨文档消息传递\t613
19．1．1　postMessage与onmessage\t613
19．1．2　跨文档消息传递示例\t614
19．1．3　发送复杂消息\t616
19．1．4　使用MessageChannel通信\t618
19．2　使用WebSocket与服务器通信\t621
19．2．1　WebSocket接口\t622
19．2．2　使用WebSocket进行通信\t623
19．2．3　基于WebSocket的多人实时聊天\t625
19．2．4　发送二进制数据\t627
19．3　使用Server-Sent Events API\t630
19．3．1　使用EventSource获取数据\t630
19．3．2　EventSource的生命周期\t633
19．4　使用Beacon\t635
19．5　本章小结\t636
第20章　HTML 5的疯狂俄罗斯方块\t637
20．1　俄罗斯方块简介\t638
20．2　开发游戏界面\t639
20．2．1　开发界面布局\t639
20．2．2　开发游戏界面组件\t640
20．3　俄罗斯方块的数据模型\t640
20．3．1　定义数据模型\t641
20．3．2　初始化游戏状态数据\t641
20．4　实现游戏逻辑\t644
20．4．1　处理方块掉落\t644
20．4．2　处理方块左移\t648
20．4．3　处理方块右移\t650
20．4．4　处理方块旋转\t651
20．4．5　初始化游戏状态\t653
20．5　本章小结\t654