HTML5 从入门到精通（微课精编版）

目  录
第1 章 HTML5 基础   1
视频讲解：23 分钟
1.1 HTML5概述   2
1.1.1 HTML历史  2
1.1.2 HTML5起源  2
1.1.3 HTML5组织  4
1.1.4 HTML5规则  4
1.1.5 HTML5特性  4
1.1.6 浏览器检测  6
1.2 HTML5设计原则 6
1.2.1 避免不必要的复杂性  6
1.2.2 支持已有内容  7
1.2.3 解决实际问题  7
1.2.4 用户怎么使用就怎么设计规范  8
1.2.5 优雅地降级  8
1.2.6 支持的优先级  9
1.3 HTML5语法特性 10
1.3.1 文档和标记  10
1.3.2 宽松的约定 11
1.4 HTML5 API 12
1.4.1 新增的API  12
1.4.2 修改的API  12
1.4.3 扩展Document  12
1.4.4 扩展HTMLElement  12
1.4.5 扩展DOM HTML  12
1.4.6 弃用的API  12
第2 章 创建HTML5 文档 13
视频讲解：4 分钟
2.1 HTML5基本结构 14
2.1.1 新建网页文档  14
2.1.2 网页头部信息  15
2.1.3 网页主体内容  15
2.1.4 HTML标签  16
2.1.5 保存网页文档  18
2.2 语义化HTML   18
2.2.1 语义化的重要性  18
2.2.2 语义化的基本方法  18
2.3 案例实战 19
2.3.1 编写个HTML5文档  19
2.3.2 比较HTML4与HTML5文档结构  20
2.4 在线练习 21
第3 章 设计HTML5 文档结构   22
视频讲解：36 分钟
3.1 头部信息 23
3.1.1 定义网页标题  23
3.1.2 定义网页元信息  24
3.1.3 定义文档视口  25
3.1.4 head指南  27
3.1.5 移动版头信息  27
3.2 构建基本结构 27
3.2.1 定义文档结构  27
3.2.2 定义内容标题  28
3.2.3 使用div元素  30
3.2.4 使用id和class 31
3.2.5 使用title  32
3.2.6 HTML注释  32
3.3 构建语义结构 33
3.3.1 定义页眉  33
3.3.2 定义导航  34
3.3.3 定义主要区域  35
3.3.4 定义文章块  36
3.3.5 定义区块  37
3.3.6 定义附栏  40
3.3.7 定义页脚  41
3.3.8 使用role  42
3.4 案例实战 44
3.5 HTML5文档大纲 46
3.6 在线练习 46
第4 章 设计HTML5 文本 47
视频讲解：1 小时1 分钟
4.1 通用文本 48
4.1.1 标题文本  48
4.1.2 段落文本  48
4.2 描述文本 49
4.2.1 强调文本  49
4.2.2 标记细则  49
4.2.3 特殊格式  50
4.2.4 定义上标和下标  50
4.2.5 定义术语  52
4.2.6 标记代码  53
4.2.7 预定义格式  53
4.2.8 定义缩写词  54
4.2.9 标注编辑或不用文本  55
4.2.10 指明引用或参考  56
4.2.11 引述文本  56
4.2.12 换行显示  58
4.2.13 修饰文本  58
4.2.14 非文本注解  59
4.3 特殊文本 59
4.3.1 标记高亮显示  59
4.3.2 标记进度信息  60
4.3.3 标记刻度信息  61
4.3.4 标记时间信息  62
4.3.5 标记联系信息  63
4.3.6 标记显示方向  64
4.3.7 标记换行断点  65
4.3.8 标记旁注  65
4.4 HTML5全局属性 66
4.4.1 可编辑内容  66
4.4.2 快捷菜单  67
4.4.3 自定义属性  67
4.4.4 定义可拖动操作  69
4.4.5 拖动数据  69
4.4.6 隐藏元素  69
4.4.7 语法检查  69
4.4.8 翻译内容  70
4.5 在线练习 70
第5 章 设计HTML5 图像和多媒体   71
视频讲解：51 分钟
5.1 认识HTML5图像 72
5.2 使用图像 73
5.2.1 使用img元素  73
5.2.2 定义流内容  74
5.2.3 插入图标  75
5.2.4 定义图像大小  76
5.2.5 案例：图文混排  77
5.3 使用多媒体插件   78
5.3.1 使用embed元素  78
5.3.2 使用object元素  79
5.4 使用HTML5多媒体 80
5.4.1 使用audio元素 81
5.4.2 使用video元素 82
5.5 案例实战 86
5.5.1 设计新闻正文页  86
5.5.2 设计音乐播放器  90
5.5.3 设计视频播放器  92
5.6 HTML5多媒体API 95
5.6.1 设置属性  95
5.6.2 设置方法  95
5.6.3 设置事件  95
5.6.4 综合案例  95
5.7 在线练习 99
第6 章 设计列表和链接   100
视频讲解：52 分钟
6.1 定义列表 101
6.1.1 无序列表  101
6.1.2 有序列表  102
6.1.3 项目编号  103
6.1.4 设计CSS样式  104
6.1.5 嵌套列表  105
6.1.6 描述列表  106
6.1.7 菜单列表  108
6.1.8 快捷菜单 110
6.2 定义链接 112
6.2.1 普通链接 112
6.2.2 块链接 113
6.2.3 锚点链接 114
6.2.4 目标链接 115
6.2.5 下载链接 116
6.2.6 图像热点 117
6.2.7 框架链接 117
6.3 案例实战 119
6.3.1 为快捷菜单添加命令   119
6.3.2 设计快捷“我要分享”命令  120
6.3.3 设计任务列表命令  121
6.3.4 设计排行榜列表结构  122
6.3.5 设计图文列表栏目  124
6.4 在线练习 127
第7 章 设计表格   128
视频讲解：36 分钟
7.1 认识表格结构 129
7.2 新建表格 130
7.2.1 定义普通表格  131
7.2.2 定义列标题  131
7.2.3 定义表格标题  132
7.2.4 表格行分组  133
7.2.5 表格列分组  134
7.3 设置属性   137
7.3.1 定义单线表格  137
7.3.2 定义分离单元格  138
7.3.3 定义细线边框  139
7.3.4 添加表格说明  140
7.4 设置和属性 140
7.4.1 定义跨单元格显示  140
7.4.2 定义表头单元格  141
7.4.3 为单元格指定表头  142
7.4.4 定义信息缩写  143
7.4.5 单元格分类  143
7.5 案例实战：设计CSS禅意花园   144
7.5.1 网站预览  144
7.5.2 设计方法  146
7.5.3 设计思路  147
7.5.4 构建基本框架  147
7.5.5 完善网页结构  148
7.6 在线练习 151
第8 章 设计表单   152
视频讲解：1 小时12 分钟
8.1 认识HTML5表单 153
8.2 定义表单 154
8.3 提交表单 156
8.4 组织表单 156
8.5 定义文本框 158
8.6 定义标签 159
8.7 使用常用控件 160
8.7.1 密码框  161
8.7.2 单选按钮  161
8.7.3 复选框  162
8.7.4 文本区域  162
8.7.5 选择框  164
8.7.6 上传文件  165
8.7.7 隐藏字段  166
8.7.8 提交按钮  166
8.8 HTML5新型输入框 168
8.8.1 定义E-mail框 168
8.8.2 定义URL框  168
8.8.3 定义数字框  169
8.8.4 定义范围框  170
8.8.5 定义日期选择器  171
8.8.6 定义搜索框  175
8.8.7 定义电话号码框  176
8.8.8 定义拾色器  177
8.9 HTML5输入属性 177
8.9.1 定义自动完成  177
8.9.2 定义自动获取焦点  178
8.9.3 定义所属表单  179
8.9.4 定义表单重写  180
8.9.5 定义高和宽  181
8.9.6 定义列表选项  181
8.9.7 定义小值、值和步长  181
8.9.8 定义多选  182
8.9.9 定义匹配模式  182
8.9.10 定义替换文本  183
8.9.11 定义必填  184
8.10 HTML5新表单元素 184
8.10.1 定义数据列表  184
8.10.2 定义密钥对生成器  185
8.10.3 定义输出结果  186
8.11 HTML5表单属性 187
8.11.1 定义自动完成  187
8.11.2 定义禁止验证  187
8.12 在线练习 188
第9 章 综合实战：设计IT 博客   189
视频讲解：6 分钟
9.1 准备工作 190
9.2 设计首页 190
9.2.1 首页分析  190
9.2.2 构建网页标题  191
9.2.3 构建侧边栏  192
9.2.4 构建主体内容  194
9.2.5 构建版权信息  196
9.3 设计详细页 197
9.4 在线练习 200
第10 章 JavaScript 基础   201
视频讲解：2 小时19 分钟
10.1 在网页中使用JavaScript   202
10.1.1 编写脚本  202
10.1.2 脚本在网页中的位置  204
10.2 JavaScript基本规范   205
10.3 变量和类型 205
10.3.1 变量  205
10.3.2 数据类型  206
10.4 表达式和运算符   207
10.4.1 表达式  207
10.4.2 运算符  207
10.5 语 句 209
10.5.1 表达式语句和语句块  209
10.5.2 条件语句  209
10.5.3 循环语句  212
10.5.4 跳转语句  213
10.6 函 数 214
10.6.1 定义函数  214
10.6.2 调用函数  215
10.6.3 函数参数  216
10.7 对 象 217
10.7.1 创建对象  218
10.7.2 访问对象  218
10.8 数 组 219
10.8.1 定义数组  219
10.8.2 存取元素  220
10.8.3 应用数组  221
10.9 在线练习 221
第11 章 HTML5 绘图与动画222
视频讲解：2 小时15 分钟
11.1 使用canvas 223
11.2 绘制图形   225
11.2.1 矩形  225
11.2.2 路径  226
11.2.3 直线段  227
11.2.4 圆弧  228
11.2.5 二次贝塞尔曲线  230
11.2.6 三次贝塞尔曲线  231
11.3 定义样式和颜色 232
11.3.1 颜色  233
11.3.2 不透明度  234
11.3.3 实线  235
11.3.4 虚线  237
11.3.5 线性渐变  238
11.3.6 径向渐变  239
11.3.7 图案  240
11.3.8 阴影  240
11.3.9 填充规则  241
11.4 图形变形   242
11.4.1 保存和恢复状态  242
11.4.2 清除画布  243
11.4.3 移动坐标  244
11.4.4 旋转坐标  245
11.4.5 缩放图形  246
11.4.6 变换图形  247
11.5 图形合成   248
11.5.1 合成  249
11.5.2 裁切  251
11.6 绘制文本   252
11.6.1 填充文字  252
11.6.2 轮廓文字  253
11.6.3 文本样式  253
11.6.4 测量宽度  255
11.7 使用图像   256
11.7.1 导入图像  256
11.7.2 缩放图像  258
11.7.3 裁切图像  258
11.7.4 平铺图像  259
11.8 像素操作   260
11.8.1 认识ImageData对象  260
11.8.2 创建图像数据  261
11.8.3 将图像数据写入画布  261
11.8.4 在画布中复制图像数据  262
11.8.5 保存图片  263
11.9 Path2D对象   264
11.10 案例实战   264
11.10.1 设计基本动画  264
11.10.2 颜色选择器  264
11.10.3 给图像去色  265
11.10.4 缩放图像和反锯齿处理  265
11.10.5 设计运动动画  266
11.10.6 设计地球和月球公转动画  266
11.11 在线练习   266
第12 章 使用SVG 267
视频讲解：1 小时18 分钟
12.1 SVG基础 268
12.1.1 SVG发展历史  268
12.1.2 SVG特点  268
12.1.3 在HTML中应用SVG  269
12.1.4 案例：设计个SVG图形  269
12.2 使用SVG 271
12.2.1 矩形  271
12.2.2 圆形  272
12.2.3 椭圆  273
12.2.4 多边形  275
12.2.5 直线段  276
12.2.6 折线  277
12.2.7 路径  278
12.2.8 文本  280
12.2.9 线框样式  281
12.2.10 SVG滤镜  284
12.2.11 模糊效果  285
12.2.12 阴影效果  285
12.2.13 线性渐变  286
12.2.14 放射渐变  287
12.3 案例实战 288
12.3.1 手绘简笔画  288
12.3.2 描边动画  288
12.3.3 设计特效文字  288
12.3.4 自定义滤镜  289
12.4 在线练习 289
第13 章 HTML5 本地存储   290
视频讲解：1 小时8 分钟
13.1 Web Storage 291
13.1.1 使用Web Storage  291
13.1.2 案例：记录用户登录信息（1）  293
13.1.3 案例：计数器  294
13.2 Web SQL Database 295
13.2.1 使用Web SQL Database  295
13.2.2 案例：记录用户登录信息（2）  300
13.2.3 案例：设计留言板  301
13.3 indexedDB 302
13.3.1 建立连接  302
13.3.2 更新版本  304
13.3.3 新建仓库  306
13.3.4 新建索引  307
13.3.5 使用事务  309
13.3.6 保存数据  310
13.3.7 访问数据  312
13.3.8 访问键值  313
13.3.9 访问属性  313
13.3.10 案例：设计图书管理页面  314
13.4 在线练习 314
第14 章 HTML5 离线缓存   315
视频讲解：19 分钟
14.1 ApplicationCache API基础316
14.1.1 认识ApplicationCache API  316
14.1.2 配置服务器  317
14.1.3 认识manifest  318
14.1.4 使用ApplicationCache 320
14.1.5 事件监听  324
14.2 案例实战 325
14.2.1 缓存首页  325
14.2.2 离线编辑  328
14.3 在线练习 328
第15 章 HTML5 Web Workers   329
视频讲解：23 分钟
15.1 Web Workers基础 330
15.1.1 认识Web Workers  330
15.1.2 创建Web Workers  331
15.1.3 Workers通信  333
15.1.4 使用Web Workers  334
15.2 案例实战 337
15.2.1 求和运算  337
15.2.2 过滤运算  339
15.2.3 并发运算  341
15.2.4 多运算通信  341
15.2.5 数列运算  341
第16 章 HTML5 文件操作   342
视频讲解：1 小时24 分钟
16.1 FileList 343
16.2 Blob   344
16.2.1 访问Blob  344
16.2.2 创建Blob  345
16.2.3 截取Blob  347
16.2.4 保存Blob  348
16.3 FileReader   349
16.3.1 读取文件  349
16.3.2 事件监测  351
16.4 ArrayBuffer和ArrayBufferView   353
16.4.1 使用ArrayBuffer  353
16.4.2 使用ArrayBufferView  353
16.4.3 使用DataView  354
16.5 FileSystem API 357
16.5.1 认识FileSystem API  357
16.5.2 访问FileSystem  358
16.5.3 申请配额  359
16.5.4 新建文件  363
16.5.5 写入数据  365
16.5.6 添加数据  366
16.5.7 读取数据  367
16.5.8 复制文件  369
16.5.9 删除文件  370
16.5.10 创建目录  371
16.5.11 读取目录  371
16.5.12 删除目录  372
16.5.13 复制目录  372
16.5.14 重命名目录  372
16.5.15 使用filesystem:URL  372
16.6 案例：设计资源管理器   373
16.7 在线练习 373
第17 章 HTML5 通信 374
视频讲解：21 分钟
17.1 跨文档消息传递   375
17.1.1 postMessage基础  375
17.1.2 案例：设计简单的跨域通话  376
17.1.3 案例：设计跨域动态对话  377
17.1.4 案例：设计通道通信  378
17.2 WebSockets通信 381
17.2.1 WebSocket基础  381
17.2.2 使用WebSockets API 382
17.2.3 在PHP中建立socket  386
17.2.4 WebSockets API开发框架  387
17.2.5 案例：设计简单的“呼-应”通信  388
17.2.6 案例：发送JSON对象  393
17.2.7 案例：使用Workerman框架通信  394
17.2.8 案例：推送信息  395
17.3 在线练习 395
第18 章 拖放操作   396
视频讲解：19 分钟
18.1 拖放API基础 397
18.1.1 拖放功能实现  397
18.1.2 DataTransfer对象  400
18.2 案例实战 402
18.2.1 设计垃圾箱  403
18.2.2 设计接纳箱  405
18.2.3 拖选对象  405
18.2.4 可视化删除  406
18.3 在线练习 406
第19 章 HTML5 Ajax 407
视频讲解：38 分钟
19.1 XMLHttpRequest 2基础408
19.1.1 请求时限  408
19.1.2 FormData数据对象  408
19.1.3 上传文件  409
19.1.4 跨域访问  409
19.1.5 响应不同类型数据  409
19.1.6 接收二进制数据  409
19.1.7 监测数据传输进度  410
19.2 案例实战 411
19.2.1 接收ArrayBuffer对象 411
19.2.2 接收Blob对象  414
19.2.3 发送字符串  414
19.2.4 发送表单数据  415
19.2.5 发送二进制文件  417
19.2.6 发送Blob对象  418
19.2.7 跨域请求  418
19.2.8 设计文件上传进度条  419
19.3 在线练习 419
第20 章 WebRTC 视频直播 420
20.1 WebRTC基础 421
20.2 案例实战 421
20.2.1 访问本地设备  421
20.2.2 视频截图  423
20.2.3 视频对话基础  424
20.2.4 视频对话实现  425
20.2.5 SDP交换  432
20.2.6 ICE交换  437
20.3 在线练习 439
第21 章 HTML5 定位 440
视频讲解：2 分钟
21.1 Geolocation API基础   441
21.1.1 Geolocation API应用场景  441
21.1.2 位置信息来源  441
21.1.3 位置信息表示方式  441
21.1.4 获取位置信息  442
21.1.5 浏览器兼容性  444
21.1.6 监测位置信息  444
21.1.7 停止获取位置信息  445
21.1.8 保护隐私  445
21.1.9 处理位置信息  445
21.1.10 使用position 446
21.2 案例：设计位置地图   447
21.3 在线练习 448
第22 章 HTML5 History 449
视频讲解：26 分钟
22.1 History API基础 450
22.1.1 了解History API  450
22.1.2 使用History API  451
22.1.3 注意事项  453
22.2 案例实战 453
22.2.1 设计导航页面  453
22.2.2 设计无刷新网站  455
22.2.3 设计无刷新灯箱广告  459
22.2.4 设计可后退画板  460
22.3 在线练习 460
第23 章 HTML5 通知和显示处理   461
视频讲解：23 分钟
23.1 通知API 462
23.1.1 Notification API基础  462
23.1.2 案例：设计桌面通知  464
23.1.3 案例：关闭通知  465
23.1.4 案例：设计多条通知  466
23.2 页面可见API 467
23.2.1 Page Visibility基础  467
23.2.2 案例：设计视频页面  469
23.2.3 案例：设计登录页面  471
23.3 全屏API 472
23.3.1 Fullscreen API基础. 472
23.3.2 案例：设计全屏显示  474
23.3.3 案例：设计全屏播放  476
23.4 在线练习 477
第24 章 综合实战：设计响应式网站   478
24.1 认识响应式Web设计 479
24.2 构建页面 479
24.3 设计基本样式   482
24.3.1 兼容早期浏览器  482
24.3.2 重置默认样式  482
24.4 设计响应式样式   483
24.4.1 创建可伸缩图像  483
24.4.2 创建弹性布局网格  484
24.4.3 实现媒体查询  484
24.4.4 组合样式  488
24.4.5 兼容旧版IE  494