疯狂HTML 5+CSS 3+JavaScript讲义-(第2版)

第1章　HTML 5简介 1
1.1　HTML历史与HTML 5 2
1.1.1　HTML发展历史 2
1.1.2　HTML 4.01和XHTML 3
1.1.3　HTML和XHTML的文档类型定义（DTD） 4
1.1.4　从XHTML到HTML 5 5
1.2　HTML 5的优势 6
1.2.1　解决跨浏览器问题 6
1.2.2　部分代替了原来的JavaScript 6
1.2.3　更明确的语义支持 7
1.2.4　增强了Web应用程序的功能 8
1.3　HTML 5的基本结构和语法变化 8
1.3.1　HTML 5的基本结构 8
1.3.2　标签不再区分大小写 9
1.3.3　元素可以省略结束标签 10
1.3.4　支持boolean值的属性 11
1.3.5　允许属性值不使用引号 12
1.4　本章小结 12
第2章　HTML 5的常用元素与属性 14
2.1　HTML 5保留的常用元素 15
2.1.1　基本元素 15
2.1.2　文本格式相关元素 17
2.1.3　语义相关元素 19
2.1.4　使用a元素添加超链接和锚点 21
2.1.5　列表相关元素 24
2.1.6　使用img元素添加图片 27
2.1.7　表格相关元素 30
2.2　HTML 5增强的iframe元素 34
2.2.1　HTML 5新增的srcdoc属性 35
2.2.2　HTML 5新增的seamless属性 36
2.2.3　HTML 5新增的sandbox属性 36
2.3　HTML 5保留的通用属性 40
2.3.1　id、style、class属性 40
2.3.2　dir属性 41
2.3.3　title属性 42
2.3.4　lang属性 43
2.3.5　accesskey属性 43
2.3.6　tabindex属性 43
2.4　HTML 5新增的通用属性 44
2.4.1　contentEditable属性 44
2.4.2　designMode属性 46
2.4.3　hidden属性 46
2.4.4　spellcheck属性 47
2.4.5　contextmenu属性 47
2.5　HTML 5新增的结构元素 48
2.5.1　article与section元素 48
2.5.2　header与footer元素 51
2.5.3　nav与aside元素 52
2.5.4　main元素 53
2.5.5　figure与figcaption元素 54
2.6　HTML 5新增的语义元素 55
2.6.1　mark元素 55
2.6.2　time元素 56
2.6.3　details与summary元素 56
2.6.4　ruby、rtc、rb、rt和rp元素 57
2.6.5　bdi元素 58
2.6.6　wbr元素 58
2.6.7　menu和menuitem元素 59
2.7　HTML 5头部和元信息 59
2.7.1　link元素 60
2.7.2　base元素 62
2.7.3　meta元素 62
2.8　HTML 5新增的拖放API 63
2.8.1　启动拖动 63
2.8.2　接受“放” 65
2.8.3　DataTransfer对象 67
2.8.4　拖放行为 69
2.8.5　改变拖放图标 70
2.9　本章小结 71
第3章　HTML 5表单相关的元素和属性 72
3.1　HTML原有的表单及表单控件 73
3.1.1　form元素 73
3.1.2　input元素 74
3.1.3　使用label定义标签 77
3.1.4　使用button定义按钮 78
3.1.5　select与option元素 79
3.1.6　HTML 5增强的textarea 80
3.1.7　fieldset与legend元素 82
3.2　HTML 5新增的表单属性 83
3.2.1　form属性 83
3.2.2　formaction属性 83
3.2.3　formxxx属性 84
3.2.4　autofocus属性 85
3.2.5　placeholder属性 85
3.2.6　list属性 86
3.2.7　autocomplete属性 87
3.2.8　label的control属性 88
3.2.9　表单元素的labels属性 88
3.2.10　文本框的selectionDirection属性 89
3.2.11　复选框的indeterminate属性 89
3.3　HTML 5新增的表单元素 90
3.3.1　功能丰富的input元素 90
3.3.2　output元素 93
3.3.3　meter元素 94
3.3.4　progress元素 95
3.3.5　keygen元素 95
3.4　HTML 5新增的客户端校验 96
3.4.1　使用校验属性执行校验 96
3.4.2　调用checkValidity方法进行校验 97
3.4.3　自定义错误提示 98
3.4.4　关闭校验 99
3.5　本章小结 100
第4章　HTML 5的绘图支持 101
4.1　使用canvas元素 102
4.2　绘图 103
4.2.1　canvas绘图基础：CanvasRenderingContext2D 103
4.2.2　绘制几何图形 105
4.2.3　点线模式 107
4.2.4　绘制字符串 109
4.2.5　设置阴影 110
4.2.6　使用路径 111
4.2.7　绘制曲线 115
4.2.8　绘制位图 117
4.3　坐标变换 118
4.3.1　使用坐标变换 118
4.3.2　坐标变换与路径结合使用 119
4.3.3　使用矩阵变换 121
4.4　控制叠加风格 123
4.5　控制填充风格 124
4.5.1　线性渐变 124
4.5.2　径向渐变 126
4.5.3　位图填充 127
4.6　位图处理 128
4.6.1　位图裁剪 128
4.6.2　像素处理 129
4.7　输出位图 132
4.8　动画制作 133
4.8.1　基于定时器的动画 133
4.8.2　基于requestAnimationFrame的动画 135
4.9　本章小结 136
第5章　HTML 5的多媒体支持 137
5.1　使用audio和video元素 138
5.2　使用JavaScript脚本控制媒体播放 141
5.2.1　HTMLAudioElement与HTMLVideoElement支持的方法 141
5.2.2　HTMLAudioElement与HTMLVideoElement的属性 143
5.3　事件监听 144
5.3.1　事件 144
5.3.2　监听器 145
5.4　track元素 146
5.4.1　使用track元素添加字幕 146
5.4.2　WebVTT文件简介 147
5.4.3　字幕内容的标记 148
5.5　本章小结 149
第6章　级联样式单与CSS选择器 150
6.1　样式单概述 151
6.1.1　CSS概述 151
6.1.2　CSS的发展历史 152
6.2　CSS样式单的基本使用 152
6.2.1　引入外部样式文件 152
6.2.2　导入外部样式单 154
6.2.3　使用内部CSS样式 155
6.2.4　使用行内样式 156
6.3　CSS选择器 158
6.3.1　元素选择器 158
6.3.2　属性选择器 159
6.3.3　ID选择器 161
6.3.4　class选择器 162
6.3.5　包含选择器 163
6.3.6　子选择器 164
6.3.7　CSS 3新增的兄弟选择器 165
6.3.8　选择器组合 166
6.4　伪元素选择器 167
6.4.1　内容相关的属性 169
6.4.2　插入图像 170
6.4.3　只插入部分元素 171
6.4.4　配合quotes属性执行插入 171
6.4.5　配合counter-increment属性添加编号 172
6.4.6　使用自定义编号 173
6.4.7　添加多级编号 174
6.5　CSS 3新增的伪类选择器 176
6.5.1　结构性伪类选择器 176
6.5.2　UI元素状态伪类选择器 186
6.5.3　:target伪类选择器 193
6.5.4　:not伪类选择器 194
6.6　在脚本中修改显示样式 195
6.6.1　随机改变页面的背景色 195
6.6.2　动态增加立体效果 196
6.7　本章小结 197
第7章　字体与文本相关属性 198
7.1　字体相关属性 199
7.1.1　使用text-shadow添加阴影 201
7.1.2　添加多个阴影 202
7.1.3　使用font-size-adjust属性微调字体大小 203
7.2　CSS 3支持的颜色表示方法 205
7.3　文本相关属性 206
7.3.1　使用white-space控制空白的处理行为 208
7.3.2　文本自动换行：word-break 209
7.3.3　用word-warp控制长单词或URL地址换行 210
7.4　CSS 3新增的服务器字体 212
7.4.1　使用服务器字体 212
7.4.2　定义粗体、斜体字 213
7.4.3　优先使用客户端字体 214
7.5　本章小结 215
第8章　背景、边框和边距相关属性 216
8.1　盒模型简介 217
8.2　背景相关属性 217
8.2.1　背景图片固定 219
8.2.2　CSS 3新增的background-clip属性 220
8.2.3　CSS 3新增的background-origin属性 221
8.2.4　CSS 3新增的background-size属性 222
8.2.5　CSS 3为background-repeat新增的space和round 224
8.2.6　CSS 3新增的多背景图片 225
8.3　使用渐变背景 226
8.3.1　使用linear-gradient设置线性渐变 226
8.3.2　使用repeating-linear-gradient设置循环线性渐变 230
8.3.3　使用radial-gradient设置径向渐变 231
8.3.4　使用repeating-radial-gradient设置循环径向渐变 238
8.4　边框相关属性 239
8.4.1　CSS 3提供的渐变边框 241
8.4.2　CSS 3提供的圆角边框 242
8.4.3　CSS 3提供的图片边框 244
8.5　使用opacity控制透明度 246
8.6　padding和margin相关属性 247
8.6.1　内填充相关属性 247
8.6.2　外边距相关属性 248
8.7　本章小结 249
第9章　大小、定位、轮廓相关属性 250
9.1　width、height相关属性 251
9.1.1　CSS 3新增的box-sizing属性 252
9.1.2　CSS 3新增的resize属性 253
9.1.3　CSS 3新增的calc函数 254
9.2　定位相关属性 255
9.3　轮廓相关属性 257
9.4　用户界面和滤镜属性 258
9.4.1　appearance属性 259
9.4.2　使用filter属性应用滤镜 260
9.5　本章小结 263
第10章　盒模型与布局相关属性 264
10.1　盒模型和display属性 265
10.1.1　两种*基本的盒类型 265
10.1.2　none值和visibility属性 267
10.1.3　inline-block类型的盒模型 267
10.1.4　inline-table类型的盒模型 270
10.1.5　使用table类型的盒模型实现表格 271
10.1.6　list-item类型的盒模型 272
10.1.7　run-in类型的盒模型 273
10.2　对盒添加阴影 275
10.2.1　使用box-shadow属性 275
10.2.2　对表格及单元格添加阴影 277
10.3　布局相关属性 278
10.3.1　通过float属性实现多栏布局 279
10.3.2　使用clear属性实现换行 280
10.3.3　使用overflow设置滚动条 282
10.3.4　使用overflow-style控制滚动方式 283
10.3.5　使用clip属性控制裁剪 284
10.4　CSS 3新增的多栏布局 285
10.4.1　使用column-width指定栏宽度 286
10.4.2　使用column-gap和column-rule控制分栏间隔 287
10.4.3　使用column-span设置跨栏 288
10.5　使用弹性盒布局 289
10.5.1　使用flex类型的盒模型 290
10.5.2　通过flex-direction指定盒内元素的排列方向 291
10.5.3　使用flex-wrap控制换行 293
10.5.4　使用order控制元素显示顺序 294
10.5.5　使用flex属性控制子元素的缩放 295
10.5.6　使用align-items和ali