HTML5+CSS3从入门到精通（微课精编版 第2版）

■上册 · HTML5篇

第1章 HTML5基础 / 1

1.1 HTML5概述 / 1

1.1.1 HTML历史 / 1

1.1.2 HTML5起源 / 2

1.1.3 HTML5组织 / 3

1.1.4 HTML5规则 / 3

1.1.5 HTML5特性 / 3

1.1.6 浏览器支持 / 5

1.2 HTML5设计原则 / 5

1.2.1 避免不必要的复杂性 / 6

1.2.2 支持已有内容 / 6

1.2.3 解决实际问题 / 7

1.2.4 用户怎么使用就怎么设计规范 / 7

1.2.5 优雅地降级 / 7

1.2.6 支持的优先级 / 8

1.3 HTML5语法特性 / 9

1.3.1 文档和标记 / 9

1.3.2 宽松的约定 / 9

1.4 HTML5 API / 10

1.4.1 新增的API / 10

1.4.2 修改的API / 11

1.4.3 扩展Document / 12

1.4.4 扩展HTMLElement / 12

1.4.5 其他接口扩展 / 13

1.4.6 弃用的API / 14

1.5 案例实战 / 14

1.5.1 新建HTML5文档 / 14

1.5.2 比较HTML4和HTML5文档 / 15

1.6 在线支持 / 16

第2章 HTML5文档 / 17

2.1 HTML5标签概述 / 17

2.1.1 新增的元素 / 17

2.1.2 废除的元素 / 17

2.1.3 新增的属性 / 18

2.1.4 废除的属性 / 18

2.1.5 新增的事件 / 18

2.1.6 事件监听配置对象 / 19

2.2 HTML5全局属性 / 20

2.2.1 内容可编辑 / 20

2.2.2 data—自定义属性 / 21

2.2.3 draggable—拖动 / 22

2.2.4 hidden—隐藏 / 22

2.2.5 语法检查 / 22

2.2.6 翻译 / 23

2.3 HTML5新结构 / 23

2.3.1 定义页眉 / 23

2.3.2 定义导航 / 24

2.3.3 定义主要区域 / 25

2.3.4 定义文章块 / 26

2.3.5 定义区块 / 27

2.3.6 定义附栏 / 28

2.3.7 定义页脚 / 29

2.3.8 使用role / 30

2.4 案例实战 / 31

2.5 在线支持 / 33

第3章 HTML5文本 / 34

3.1 通用文本 / 34

3.1.1 标题文本 / 34

3.1.2 段落文本 / 34

3.2 描述性文本 / 35

3.2.1 强调文本 / 35

3.2.2 标记细则 / 35

3.2.3 特殊格式 / 36

3.2.4 定义上标和下标 / 36

3.2.5 定义术语 / 38

3.2.6 标记代码 / 39

3.2.7 预定义格式 / 39

3.2.8 定义缩写词 / 40

3.2.9 标注编辑或不用文本 / 40

3.2.10 指明引用或参考 / 42

3.2.11 引述文本 / 42

3.2.12 换行显示 / 44

3.2.13 修饰文本 / 44

3.2.14 非文本注解 / 44

3.3 特殊用途文本 / 45

3.3.1 标记高亮显示 / 45

3.3.2 标记进度信息 / 46

3.3.3 标记刻度信息 / 47

3.3.4 标记时间信息 / 48

3.3.5 标记联系信息 / 49

3.3.6 标记显示方向 / 49

3.3.7 标记换行断点 / 50

3.3.8 标记旁注 / 50

3.3.9 标记展开/收缩详细信息 / 51

3.3.10 标记对话框信息 / 51

3.4 其他类型文本 / 53

3.4.1 超链接 / 53

3.4.2 有序列表 / 53

3.4.3 描述列表 / 54

3.4.4 浮动框架 / 54

3.4.5 异步执行脚本 / 54

3.5 在线支持 / 55

第4章 HTML5多媒体 / 56

4.1 响应式图像 / 56

4.1.1 定义流内容 / 56

4.1.2 使用picture元素 / 57

4.1.3 设计横屏和竖屏显示 / 58

4.1.4 根据分辨率显示不同图像 / 59

4.1.5 根据格式显示不同图像 / 59

4.1.6 自适应像素比 / 59

4.1.7 自适应视图宽 / 60

4.2 使用插件 / 61

4.3 使用音频和视频 / 62

4.3.1 使用audio元素 / 62

4.3.2 使用video元素 / 63

4.3.3 视频同步字幕 / 65

4.4 案例实战 / 69

4.5 在线支持 / 72

第5章 HTML5表单 / 73

5.1 认识HTML5表单 / 73

5.2 HTML5新型输入框 / 74

5.2.1 定义E-mail框 / 74

5.2.2 定义URL框 / 74

5.2.3 定义数字框 / 75

5.2.4 定义范围框 / 76

5.2.5 定义日期选择器 / 77

5.2.6 定义搜索框 / 80

5.2.7 定义电话号码框 / 81

5.2.8 定义拾色器 / 81

5.3 HTML5输入属性 / 82

5.3.1 定义自动完成 / 82

5.3.2 定义自动获取焦点 / 83

5.3.3 定义所属表单 / 84

5.3.4 定义表单重写 / 84

5.3.5 定义高和宽 / 85

5.3.6 定义列表选项 / 85

5.3.7 定义最小值、最大值和步长 / 85

5.3.8 定义多选 / 86

5.3.9 定义匹配模式 / 86

5.3.10 定义替换文本 / 87

5.3.11 定义必填 / 87

5.3.12 定义文本区域 / 88

5.3.13 定义复选框状态 / 88

5.3.14 获取文本选取方向 / 89

5.3.15 访问标签绑定的控件 / 89

5.3.16 访问控件的标签集 / 90

5.4 HTML5新表单元素 / 90

5.4.1 定义数据列表 / 90

5.4.2 定义密钥对生成器 / 91

5.4.3 定义输出结果 / 91

5.5 HTML5表单属性 / 92

5.5.1 定义自动完成 / 92

5.5.2 定义禁止验证 / 93

5.6 案例实战 / 93

5.6.1 设计HTML5表单页 / 93

5.6.2 设计表单验证 / 95

5.7 在线支持 / 97

第6章 HTML5绘图 / 98

6.1 使用canvas / 98

6.2 绘制图形 / 100

6.2.1 矩形 / 100

6.2.2 路径 / 100

6.2.3 直线 / 102

6.2.4 圆弧 / 102

6.2.5 二次方曲线 / 104

6.2.6 三次方曲线 / 105

6.3 定义样式和颜色 / 106

6.3.1 颜色 / 106

6.3.2 不透明度 / 107

6.3.3 实线 / 108

6.3.4 虚线 / 110

6.3.5 线性渐变 / 110

6.3.6 径向渐变 / 111

6.3.7 图案 / 112

6.3.8 阴影 / 112

6.3.9 填充规则 / 113

6.4 图形变形 / 113

6.4.1 保存和恢复状态 / 113

6.4.2 清除画布 / 114

6.4.3 移动坐标 / 115

6.4.4 旋转坐标 / 116

6.4.5 缩放图形 / 117

6.4.6 变换图形 / 118

6.5 图形合成 / 119

6.5.1 合成 / 119

6.5.2 裁切 / 121

6.6 绘制文本 / 121

6.6.1 填充文字 / 121

6.6.2 轮廓文字 / 122

6.6.3 文本样式 / 123

6.6.4 测量宽度 / 124

6.7 使用图像 / 125

6.7.1 导入图像 / 125

6.7.2 缩放图像 / 126

6.7.3 裁切图像 / 127

6.7.4 平铺图像 / 127

6.8 像素操作 / 128

6.8.1 认识ImageData对象 / 128

6.8.2 创建图像数据 / 129

6.8.3 将图像数据写入画布 / 129

6.8.4 在画布中复制图像数据 / 130

6.8.5 保存图片 / 131

6.9 案例实战 / 131

6.10 在线支持 / 134

第7章 HTML5 SVG矢量图 / 135

7.1 SVG基础 / 135

7.1.1 SVG发展历史 / 135

7.1.2 SVG特点 / 135

7.1.3 在HTML中应用SVG / 136

7.1.4 设计第一个SVG图形 / 136

7.2 使用SVG / 137

7.2.1 矩形 / 137

7.2.2 圆形 / 139

7.2.3 椭圆 / 139

7.2.4 多边形 / 140

7.2.5 直线 / 141

7.2.6 折线 / 141

7.2.7 路径 / 142

7.2.8 文本 / 143

7.2.9 线框样式 / 144

7.2.10 SVG滤镜 / 146

7.2.11 模糊效果 / 147

7.2.12 阴影效果 / 147

7.2.13 线性渐变 / 147

7.2.14 放射渐变 / 148

7.3 案例实战 / 149

7.4 在线支持 / 151

第8章 HTML5请求动画和异步处理 / 152

8.1 请求动画 / 152

8.1.1 requestAnimationFrame基础 / 152

8.1.2 案例：设计进度条 / 153

8.2 异步处理 / 154

8.2.1 Promise基础 / 154

8.2.2 创建Promise对象 / 159

8.2.3 使用then()方法 / 160

8.2.4 队列化异步操作 / 162

8.2.5 异常处理 / 163

8.2.6 创建序列 / 164

8.2.7 并行处理 / 166

8.3 在线支持 / 168

第9章 HTML5文件操作 / 169

9.1 FileList / 169

9.2 Blob / 170

9.2.1 访问Blob / 170

9.2.2 创建Blob / 171

9.2.3 截取Blob / 172

9.2.4 保存Blob / 173

9.3 FileReader / 174

9.3.1 读取文件 / 174

9.3.2 事件监测 / 176

9.4 ArrayBuffer和ArrayBufferView / 177

9.4.1 使用ArrayBuffer / 178

9.4.2 使用ArrayBufferView / 178

9.4.3 使用DataView / 179

9.5 FileSystem API / 181

9.5.1 认识FileSystem API / 181

9.5.2 访问FileSystem / 181

9.5.3 申请配额 / 183

9.5.4 新建文件 / 184

9.5.5 写入数据 / 186

9.5.6 添加数据 / 187

9.5.7 读取数据 / 188

9.5.8 复制文件 / 188

9.5.9 删除文件 / 189

9.5.10 创建目录 / 190

9.5.11 读取目录 / 191

9.5.12 删除目录 / 193

9.5.13 复制目录 / 194

9.5.14 重命名目录 / 195

9.5.15 使用filesystem:URL / 196

9.6 案例实战 / 197

9.7 在线支持 / 199

第10章 HTML5通信 / 200

10.1 跨文档发送消息 / 200

10.2 消息通道通信 / 203

10.3 网络套接字通信 / 205

10.3.1 什么是Socket / 205

10.3.2 为什么需要Socket / 206

10.3.3 Socket的历史 / 206

10.3.4 WebSocket基础 / 207

10.3.5 使用WebSocket API / 207

10.3.6 案例：设计简单的通信 / 209

10.3.7 案例：发送JSON信息 / 213

10.4 服务器推送事件通信 / 213

10.4.1 Server-Sent Events基础 / 213

10.4.2 使用Server-Sent Events / 214

10.5 广播通道通信 / 217

10.6 案例实战 / 218

10.7 在线支持 / 221

第11章 HTML5存储 / 222

11.1 Web Storage / 222

11.1.1 使用Web Storage / 222

11.1.2 案例：用户登录 / 223

11.2 indexedDB / 225

11.2.1 indexedDB概述 / 225

11.2.2 建立连接 / 225

11.2.3 数据库版本 / 227

11.2.4 对象仓库 / 227

11.2.5 索引 / 229

11.2.6 事务 / 231

11.2.7 游标 / 233

11.2.8 保存数据 / 234

11.2.9 访问数据 / 235

11.2.10 更新版本 / 236

11.2.11 访问键值 / 236

11.2.12 访问属性 / 238

11.2.13 案例：留言本 / 240

11.3 案例实战 / 242

11.4 在线支持 / 251

第12章 HTML5异步请求 / 252

12.1 XMLHttpRequest 2基础 / 252

12.1.1 XMLHttpRequest 2概述 / 252

12.1.2 请求时限 / 252

12.1.3 FormData数据对象 / 253

12.1.4 上传文件 / 254

12.1.5 跨域访问 / 255

12.1.6 响应不同类型数据 / 256

12.1.7 接收二进制数据 / 257

12.1.8 监测数据传输进度 / 260

12.2 Fetch基础 / 263

12.2.1 Fetch概述 / 263

12.2.2 使用Fetch / 263

12.2.3 Fetch接口类型 / 265

12.3 案例实战 / 266

12.3.1 接收Blob对象 / 266

12.3.2 发送Blob对象 / 267

12.4 在线支持 / 268

第13章 HTML5线程 / 269

13.1 Web Workers基础 / 269

13.1.1 Web Workers概述 / 269

13.1.2 使用Worker / 270

13.1.3 使用共享线程 / 273

13.1.4 使用Inline Worker / 275

13.2 案例实战 / 276

13.2.1 过滤运算 / 276

13.2.2 并发运算 / 277

13.3 在线支持 / 279

第14章 HTML5缓存 / 280

14.1 online/offline status API基础 / 280

14.2 Cache API基础 / 281

14.2.1 Cache API概述 / 281

14.2.2 使用Cache / 282

14.3 Service Worker基础 / 285

14.3.1 Service Worker概述 / 285

14.3.2 使用Service Worker / 286

14.4 案例实战 / 291

14.5 在线支持 / 293

第15章 HTML5 Web组件 / 294

15.1 HTML5模板 / 294

15.1.1 认识template / 294

15.1.2 使用template元素 / 295

15.1.3 应用模板 / 296

15.2 Shadow DOM组件 / 297

15.2.1 认识Shadow DOM / 297

15.2.2 创建Shadow DOM / 298

15.2.3 使用slot元素 / 300

15.2.4 设置Shadow DOM样式 / 301

15.2.5 使用slotchange事件 / 305

15.3 自定义元素 / 306

15.3.1 认识自定义元素 / 306

15.3.2 新建自定义元素 / 307

15.3.3 派生元素类型 / 307

15.3.4 注册自定义元素 / 308

15.3.5 生命周期响应函数 / 309

15.3.6 元素升级 / 310

15.3.7 派生内置元素类型 / 311

15.3.8 自定义元素的属性 / 311

15.3.9 设置自定义元素的内容 / 312

15.4 HTML导入 / 313

15.5 在线支持 / 314

第16章 HTML5历史记录 / 315

16.1 History API基础 / 315

16.1.1 认识History API / 315

16.1.2 使用History API / 315

16.2 案例实战 / 317

16.2.1 设计无刷新站点导航 / 317

16.2.2 设计能回退的画板 / 319

16.3 在线支持 / 321

第17章 HTML5访问多媒体设备 / 322

17.1 WebRTC基础 / 322

17.1.1 认识WebRTC / 322

17.1.2 访问本地设备 / 323

17.2 案例实战 / 325

17.2.1 拍照和摄像 / 325

17.2.2 录音并压缩 / 326

17.3 在线支持 / 329

第18章 HTML5访问传感器 / 330

18.1 传感器API基础 / 330

18.1.1 认识传感器API / 330

18.1.2 方向事件和移动事件 / 330

18.1.3 浏览器支持 / 332

18.1.4 应用场景 / 332

18.2 案例实战 / 332

18.2.1 记录摇手机的次数 / 332

18.2.2 重力测试小游戏 / 334

18.3 在线支持 / 335

第19章 HTML5访问位置 / 336

19.1 Geolocation API基础 / 336

19.1.1 Geolocation API应用场景 / 336

19.1.2 位置信息来源 / 336

19.1.3 位置信息表示方式 / 336

19.1.4 获取位置信息 / 337

19.1.5 浏览器兼容性 / 338

19.1.6 监测位置信息 / 339

19.1.7 停止获取位置信息 / 339

19.1.8 保护隐私 / 339

19.1.9 处理位置信息 / 340

19.1.10 使用position / 340

19.2 案例实战 / 341

19.2.1 定位手机位置 / 341

19.2.2 获取经纬度及其详细地址 / 342

19.2.3 输入提示查询位置 / 343

19.2.4 从当前位置查询指定位置路线 / 344

19.2.5 记录行踪路线 / 345

19.3 在线支持 / 347

第20章 HTML5拖放操作 / 348

20.1 拖放API基础 / 348

20.1.1 定义拖放功能 / 348

20.1.2 认识DataTransfer对象 / 350

20.2 案例实战 / 353

20.3 在线支持 / 355

第21章 HTML5通知和显示 / 356

21.1 通知API / 356

21.1.1 Notification API基础 / 356

21.1.2 案例：设计桌面通知 / 358

21.1.3 案例：关闭通知 / 358

21.1.4 案例：设计多条通知 / 359

21.2 页面可见API / 360

21.2.1 Page Visibility API基础 / 360

21.2.2 案例：设计视频页面 / 362

21.3 全屏API / 363

21.3.1 Fullscreen API基础 / 363

21.3.2 案例：设计全屏播放 / 365

21.4 在线支持 / 366

■下册 · CSS3篇

第22章 CSS3基础 / 367

22.1 CSS3概述 / 367

22.1.1 CSS历史 / 367

22.1.2 CSS3模块 / 368

22.1.3 CSS3特性 / 368

22.1.4 浏览器兼容性 / 369

22.2 CSS3选择器概述 / 369

22.3 使用CSS3选择器 / 371

22.3.1 兄弟选择器 / 371

22.3.2 属性选择器 / 372

22.3.3 伪类选择器 / 373

22.3.4 伪对象选择器 / 374

22.4 案例实战 / 375

22.5 在线支持 / 379

第23章 CSS3文本 / 380

23.1 CSS3文本模块 / 380

23.1.1 文本模块概述 / 380

23.1.2 文本溢出 / 381

23.1.3 文本换行 / 381

23.1.4 书写模式 / 382

23.1.5 initial值 / 383

23.1.6 inherit值 / 384

23.1.7 unset值 / 385

23.1.8 all属性 / 385

23.1.9 opacity属性 / 385

23.1.10 transparent值 / 386

23.1.11 currentColor值 / 387

23.1.12 rem值 / 387

23.1.13 font-size-adjust属性 / 388

23.2 色彩模式 / 388

23.2.1 rgba()函数 / 389

23.2.2 hsl()函数 / 389

23.2.3 hsla()函数 / 390

23.3 文本阴影 / 390

23.4 动态生成内容 / 392

23.5 网络字体 / 393

23.6 案例实战 / 395

23.7 在线支持 / 398

第24章 CSS3背景 / 399

24.1 背景图像 / 399

24.1.1 设置定位原点 / 399

24.1.2 设置裁剪区域 / 400

24.1.3 设置背景图像大小 / 401

24.1.4 设置多重背景图像 / 402

24.2 渐变背景 / 403

24.2.1 定义线性渐变 / 404

24.2.2 定义重复线性渐变 / 407

24.2.3 定义径向渐变 / 408

24.2.4 定义重复径向渐变 / 412

24.3 案例实战 / 413

24.3.1 设计条纹 / 413

24.3.2 设计纹理 / 415

24.3.3 设计折角效果 / 416

24.3.4 设计图标 / 417

24.4 在线支持 / 418

第25章 CSS3用户接口 / 419

25.1 界面显示 / 419

25.1.1 显示方式 / 419

25.1.2 调整尺寸 / 420

25.1.3 缩放比例 / 421

25.2 轮廓 / 421

25.3 边框 / 423

25.3.1 定义图像源 / 423

25.3.2 定义平铺方式 / 424

25.3.3 定义宽度 / 425

25.3.4 定义分割方式 / 425

25.3.5 定义扩展 / 426

25.3.6 定义圆角 / 427

25.4 盒子阴影 / 429

25.5 案例实战 / 431

25.6 在线支持 / 434

第26章 CSS3布局 / 435

26.1 旧版弹性盒 / 435

26.1.1 启动弹性盒 / 435

26.1.2 设置宽度 / 435

26.1.3 设置顺序 / 437

26.1.4 设置方向 / 438

26.1.5 设置对齐方式 / 439

26.2 新版弹性盒 / 440

26.2.1 认识Flexbox系统 / 440

26.2.2 启动弹性盒 / 441

26.2.3 设置主轴方向 / 442

26.2.4 设置行数 / 443

26.2.5 设置对齐方式 / 444

26.2.6 设置弹性项目 / 445

26.3 多列布局 / 448

26.3.1 设置列宽 / 448

26.3.2 设置列数 / 448

26.3.3 设置间距 / 449

26.3.4 设置列边框 / 450

26.3.5 设置跨列显示 / 450

26.3.6 设置列高度 / 451

26.4 案例实战 / 451

26.5 在线支持 / 454

第27章 CSS3动画 / 455

27.1 元素变形 / 455

27.1.1 认识Transform / 455

27.1.2 设置原点 / 455

27.1.3 2D旋转 / 456

27.1.4 2D缩放 / 457

27.1.5 2D平移 / 457

27.1.6 2D倾斜 / 458

27.1.7 2D矩阵 / 458

27.1.8 设置变形类型 / 459

27.1.9 设置透视距离和原点 / 459

27.1.10 3D平移 / 462

27.1.11 3D缩放 / 463

27.1.12 3D旋转 / 463

27.1.13 透视函数 / 464

27.1.14 变形原点 / 465

27.1.15 背景可见 / 465

27.2 过渡动画 / 465

27.2.1 设置过渡属性 / 466

27.2.2 设置过渡时间 / 466

27.2.3 设置延迟过渡时间 / 467

27.2.4 设置过渡动画类型 / 467

27.2.5 设置过渡触发动作 / 468

27.3 帧动画 / 472

27.3.1 设置关键帧 / 472

27.3.2 设置动画属性 / 473

27.4 案例实战 / 475

27.5 在线支持 / 476

第28章 CSS3媒体查询 / 477

28.1 媒体查询基础 / 477

28.1.1 媒体类型和媒体查询 / 477

28.1.2 使用@media / 478

28.1.3 应用@media / 479

28.2 案例实战 / 482

28.2.1 设计响应式菜单 / 482

28.2.2 设计自动隐藏的栏目 / 483

28.2.3 设计自适应的页面 / 486

28.3 在线支持 / 489

第29章 CSS3项目实战 / 490