HTML5从入门到精通（第3版）

"目  录
第1篇　HTML基础
 第1章　HTML基础 2
  视频讲解：25分钟
1.1  HTML的基本概念 3
1.2  HTML发展史与HTML5 3
1.2.1  HTML的发展历史 3
1.2.2  HTML 4.01和XHTML 4
1.2.3  从XHTML到HTML5 5
1.3  迎接新的Web时代 6
1.3.1  部分代替了原来的JavaScript 6
1.3.2  更明确的语义支持 6
1.3.3  增强了Web应用程序功能 7
1.3.4  HTML5的目标 8
1.4  各浏览器对HTML5的支持 8
1.5  HTML5要解决的3个问题 9
1.6  HTML的基本结构 10
1.6.1  HTML文件的编写方法 10
1.6.2  文件开始标签 12
1.6.3  文件头部标签 12
1.6.4  文件标题标签 13
1.6.5  文件主体标签 13
1.6.6  编写文件的注意事项 13
1.7  编写个HTML文件 14
1.7.1  HTML文件的编写方法 14
1.7.2  手工编写页面 14
1.7.3  使用Dreamwaver制作页面 15
1.7.4  使用WebStorm制作页面 19
1.7.5  使用浏览器浏览HTML文件 22
1.7.6  HTML开发的明日图书网 23
1.8  小结 24
1.9  习题 24
第2章　HTML文件基本标记 26
  视频讲解：43分钟
2.1  HTML头部标记 27
2.2  标题标记 27
2.3  元信息标记 28
2.3.1  设置页面关键字 28
2.3.2  设置页面描述 29
2.3.3  设置编辑工具 30
2.3.4  设定作者信息 30
2.3.5  限制搜索方式 31
2.3.6  设置网页文字及语言 32
2.3.7  设置网页的定时跳转 32
2.3.8  设定有效期限 33
2.3.9  禁止从缓存中调用 34
2.3.10  删除过期的cookie 35
2.3.11  强制打开新窗口 35
2.3.12  设定建立网站的日期 36
2.3.13  设定网页版权信息 36
2.3.14  设定联系人的邮箱 37
2.4  基底网址标记 38
2.5  页面的主体标记 39
2.5.1  设置文字颜色—text 40
2.5.2  背景颜色属性—bgcolor 40
2.5.3  背景图像属性—background 41
2.5.4  设置链接文字属性—link 45
2.5.5  设置边距—margin 47
2.6  页面的注释标记— 48
2.7  实例演练—创建基本的HTML网页 48
2.8  小结 49
2.9  习题 50
第3章　设计网页文本内容 51
  视频讲解：28分钟
3.1  标题文字的建立 52
3.1.1  标题字标记 52
3.1.2  标题文字的对齐方式—align 53
3.2  设置文字格式 54
3.2.1  设置文字字体—face 54
3.2.2  设置字号—size 55
3.2.3  设置文字颜色—color 56
3.2.4  粗体、斜体、下画线—strong、em、u 57
3.2.5  上标与下标—sup、sub 57
3.2.6  设置删除线—strike 58
3.2.7  等宽文字标记—code 59
3.2.8  空格—  60
3.2.9  其他特殊符号 61
3.3  设置段落格式 62
3.3.1  段落标记—p 62
3.3.2  取消文字换行标记—nobr 62
3.3.3  换行标记—br 63
3.3.4  保留原始排版方式标记—pre 64
3.3.5  居中对齐标记—center 65
3.3.6  向右缩进标记—blockquote 66
3.4  水平线标记 67
3.4.1  添加水平线—hr 67
3.4.2  设置水平线宽度与高度属性—width、height   68
3.4.3  设置水平线的颜色—color 69
3.4.4  设置水平线的对齐方式—align 70
3.4.5  去掉水平线阴影—noshade 71
3.5  其他文字标记 72
3.5.1  文字标注标记—ruby 72
3.5.2  声明变量标记—var 73
3.5.3  忽视HTML标签标记—plaintext、xmp 74
3.5.4  设置地址文字标记 75
3.6  小结 75
3.7  习题 76
第4章　使用列表 77
  视频讲解：33分钟
4.1  列表的标记 78
4.2  使用无序列表 78
4.2.1  无序列表标记—ul 78
4.2.2  设置无序列表的类型—type 79
4.3  使用有序列表 81
4.3.1　有序列表标记—ol 81
4.3.2　有序列表的类型—type 82
4.3.3　有序列表的起始数值—start 84
4.4  定义列表标记—dl 86
4.5  菜单列表标记—menu 88
4.6  目录列表—dir 89
4.7  设置列表文字的颜色 90
4.8  使用嵌套列表 92
4.8.1　定义列表的嵌套 92
4.8.2　无序列表和有序列表的嵌套 93
4.8.3　有序列表之间的嵌套 95
4.9  小结 96
4.10  习题 96
第5章　超链接 97
  视频讲解：21分钟
5.1  超链接的基本知识 98
5.1.1  超链接 98
5.1.2  路径 98
5.1.3  相对路径 98
5.2  超链接的建立 99
5.2.1  超链接标记的基本语法 99
5.2.2  建立文本超链接 99
5.2.3  设置超链接的目标窗口 101
5.3  内部链接 103
5.4  书签链接 105
5.4.1  建立书签 106
5.4.2  链接到同一页面的书签 107
5.4.3  链接到不同页面的书签 109
5.5  外部链接 110
5.5.1  通过HTTP协议 110
5.5.2  通过FTP 111
5.5.3  发送E-mail 112
5.5.4  下载文件 114
5.6  其他链接 115
5.6.1  脚本链接 115
5.6.2  空链接 116
5.7  小结 117
5.8  习题 117
第6章　使用图像 119
  视频讲解：33分钟
6.1  图片的基本格式 120
6.2  添加图像—img 120
6.3  设置图像属性 121
6.3.1  图像高度—height 121
6.3.2  图像宽度—width 122
6.3.3  图像边框—border 123
6.3.4  图像水平间距—hspace 125
6.3.5  图像垂直间距—vspace 126
6.3.6  图像相对于文字基准线的对齐方式—align 126
6.3.7  图像的提示文字—title 128
6.3.8  图像的替换文字—alt 129
6.4  图像的超链接 130
6.4.1　设置图像的超链接 130
6.4.2　设置图像热区链接 132
6.5  小结 134
6.6  习题 134
第7章　表格的应用 136
  视频讲解：46分钟
7.1　创建表格 137
7.1.1　表格的基本构成—table、tr、td 137
7.1.2　设置表格的标题—caption 138
7.1.3　表格的表头—th 139
7.2　设置表格基本属性 141
7.2.1　设置表格宽度—width 141
7.2.2　设置表格高度—height 143
7.2.3　设置表格对齐方式—align 144
7.3　设置表格的边框 145
7.3.1　表格边框宽度—border 145
7.3.2　表格边框颜色—bordercolor 146
7.3.3　内框宽度—cellspacing 148
7.3.4　表格内文字与边框间距—cellpadding 149
7.4　设置表格背景 150
7.4.1　设置表格背景颜色—bgcolor 150
7.4.2　设置表格的背景图像—background 151
7.5　设置表格的行属性 152
7.5.1　高度的控制—height 152
7.5.2　边框颜色—bordercolor 153
7.5.3　行背景—bgcolor、background 155
7.5.4　行文字的水平对齐方式—align 156
7.5.5　行文字的垂直对齐方式—valign 157
7.5.6  设置表格标题的垂直对齐方式—align 158
7.6　调整单元格属性 159
7.6.1　单元格大小—width、height 159
7.6.2　水平跨度—colspan 160
7.6.3　垂直跨度—rowspan 162
7.6.4　对齐方式—align、valign 163
7.6.5　设置单元格的背景色 164
7.6.6　设置单元格的边框颜色—bordercolor 165
7.6.7　设置单元格的亮边框—bordercolorlight 167
7.6.8　设置单元格的暗边框—bordercolordark 168
7.6.9　设置单元格的背景图像—background 169
7.7　表格的结构 171
7.7.1　表格的表首标记—thead 171
7.7.2　表格的表主体标记—tbody 172
7.7.3　表格的表尾标记—tfoot 174
7.8  表格的嵌套 176
7.9  小结 177
7.10  习题 178
第8章　层——＜div＞标签 179
  视频讲解：32分钟
8.1  层 180
8.1.1  层的分类 180
8.1.2  定义数据块 180
8.2  标签 181
8.2.1  标签 181
8.2.2  标签的属性 182
8.2.3  标签与标签 190
8.3  标签 191
8.3.1  标签 191
8.3.2  标签的属性 192
8.4  应用div制作下拉菜单导航条 194
8.5  小结 197
8.6  习题 197
第9章　编辑表单 199
  视频讲解：25分钟
9.1　使用表单标记—form 200
9.1.1　处理动作—action 200
9.1.2　表单名称—ame 201
9.1.3　传送方法—method 201
9.1.4　编码方式—enctype 202
9.1.5　目标显示方式—target 203
9.2  添加控件 204
9.3　输入类的控件 204
9.3.1　文字字段—text 204
9.3.2　密码域—password 206
9.3.3　单选按钮—radio 208
9.3.4　复选框—checkbox 209
9.3.5　普通按钮—button 209
9.3.6　提交按钮—submit 211
9.3.7　重置按钮—reset 212
9.3.8　图像域—image 213
9.3.9　隐藏域—hidden 214
9.3.10　文件域—file 215
9.4　使用label定义标签 216
9.5　使用button定义按钮 217
9.6　列表/菜单标记 218
9.7　文本域标记textarea 220
9.8　id标记 221
9.9　在Dreamweaver中快速创建表单 222
9.10　小结 224
9.11　习题 224
第10章　多媒体页面 226
  视频讲解：18分钟
10.1  设置滚动文字 227
10.1.1  滚动文字标记—marquee 227
10.1.2  滚动方向属性—direction 227
10.1.3  滚动方式属性—behavior 228
10.1.4  滚动速度属性—scrollamount 229
10.1.5  滚动延迟属性—scrolldelay 230
10.1.6  滚动循环属性—loop 231
10.1.7  滚动范围属性—width、height 232
10.1.8  滚动背景颜色属性—bgcolor 233
10.1.9  滚动空间属性—hspace、vspace 233
10.2  添加多媒体文件 234
10.2.1  添加多媒体文件标记—embed 235
10.2.2  设置自动运行—autostart 235
10.2.3  设置媒体文件的循环播放—loop 236
10.2.4  隐藏面板—hidden 237
10.2.5  添加其他类型的媒体文件 238
10.3  标签 239
10.3.1  插入音频文件 239
10.3.2  插入Flash动画 240
10.3.3  插入背景透明的Flash动画 242
10.3.4  插入视频文件 243
10.4  小结 244
10.5  习题 244 
第2篇　HTML5高级应用 
第11章　HTML5的开发和新特性 248
  视频讲解：4分钟
11.1  谁在开发HTML5 249
11.2  HTML5的新认识 249
11.2.1  兼容性 249
11.2.2  实用性和用户优先 249
11.2.3  化繁为简 250
11.3  无插件范式 250
11.4  HTML5的新特性 251
第12章　HTML5与HTML4的区别 252
  视频讲解：50分钟
12.1  语法的改变 253
12.1.1  HTML5的语法变化 253
12.1.2  HTML5中的标记方法 253
12.1.3  HTML5语法中需要掌握的3个要点 254
12.1.4  标记示例 255
12.2  新增的元素和废除的元素 256
12.2.1  新增的结构元素 256
12.2.2  新增的块级（block）的语义元素 257
12.2.3  新增的行内（inline）的语义元素 258
12.2.4  新增的嵌入多媒体元素与交互性元素 259
12.2.5  新增的input元素的类型 260
12.2.6  废除的元素 260
12.3  新增的属性和废除的属性 261
12.3.1  新增的属性 261
12.3.2  废除的属性 263
12.4  全局属性 265
12.4.1  contentEditable属性 265
12.4.2  designMode属性 267
12.4.3  hidden属性 268
12.4.4  spellcheck属性 269
12.4.5  tabindex属性 270
12.5  小结 270
12.6  习题 271
第13章　HTML5的结构 272
  视频讲解：18分钟
13.1  新增的主体结构元素 273
13.1.1  article元素 273
13.1.2  section元素 276
13.1.3  nav元素 279
13.1.4  aside元素 281
13.1.5  time元素 283
13.1.6  pubdate属性 283
13.2  新增的非主体结构元素 284
13.2.1  header元素 284
13.2.2  hgroup元素 284
13.2.3  footer元素 285
13.2.4  address元素 286
13.3  HTML5结构 287
13.3.1  大纲 287
13.3.2  对结构元素使用样式 291
13.3.3  article元素的样式 292
13.4  小结 292
13.5  习题 293
第14章　HTML5中的表单 294
  视频讲解：47分钟
14.1  新增元素与属性 295
14.1.1  新增的属性 295
14.1.2  增加与改良的input元素的种类 298
14.1.3  output元素的添加 305
14.1.4  应用新增元素制作注册表单 305
14.2  对表单的验证 307
14.2.1  自动验证 307
14.2.2  checkValidity显式验证法 308
14.2.3  避免验证 309
14.2.4  使用setCustomValidity方法自定义错误信息 310
14.3  增加的页面元素 311
14.3.1  新增的figure元素 312
14.3.2  新增的details元素 313
14.3.3  新增的mark元素 315
14.3.4  新增的progress元素 317
14.3.5  新增的meter元素 318
14.3.6  改良的ol列表 319
14.3.7  改良的dl列表 320
14.3.8  加以严格限制的cite元素 321
14.3.9  重新定义的small元素 322
14.4  小结 322
14.5  习题 323
第15章　HTML5中的文件与拖放 324
  视频讲解：40分钟
15.1  选择文件 325
15.1.1  通过file对象选择文件 325
15.1.2  使用Blob接口获取文件的类型与大小 326
15.1.3  通过类型过滤选择的文件 327
15.2　使用FileReader接口读取文件 329
15.2.1  检测浏览器对FileReader接口的支持性 329
15.2.2　FileReader接口的方法 329
15.2.3  使用readAsDataURL方法预览图片 330
15.2.4　使用readAsText方法读取文本文件 331
15.2.5　FileReader接口中的事件 333
15.3  拖放API 335
15.3.1  实现拖放的步骤 335
15.3.2  通过拖放显示欢迎信息 339
15.3.3  使用拖放将商品拖入购物车 341
15.4  dataTransfer对象应用详解 343
15.4.1  使用effectAllowed和dropEffect属性设置拖放效果 344
15.4.2  使用setDragImage方法设置拖放图标 344
15.5  小结 345
15.6  习题 346
第16章　多媒体播放 347
  视频讲解：35分钟
16.1  HTML5多媒体的简述 348
16.1.1  HTML4中多媒体的应用 348
16.1.2  HTML5页面中的多媒体 348
16.2  多媒体元素基本属性 349
16.3  多媒体元素常用方法 359
16.3.1  媒体播放时的方法 359
16.3.2  canPlayType(type)方法 360
16.4  多媒体元素重要事件 362
16.4.1  事件处理方式 362
16.4.2  事件介绍 363
16.4.3  事件示例 366
16.5  小结 368
16.6  习题 369
第17章　绘制图形 370
  视频讲解：1小时34分钟
17.1  canvas的基础知识 371
17.1.1  canvas的由来 371
17.1.2  canvas是什么 371
17.1.3  替代内容 371
17.1.4  CSS和canvas 372
17.1.5  浏览器对HTML5 Canvas的支持 372
17.1.6  在页面中放置canvas元素 372
17.1.7  绘制带边框矩形 374
17.2  在画布中使用路径 376
17.2.1  使用arc方法绘制圆形 376
17.2.2  使用moveTo与lineTo路径绘制火柴人 378
17.2.3  贝塞尔曲线 380
17.3  运用样式与颜色 382
17.3.1  fillStyle和strokeStyle属性 382
17.3.2  透明度globalAlpha 384
17.3.3  线型Line styles 385
17.4  绘制渐变图形 387
17.4.1  绘制线性渐变 387
17.4.2  绘制径向渐变 388
17.5  绘制变形图形 390
17.5.1  坐标的变换 390
17.5.2  坐标变换与路径的结合 391
17.5.3  矩阵变换 392
17.6  组合多个图形 395
17.7  给图形绘制阴影 398
17.8  应用图像 401
17.8.1  绘制图像 401
17.8.2  图像的局部放大 402
17.8.3  图像平铺 403
17.8.4  图像裁剪 405
17.8.5  像素的处理 406
17.9  绘制文字 408
17.10  保存与恢复状态 410
17.11  文件的保存 411
17.12  对画布绘制实现动画 412
17.13  综合实例—桌面时钟 414
17.14  小结 417
17.15  习题 417
第18章　SVG的使用 418
  视频讲解：1小时15分钟
18.1  SVG基础 419
18.1.1  为什么使用SVG 419
18.1.2  如何使用SVG 419
18.2  SVG绘制基本形状 420
18.2.1  绘制矩形 420
18.2.2  绘制圆形 421
18.2.3  绘制椭圆 422
18.2.4  绘制多边形 423
18.2.5  绘制直线 424
18.2.6  绘制曲线 425
18.2.7  绘制路径 426
18.2.8  绘制文本 428
18.3  SVG中的滤镜 429
18.3.1  SVG实现模糊效果 429
18.3.2  SVG实现马赛克效果 430
18.3.3  SVG实现文字阴影 432
18.4  SVG实现动画 432
18.4.1  animate 433
18.4.2  animateMotion 434
18.4.3  animateTransform 435
18.5  SVG中的渐变 437
18.5.1  线性渐变 437
18.5.2  径向渐变 438
18.6  小结 439
18.7  习题 439
第19章　数据存储 441
  视频讲解：49分钟
19.1  初识Web Storage 442
19.1.1  Web Storage是什么 442
19.1.2  使用Web Storage中的API 442
19.1.3  sessionStorage和localStorage的实例—计数器 447
19.1.4  Web Storage综合实例—留言本 449
19.1.5  JSON对象的存储实例—用户信息卡 451
19.2  本地数据库 453
19.2.1  Web SQL数据库简介 453
19.2.2  使用Web SQL Database API 454
19.2.3  本地数据库实例—用户登录 458
19.3  小结 461
19.4  习题 462
第20章　离线应用程序 463
  视频讲解：13分钟
20.1  HTML5离线Web应用概述 464
20.1.1  离线Web应用概述 464
20.1.2  本地缓存与浏览器网页缓存的区别 465
20.2  创建HTML5离线应用 465
20.2.1  缓存清单（manifest） 465
20.2.2  配置IIS服务器 467
20.2.3  浏览manifest清单 467
20.3  浏览器与服务器的交互过程 469
20.4  判断在线状态 471
20.5  applicationCache对象 474
20.5.1  swapCache方法 476
20.5.2  applicationCache对象的事件 478
20.6  小结 481
20.7  习题 481
第21章　使用Web Workers处理线程 482
  视频讲解：20分钟
21.1  Web Workers概述 483
21.1.1  创建和使用Worker 483
21.1.2  Web Workers应用实例—求和运算 485
21.1.3  与线程进行数据的交互 487
21.2  在Worker内部能做什么 489
21.3  多个JavaScript文件的加载与执行 490
21.4  线程嵌套 490
21.4.1  单层嵌套 491
21.4.2  在多个子线程中进行数据的交互 493
21.5  小结 496
21.6  习题 496
第22章　通信API 497
  视频讲解：3分钟
22.1  跨文档消息通信 498
22.1.1  使用postMessageAPI 498
22.1.2  跨文档消息传输 498
22.1.3  跨域通信 500
22.2  小结 503
第23章　获取地理位置信息 504
  视频讲解：12分钟
23.1  Geolocation API的概述 505
23.1.1  使用getCurrentPosition获取当前地理位置 505
23.1.2  持续监视当前地理位置的信息 507
23.1.3  停止获取当前用户的地理位置信息 507
23.2  position对象 507
23.3  在谷歌地图上显示“我在这里” 510
23.4  利用HTML5和百度地图实现定位处理 512
23.5  小结 514
23.6  习题 514
第24章　响应式网页设计 515
  视频讲解：36分钟
24.1  响应式概述 516
24.1.1  响应式网页设计的概念 516
24.1.2  响应式设计的技术原理 516
24.1.3  响应式设计的优缺点 517
24.2  响应式相关概念 517
24.2.1  像素和屏幕分辨率 517
24.2.2  视口 518
24.2.3  常见的网页布局类型 520
24.2.4  布局的常见实现方式 521
24.3  响应式设计的实现 522
24.3.1  通过CSS实现响应式设计 522
24.3.2  通过第三方插件实现响应式网页设计 525
24.4  小结 527
24.5  习题 527 
第3篇　HTML5项目实战 
第25章　旅游信息网前台页面 530
  视频讲解：22分钟
25.1  概述 531
25.2  网站预览 531
25.3  关键技术 535
25.3.1  网站主体结构设计 535
25.3.2  HTML5结构元素的使用 535
25.4  网站公共部分设计 536
25.4.1  设计网站公共header 536
25.4.2  设计网站公共footer 543
25.5  网站主页设计 544
25.5.1  显示网站介绍及相关图片 544
25.5.2  主页左侧导航的实现 545
25.6  “留下足迹”页面设计 548
25.6.1  播放音乐 548
25.6.2  添加留言功能的实现 549
25.7  小结 551
附录　习题参考答案 552