第1篇 基础知识
第1章 HTML简介 2
视频讲解：13分钟
1.1 HTML的基本概念 2
1.2 HTML的发展史 3
1.2.1 HTML的早期发展 3
1.2.2 从HTML到XHTML 3
1.2.3 HTML5的面市及发展 4
1.3 HTML5的改进 4
1.3.1 部分代替了原来的JavaScript 5
1.3.2 更明确的语义支持 5
1.3.3 增强了Web应用程序功能 6
1.4 各浏览器对HTML5的支持 6
第2章 HTML5基础 8
视频讲解：55分钟
2.1 编写第一个HTML文件 8
2.1.1 HTML文件的编写方法 8
2.1.2 手工编写页面 10
2.1.3 实例演练——创建基本的HTML网页 11
2.1.4 使用WebStorm制作页面 12
2.1.5 使用浏览器浏览HTML文件 16
2.1.6 如何查看网页源代码 17
2.1.7 编写文件的注意事项 19
2.2 HTML的基本结构 19
2.2.1 文件开始标签——<html> 19
2.2.2 文件头部标签——<head> 20
2.2.3 文件标题标签——<title> 20
2.2.4 基底网址标签——<base> 21
2.2.5 文件主体标签——<body> 22
2.2.6 注释——<!-- --> 29
2.3 元信息标签<meta> 29
2.3.1 设置页面关键字 29
2.3.2 设置页面描述 30
2.3.3 设置编辑工具 30
2.3.4 设定作者信息 31
2.3.5 限制搜索方式 31
2.3.6 设置网页文字及语言 32
2.3.7 设置网页的定时跳转 32
2.3.8 设定有效期限 33
2.3.9 禁止从缓存中调用 34
2.3.10 删除过期的cookie 34
2.3.11 强制打开新窗口 34
2.3.12 设定建立网站的日期 35
2.3.13 设定网页版权信息 35
2.3.14 设定联系人的邮箱 36
2.4 实践与练习 36
第3章 设计网页文本内容 39
视频讲解：107分钟
3.1 标题文字的建立 39
3.1.1 标题文字标签——<h> 40
3.1.2 标题文字对齐方式属性——align 40
3.2 设置文字格式 42
3.2.1 粗体、斜体、下画线标签——<strong>、<em>、<u> 42
3.2.2 上标与下标标签——<sup>、<sub> 42
3.2.3 设置删除线标签——<del>/<s> 43
3.2.4 等宽文字标签——<code> 43
3.2.5 空格与其他特殊符号 44
3.3 设置段落格式 45
3.3.1 段落标签——<p> 46
3.3.2 换行标签——<br> 46
3.3.3 保留原始排版方式标签——<pre> 47
3.3.4 向右缩进标签——<blockquote> 48
3.4 设置水平线格式 48
3.4.1 添加水平线标签——<hr> 49
3.4.2 设置水平线宽度与高度属性——width、size 49
3.4.3 设置水平线颜色属性——color 50
3.4.4 设置水平线对齐方式属性——align 51
3.4.5 去掉水平线阴影属性——noshade 52
3.5 其他文字标签 53
3.5.1 文字标注标签——<ruby> 53
3.5.2 声明变量标签——<var> 54
3.5.3 设置地址文字标签——<address> 54
3.6 页面显示增强标签 55
3.6.1 块级内容标签——<figure> 55
3.6.2 展开/收缩区域标签——<details> 56
3.6.3 高亮显示标签——<mark> 58
3.6.4 进度标签——<progress> 60
3.6.5 度量数量值标签——<meter> 60
3.6.6 引用标签——<cite> 61
3.6.7 小号字体标签——<small> 61
3.7 主体结构标签 62
3.7.1 独立自包含内容标签——<article> 62
3.7.2 节标签——<section> 64
3.7.3 导航链接标签——<nav> 64
3.7.4 附属信息标签——<aside> 65
3.7.5 日期时间标签——<time> 67
3.8 非主体结构标签 68
3.8.1 页眉标签——<header> 68
3.8.2 标题分组标签——<hgroup> 68
3.8.3 页脚标签——<footer> 69
3.9 实践与练习 69
第4章 使用列表 72
视频讲解：57分钟
4.1 列表基础 72
4.2 使用无序列表 73
4.2.1 创建无序列表——<ul>标签 73
4.2.2 设置无序列表的类型——type属性 74
4.3 使用有序列表 76
4.3.1 创建有序列表——<ol>标签 76
4.3.2 设置有序列表的类型——type属性 76
4.3.3 设置有序列表的起始数值——start属性 78
4.4 定义列表的创建及使用 80
4.5 嵌套列表的使用 82
4.5.1 无序列表和有序列表的互相嵌套 82
4.5.2 有序列表之间的嵌套 83
4.5.3 定义列表的嵌套 84
4.6 实践与练习 86
第5章 超链接 88
视频讲解：34分钟
5.1 超链接基础 88
5.1.1 什么是超链接 88
5.1.2 绝对路径 88
5.1.3 相对路径 89
5.2 超链接的建立 89
5.2.1 超链接标签——<a> 89
5.2.2 建立文本超链接 89
5.2.3 设置超链接的目标窗口 91
5.3 内部链接 93
5.4 书签链接 94
5.4.1 建立书签 95
5.4.2 为书签设置链接 95
5.5 外部链接 98
5.5.1 通过HTTP协议设置外部链接 98
5.5.2 通过超链接实现发送E-mail邮件 99
5.5.3 通过超链接实现文件下载 100
5.6 其他链接 101
5.6.1 脚本链接 101
5.6.2 空链接 102
5.7 实践与练习 102
第6章 使用图像 104
视频讲解：55分钟
6.1 图像基础 104
6.2 添加图像——<img>标签 105
6.3 设置图像属性 106
6.3.1 图像高度、宽度和边框 106
6.3.2 图像水平间距和垂直间距 107
6.3.3 图像相对于文字基准线的对齐方式 108
6.3.4 图像的提示文字和替换文字 109
6.4 图像超链接 110
6.4.1 设置图像的超链接 111
6.4.2 设置图像热区链接 113
6.5 实践与练习 114
第7章 表格的应用 119
视频讲解：79分钟
7.1 创建表格 119
7.1.1 创建表格的基本构成——<table>、<tr>、<td>标签 120
7.1.2 设置表格的标题——<caption>标签 120
7.1.3 设置表格的表头——<th>标签 121
7.2 设置表格基本属性 122
7.2.1 设置表格宽度——width属性 122
7.2.2 设置表格高度——height属性 124
7.2.3 设置表格对齐方式——align属性 125
7.3 设置表格的边框 126
7.3.1 设置表格边框宽度——border属性 126
7.3.2 设置表格边框颜色——bordercolor属性 127
7.3.3 设置表格内框宽度——cellspacing属性 128
7.3.4 设置表格内文字与边框间距——cellpadding属性 129
7.4 设置表格背景 130
7.4.1 设置表格的背景颜色——bgcolor属性 130
7.4.2 设置表格的背景图像——background属性 131
7.5 设置表格的行属性 132
7.5.1 行高度的控制——height属性 132
7.5.2 设置行背景——bgcolor、background属性 133
7.5.3 设置行文字的水平对齐方式——align属性 134
7.5.4 设置行文字的垂直对齐方式——valign属性 135
7.5.5 设置标题行的垂直对齐方式——align属性 135
7.6 设置表格的单元格属性 137
7.6.1 设置单元格的大小——width、height属性 137
7.6.2 设置单元格中文字的对齐方式——align、valign属性 138
7.6.3 设置单元格的背景颜色——bgcolor属性 139
7.6.4 设置单元格的背景图像——background属性 140
7.6.5 合并单元格——colspan、rowspan属性 141
7.7 统一表格样式的结构标签 143
7.7.1 表首标签——<thead> 143
7.7.2 表主体标签——<tbody> 144
7.7.3 表尾标签——<tfoot> 145
7.8 表格的嵌套 146
7.9 实践与练习 148
第8章 布局标签 150
视频讲解：35分钟
8.1 <div>标签 150
8.1.1 <div>标签简介 150
8.1.2 <div>标签的属性 151
8.2 <span>标签 157
8.2.1 <span>标签简介 158
8.2.2 <span>标签与<div>标签的比较 158
8.3 <iframe>标签 159
8.3.1 <iframe>标签简介 159
8.3.2 <iframe>标签的属性 160
8.4 案例：制作下拉菜单导航条 162
8.5 实践与练习 164
第9章 全局属性 166
视频讲解：23分钟
9.1 HTML5继承前版本的全局属性 166
9.1.1 title属性 166
9.1.2 dir属性 167
9.2 contenteditable属性 168
9.3 spellcheck属性 170
9.4 hidden属性 172
9.5 translate属性 174
9.6 tabindex属性 175
9.7 实践与练习 176
第10章 编辑表单 178
视频讲解：80分钟
10.1 表单标签——<form> 178
10.1.1 传送地址——action属性 178
10.1.2 表单名称——name属性 179
10.1.3 传送方式——method属性 180
10.1.4 编码方式——enctype属性 181
10.1.5 目标显示方式——target属性 181
10.1.6 自动完成——autocomplete属性 182
10.1.7 表单验证——novalidate属性 183
10.2 输入类元素 183
10.2.1 文本框——text属性值 185
10.2.2 密码域——password属性值 186
10.2.3 单选按钮——radio 188
10.2.4 复选框——checkbox属性值 189
10.2.5 普通按钮——button属性值 191
10.2.6 提交按钮——submit属性值 192
10.2.7 重置按钮——reset属性值 194
10.2.8 图像域——image属性值 194
10.2.9 隐藏域——hidden属性值 195
10.2.10 文件域——file属性值 196
10.3 文本域标签——<textarea> 197
10.4 标注与输出标签 199
10.4.1 标注标签——<label> 199
10.4.2 输出标签——<output> 200
10.5 按钮标签——<button> 201
10.5.1 使用<button>标签在页面中添加按钮 202
10.5.2 使用<button>标签与<input>标签添加按钮的区别 203
10.6 下拉列表 204
10.6.1 列表标签——<select> 204
10.6.2 选项标签——<option> 204
10.6.3 选项组标签——<optgroup> 206
10.6.4 自动完成下拉列表 207
10.7 对表单的验证 208
10.7.1 自动验证 208
10.7.2 checkValidity显式验证法 210
10.7.3 自定义错误信息 212
10.8 实践与练习 213
第2篇 高级应用
第11章 嵌入多媒体元素 216
视频讲解：51分钟
11.1 播放音频 216
11.1.1 音频格式 216
11.1.2 使用<audio>标签嵌入音频 217
11.1.3 使用JavaScript脚本控制音频播放 218
11.2 播放视频 221
11.2.1视频格式 221
11.2.2 使用<video>标签嵌入视频 221
11.2.3 为视频添加字幕 223
11.2.4 处理视频播放相关事件 229
11.2.5 使用JavaScript脚本控制视频播放 232
11.3 嵌入PDF文档 234
11.3.1 使用<object>标签嵌入PDF文档 234
11.3.2 使用<embed>标签嵌入PDF文档 235
11.4 实践与练习 236
第12章 文件操作 238
视频讲解：37分钟
12.1 使用文件对象 238
12.1.1 通过FileList对象和file对象获取文件信息 238
12.1.2 使用Blob对象获取文件的类型与大小 241
12.1.3 创建并使用Blob对象 243
12.1.4 截取Blob对象 244
12.2 使用FileReader对象读取文件 245
12.2.1 检测浏览器对FileReader对象的支持性 245
12.2.2 FileReader对象的方法与事件 245
12.2.3 使用readAsDataURL()方法预览图片 247
12.2.4 使用readAsText()方法读取文本文件 249
12.3 实践与练习 251
第13章 拖放操作 253
视频讲解：35分钟
13.1 拖放API 253
13.1.1 设置允许拖放 253
13.1.2 处理与拖放相关的事件 254
13.1.3 阻止拖放 255
13.2 dataTransfer对象 257
13.2.1 dataTransfer对象的常用属性 257
13.2.2 dataTransfer对象的常用方法 258
13.3 案例：通过拖放实现将商品加入购物车中 260
13.4 实践与练习 262
第14章 绘制图形 264
视频讲解：166分钟
14.1 初识Canvas 264
14.1.1 创建一个画布 265
14.1.2 Canvas的坐标系 265
14.1.3 绘制矩形 266
14.2 创建路径 269
14.2.1 创建矩形路径 269
14.2.2 创建直线路径 270
14.2.3 创建圆形路径 271
14.2.4 贝塞尔曲线 273
14.3 运用样式与颜色 275
14.3.1 fillStyle属性和strokeStyle属性 275
14.3.2 透明度——globalAlpha 276
14.3.3 线型——Line styles 277
14.4 实现渐变颜色 280
14.4.1 线性渐变 280
14.4.2 径向渐变 281
14.5 图形的变形 282
14.5.1 坐标的变换 282
14.5.2 路径的坐标变换 283
14.5.3 矩阵变换 284
14.6 组合多个图形 287
14.7 给图形绘制阴影 290
14.8 图像的处理 291
14.8.1 绘制图像 291
14.8.2 图像的局部放大 293
14.8.3 图像平铺 293
14.8.4 图像裁剪 295
14.8.5 像素的处理 296
14.9 绘制文字 297
14.10 保存与恢复Canvas状态 298
14.11 将Canvas对象转换为base64编码 299
14.12 制作动画 300
14.13 综合实例——桌面时钟 302
14.14 实践与练习 304
第15章 SVG的使用 306
视频讲解：75分钟
15.1 SVG基础 306
15.1.1 为什么使用SVG 306
15.1.2 如何使用SVG 307
15.2 使用SVG绘制基本形状 308
15.2.1 绘制矩形 309
15.2.2 绘制圆形 310
15.2.3 绘制椭圆 310
15.2.4 绘制多边形 311
15.2.5 绘制直线 312
15.2.6 绘制折线 313
15.2.7 绘制路径 314
15.2.8 绘制文本 315
15.3 SVG中的滤镜 318
15.3.1 SVG滤镜的使用方法 319
15.3.2 SVG实现模糊效果 319
15.3.3 SVG实现文字阴影 320
15.4 SVG实现动画 321
15.4.1 使用<animate>标签 321
15.4.2 使用<animateMotion>标签 322
15.4.3 使用<animateTransform>标签 323
15.5 SVG中的渐变 325
15.5.1 线性渐变 325
15.5.2 径向渐变 326
15.6 实践与练习 327
第16章 数据存储 330
视频讲解：50分钟
16.1 初识Web Storage 330
16.1.1 Web Storage是什么 330
16.1.2 测试浏览器是否支持Web Storage 331
16.1.3 使用Web Storage中的API 331
16.1.4 案例：sessionStorage对象的应用——分步注册 333
16.1.5 案例：localStorage对象的应用——自动登录 336
16.2 本地数据库 338
16.2.1 Web SQL Database简介 338
16.2.2 使用Web SQL Database API 338
16.2.3 使用IndexedDB API 346
16.3 实践与练习 351
第17章 使用Web Workers处理线程 353
视频讲解：20分钟
17.1 Web Workers API概述 353
17.1.1 创建和使用Web Worker对象 354
17.1.2 线程间数据交互的实例——数的累加 357
17.2 在Web Worker内部能做什么 359
17.3 多个JavaScript文件的加载与执行 360
17.4 线程嵌套 360
17.4.1 主线程中嵌套多个子线程 360
17.4.2 在多个子线程中进行数据的交互 363
17.5 实践与练习 366
第18章 HTML5消息通信 367
视频讲解：39分钟
18.1 跨文档消息通信 367
18.1.1 监听消息 367
18.1.2 发送消息 368
18.1.3 案例：同域跨文档消息通信 369
18.1.4 案例：跨域消息通信 370
18.2 消息通道通信 374
18.3 WebSocket全双工通信 378
18.3.1 什么是WebSocket 378
18.3.2 使用WebSocket API 378
18.4 Server-Sent Events服务器推送事件通信 383
18.5 实践与练习 386
第19章 获取地理位置信息 387
视频讲解：28分钟
19.1 Geolocation API的概述 387
19.1.1 获取当前地理位置——getCurrentPosition()方法 387
19.1.2 监视定位——watchCurrentPosition()方法 389
19.1.3 停止获取当前地理位置——clearWatch()方法 390
19.2 position对象的应用 390
19.3 利用HTML5和百度地图实现地图定位 393
19.4 实践与练习 395
第20章 HTML5其他应用 396
视频讲解：50分钟
20.1 操作浏览历史记录——History API 396
20.1.1 历史记录导航 397
20.1.2 添加历史记录条目 398
20.1.3 更新历史记录条目 401
20.2 实现桌面通知——Notification API 403
20.3 控制页面可见性——Page Visibility API 408
20.4 切换全屏模式——Fullscreen API 410
20.5 判断在线状态 412
20.5.1 使用navigator对象的onLine属性实现 412
20.5.2 为window对象添加online/offline事件监听器实现 414
20.6 实践与练习 416
第21章 响应式网页设计 417
视频讲解：36分钟
21.1 概述 417
21.1.1 响应式网页设计的概念 417
21.1.2 响应式网页设计的技术原理 418
21.1.3 响应式网页设计的优缺点 418
21.2 响应式相关概念 419
21.2.1 像素和屏幕分辨率 419
21.2.2 视口 420
21.2.3 常见的网页布局类型 422
21.2.4 布局的常见实现方式 422
21.3 响应式网页设计的实现 423
21.3.1 通过CSS实现响应式网页设计 423
21.3.2 通过第三方框架实现响应式网页设计 427
21.4 实践与练习 429
第3篇 项目实战
第22章 在线教育网站 432
视频讲解：10分钟
22.1 开发准备 432
22.1.1 网站概述 432
22.1.2 系统预览 432
22.1.3 实现过程分析 434
22.2 首页的设计与实现 437
22.2.1 首页设计 437
22.2.2 代码实现 438
22.3 登录页的设计与实现 440
22.3.1 登录页设计 440
22.3.2 代码实现 441
22.4 课程列表页的设计与实现 443
22.4.1 课程列表页设计 443
22.4.2 代码实现 444
22.5 课程详情页的设计与实现 446
22.5.1 课程详情页设计 446
22.5.2 代码实现 447