HTML 5+CSS 3从入门到精通 微课精编版PDF电子书下载

第1章 HTML5基础 1

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语法特性 9

1.3.1 文档和标记 9

1.3.2 宽松的约定 10

1.4 案例实战 11

1.4.1 编写第一个HTML5文档 11

1.4.2 比较HTML4与HTML5文档结构 12

1.4.3 设计一个较详细的HTML5文档模板 13

1.5 HTML5 API 14

1.5.1 新增的API 14

1.5.2 修改的API 14

1.5.3 扩展Document 15

1.5.4 扩展HTMLElement 15

1.5.5 扩展DOM HTML 15

1.5.6 弃用的API 15

1.6 在线练习 15

第2章 HTML5新增元素和文档结构 16

2.1 HTML5元素 17

2.1.1 新元素分类 17

2.1.2 废除的元素 17

2.2 设计新的文档结构 17

2.2.1 article——文章块 17

2.2.2 section——区块 18

2.2.3 nav——导航条 21

2.2.4 aside——辅助栏 22

2.2.5 main——主要区域 24

2.2.6 header——标题栏 25

2.2.7 hgroup——标题组 25

2.2.8 footer——页脚栏 26

2.3 设计新的语义信息 27

2.3.1 address——联系信息 27

2.3.2 time——显示时间 27

2.3.3 figure和figcaption流媒体 29

2.3.4 details和summary——详细内容 29

2.3.5 mark——记号文本 31

2.3.6 progress——进度条 32

2.3.7 meter——度量 33

2.3.8 dialog——模态对话框 34

2.3.9 bdi——隔离文本 35

2.3.10 wbr——换行断点 36

2.3.11 ruby、 rt、 rp——文本注释 36

2.3.12 command——菜单命令 37

2.4 完善旧元素 38

2.4.1 a——超链接 38

2.4.2 ol——有序列表 39

2.4.3 dl——定义列表 39

2.4.4 cite ——引用文本 40

2.4.5 small——小号字体 41

2.4.6 iframe——浮动框架 41

2.4.7 script——脚本 41

2.5 HTML5新的全局属性 42

2.5.1 contentEditable——可编辑内容 42

2.5.2 contextmenu——快捷菜单 43

2.5.3 data——自定义属性 44

2.5.4 draggable——可拖动 45

2.5.5 dropzone——拖动数据 45

2.5.6 hidden——隐藏 45

2.5.7 spellcheck——语法检查 46

2.5.8 translate——可翻译 46

2.6 HTML5文档大纲 47

2.6.1 定义文档节段 47

2.6.2 隐式分节 47

2.6.3 特殊分节 47

2.7 案例实战 47

2.8 在线练习 50

第3章 HTML5表单 51

3.1 HTML5表单特性 52

3.2 新的Input类型 53

3.2.1 email——Email地址框 53

3.2.2 url——URL地址框 54

3.2.3 number——数字框 55

3.2.4 range——范围框 56

3.2.5 date pickers——日期选择器 57

3.2.6 search——搜索框 62

3.2.7 tel——电话号码框 63

3.2.8 color——拾色器 63

3.3 新的input属性 64

3.3.1 autocomplete——自动完成 64

3.3.2 autofocus——自动获取焦点 65

3.3.3 form——归属表单 66

3.3.4 表单重写 67

3.3.5 height和width——高和宽 67

3.3.6 list——列表选项 68

3.3.7 min、 max和step——最小值、最大值和步长 68

3.3.8 multiple——多选 68

3.3.9 pattern——匹配模式 69

3.3.10 placeholder——替换文本 69

3.3.11 required——必填 70

3.4 新的表单元素 71

3.4.1 datalist——数据列表 71

3.4.2 keygen——密钥对生成器 71

3.4.3 output——输出结果 72

3.5 新的 form属性 73

3.5.1 autocomplete——自动完成 73

3.5.2 novalidate——禁止验证 73

3.6 案例实战 74

3.6.1 设计HTML5注册表单 74

3.6.2 设计HTML5验证表单 75

3.7 在线练习 75

第4章 HTML5绘图和动画 76

4.1 使用canvas 77

4.2 绘制图形 79

4.2.1 矩形 79

4.2.2 路径 80

4.2.3 直线 81

4.2.4 圆弧 82

4.2.5 二次方曲线 83

4.2.6 三次方曲线 85

4.3 定义样式和颜色 86

4.3.1 颜色 86

4.3.2 不透明度 87

4.3.3 实线 88

4.3.4 虚线 90

4.3.5 线性渐变 91

4.3.6 径向渐变 92

4.3.7 图案 93

4.3.8 阴影 94

4.3.9 填充规则 95

4.4 图形变形 95

4.4.1 保存和恢复状态 95

4.4.2 清除画布 96

4.4.3 移动坐标 97

4.4.4 旋转坐标 98

4.4.5 缩放图形 100

4.4.6 变换图形 100

4.5 图形合成 102

4.5.1 合成 102

4.5.2 裁切 104

4.6 绘制文本 105

4.6.1 填充文字 105

4.6.2 轮廓文字 106

4.6.3 文本样式 107

4.6.4 测量宽度 108

4.7 使用图像 109

4.7.1 导入图像 109

4.7.2 缩放图像 111

4.7.3 裁切图像 111

4.7.4 平铺图像 112

4.8 像素操作 114

4.8.1 认识ImageData对象 114

4.8.2 创建图像数据 114

4.8.3 将图像数据写入画布 114

4.8.4 在画布中复制图像数据 115

4.8.5 保存图片 116

4.9 Path2D对象 117

4.9.1 Canvas 2D API新功能 117

4.9.2 使用Path2D对象 119

4.10 案例实战 121

4.10.1 设计基本动画 122

4.10.2 颜色选择器 122

4.10.3 给图像去色 123

4.10.4 缩放图像和反锯齿处理 123

4.10.5 设计运动动画 123

4.10.6 设计地球和月球公转动画 124

4.11 在线练习 124

第5章 HTML5音频和视频 125

5.1 使用HTML 5音频和视频 126

5.1.1 使用〈audio〉 126

5.1.2 使用〈video〉 127

5.1.3 设置属性 129

5.1.4 设置方法 132

5.1.5 设置事件 133

5.2 案例实战 135

5.2.1 设计音乐播放器 135

5.2.2 获取播放进度 136

5.2.3 设计视频播放器 136

5.2.4 视频自动截图 137

5.2.5 视频同步字幕 138

5.2.6 使用HTML5 Web Audio API增加声音 142

5.2.7 访问多媒体属性、方法和事件 143

5.3 在线练习 143

第6章 数据存储 144

6.1 Web Storage 145

6.1.1 使用Web Storage 145

6.1.2 案例：设计登录页 147

6.1.3 案例：流量统计 148

6.2 Web SQL Database 149

6.2.1 使用Web SQL Database 150

6.2.2 案例：设计登录页 154

6.2.3 案例：设计留言板 156

6.3 indexedDB 163

6.3.1 建立连接 163

6.3.2 更新版本 165

6.3.3 新建仓库 166

6.3.4 新建索引 168

6.3.5 使用事务 170

6.3.6 保存数据 171

6.3.7 访问数据 173

6.3.8 访问键值 174

6.3.9 访问属性 176

6.4 案例：设计录入表单 178

6.5 在线练习 179

第7章 应用程序缓存 180

7.1 ApplicationCache API基础 181

7.1.1 认识ApplicationCache API 181

7.1.2 配置服务器 182

7.1.3 认识manifest 183

7.1.4 使用ApplicationCache 185

7.1.5 事件监听 189

7.2 案例实战 190

7.2.1 缓存首页 190

7.2.2 离线编辑 193

7.3 在线练习 193

第8章 多线程编程 194

8.1 Web Workers基础 195

8.1.1 认识Web Workers 195

8.1.2 创建Web Workers 196

8.1.3 Workers通信 198

8.1.4 使用Web Workers 199

8.2 案例实战 202

8.2.1 求和运算 202

8.2.2 过滤运算 204

8.2.3 并发运算 206

8.2.4 多运算通信 206

8.2.5 数列运算 206

8.3 在线练习 206

第9章 位置信息 207

9.1 Geolocation API基础 208

9.1.1 Geolocation API应用场景 208

9.1.2 位置信息来源 208

9.1.3 位置信息表示方式 208

9.1.4 获取位置信息 209

9.1.5 浏览器兼容性 211

9.1.6 监测位置信息 211

9.1.7 停止获取位置信息 211

9.1.8 保护隐私 212

9.1.9 处理位置信息 212

9.1.10 使用position 212

9.2 案例：设计位置地图 214

9.3 在线练习 215

第10章 历史记录 216

10.1 History API基础 217

10.1.1 了解History API 217

10.1.2 使用History API 218

10.1.3 注意事项 220

10.2 案例实战 220

10.2.1 设计导航页面 220

10.2.2 设计无刷新网站 223

10.2.3 设计无刷新灯箱广告 226

10.2.4 设计可后退画板 226

10.3 在线练习 227

第11章 文件操作 228

11.1 FileList 229

11.2 Blob 230

11.2.1 访问Blob 230

11.2.2 创建Blob 231

11.2.3 截取Blob 233

11.2.4 保存Blob 234

11.3 FileReader 235

11.3.1 读取文件 235

11.3.2 事件监测 237

11.4 ArrayBuffer和ArrayBufferView 238

11.4.1 使用ArrayBuffer 239

11.4.2 使用ArrayBuffer View 239

11.4.3 使用DataView 240

11.5 FileSystem API 243

11.5.1 认识FileSystem API 243

11.5.2 访问FileSystem 243

11.5.3 申请配额 245

11.5.4 新建文件 248

11.5.5 写入数据 250

11.5.6 添加数据 252

11.5.7 读取数据 253

11.5.8 复制文件 254

11.5.9 删除文件 255

11.5.10 创建目录 256

11.5.11 读取目录 259

11.5.12 删除目录 260

11.5.13 复制目录 261

11.5.14 重命名目录 262

11.5.15 使用filesystem：URL 264

11.6 案例：设计资源管理器 265

11.7 在线练习 266

第12章 HTML5通信 267

12.1 跨文档消息传递 268

12.1.1 postMessage基础 268

12.1.2 案例：设计简单的跨域通话 269

12.1.3 案例：设计跨域动态对话 272

12.1.4 案例：设计通道通信 275

12.2 WebSockets通信 277

12.2.1 WebSocket基础 278

12.2.2 使用WebSockets API 279

12.2.3 在PHP中建立socket 282

12.2.4 WebSockets API开发框架 284

12.2.5 案例：设计简单的“呼-应”通信 284

12.2.6 案例：发送JSON对象 289

12.2.7 案例：使用Workerman框架通信 290

12.2.8 案例：推送信息 291

12.3 在线练习 292

第13章 WebRTC视频直播 293

13.1 WebRTC基础 294

13.2 案例实战 294

13.2.1 访问本地设备 294

13.2.2 视频截图 296

13.2.3 视频对话基础 297

13.2.4 视频对话实现 298

13.2.5 SDP交换 305

13.2.6 ICE交换 310

13.3 在线练习 312

第14章 跨窗口操作 313

14.1 通知API 314

14.1.1 Notification API基础 314

14.1.2 案例：设计桌面通知 316

14.1.3 案例：关闭通知 317

14.1.4 案例：设计多条通知 318

14.2 页面可见API 319

14.2.1 Page Visibility基础 319

14.2.2 案例：设计视频页面 321

14.2.3 案例：设计登录页面 322

14.3 全屏API 324

14.3.1 Fullscreen API基础 324

14.3.2 案例：设计全屏显示 326

14.3.3 案例：设计全屏播放 327

14.4 在线练习 328

第15章 拖放操作 329

15.1 拖放API基础 330

15.1.1 拖放功能实现 330

15.1.2 DataTransfer对象 333

15.2 案例实战 336

15.2.1 设计垃圾箱 336

15.2.2 设计接纳箱 338

15.2.3 拖选对象 339

15.2.4 可视化删除 339

15.3 在线练习 339

第16章 异步交互 340

16.1 XMLHttpRequest 2基础 341

16.1.1 请求时限 341

16.1.2 FormData数据对象 341

16.1.3 上传文件 342

16.1.4 跨域访问 342

16.1.5 响应不同类型数据 342

16.1.6 接收二进制数据 342

16.1.7 监测数据传输进度 343

16.2 案例实战 344

16.2.1 接收ArrayBuffer对象 344

16.2.2 接收Blob对象 347

16.2.3 发送字符串 347

16.2.4 发送表单数据 348

16.2.5 发送二进制文件 350

16.2.6 发送Blob对象 351

16.2.7 跨域请求 351

16.2.8 设计文件上传进度条 352

16.3 在线练习 352

第17章 延迟处理 353

17.1 延迟处理基础 354

17.1.1 从回调函数到异步队列 354

17.1.2 使用promise对象 357

17.2 案例实战 360

17.2.1 队列操作 360

17.2.2 异常处理 361

17.2.3 创建序列 363

17.2.4 并行处理 366

17.3 在线练习 367

第18章HTML5其他API 368

18.1 指针锁定API 369

18.1.1 认识鼠标指针锁定API 369

18.1.2 案例：设计全屏鼠标指针锁定 369

18.2 requestAnimationFrame 370

18.2.1 认识requestAnimFrame 370

18.2.2 案例：设计进度条 372

18.2.3 案例：设计旋转的小球 372

18.3 Mutation Observer 374

18.3.1 认识Mutation Observer 374

18.3.2 案例：观察DOM元素 376

18.3.3 案例：观察DOM属性 376

18.4 在线练习 377

第19章 CSS3基础 378

19.1 CSS3概述 379

19.1.1 CSS3模块 379

19.1.2 CSS3开发状态 379

19.1.3 浏览器支持状态 380

19.2 CSS3选择器概述 381

19.3 使用CSS3选择器 384

19.3.1 兄弟选择器 384

19.3.2 属性选择器 385

19.3.3 伪类选择器 386

19.3.4 伪对象选择器 387

19.4 案例实战 388

19.4.1 设计按钮样式 388

19.4.2 设计列表样式 389

19.4.3 设计表格样式 389

19.4.4 设计表单样式 390

19.4.5 设计锚点样式 391

19.4.6 设计超链接样式 391

19.5 在线练习 392

第20章 CSS3文本样式 393

20.1 CSS3文本模块 394

20.1.1 文本模块概述 394

20.1.2 文本溢出 395

20.1.3 文本换行 396

20.1.4 书写模式 399

20.1.5 initial值 401

20.1.6 inherit值 402

20.1.7 unset值 403

20.1.8 all属性 403

20.2 色彩模式 404

20.2.1 rgba（）函数 404

20.2.2 hsl（）函数 405

20.2.3 hsla（）函数 408

20.2.4 opacity属性 409

20.2.5 transparent值 410

20.2.6 currentColor值 411

20.3 文本阴影 412

20.3.1 定义text-shadow 413

20.3.2 案例：设计特效字 414

20.4 内容生成和替换 418

20.4.1 定义content 418

20.4.2 案例：应用content 420

20.5 网络字体 421

20.5.1 使用＠font-face 421

20.5.2 案例：设计字体图标 423

20.6 案例实战 424

20.6.1 设计黑科技网站首页 424

20.6.2 设计消息提示框 425

20.7 在线练习 425

第21章 CSS3背景图像和渐变背景 426

21.1 设计背景图像 427

21.1.1 设置定位原点 427

21.1.2 设置裁剪区域 428

21.1.3 设置背景图像大小 430

21.1.4 设置多重背景图像 431

21.2 设计渐变背景 433

21.2.1 定义线性渐变 433

21.2.2 设计线性渐变样式 435

21.2.3 案例：设计网页渐变色 438

21.2.4 案例：设计条纹背景 439

21.2.5 定义重复线性渐变 442

21.2.6 定义径向渐变 443

21.2.7 设计径向渐变样式 445

21.2.8 定义重复径向渐变 447

21.2.9 案例：设计网页背景色 448

21.2.10 案例：设计图标 450

21.3 案例实战 451

21.3.1 设计优惠券 451

21.3.2 设计桌面纹理背景 451

21.3.3 设计按钮 452

21.3.4 渐变特殊应用场景 452

21.3.5 设计栏目折角效果 453

21.4 在线练习 453

第22章 CSS3用户接口样式 454

22.1 界面显示 455

22.1.1 显示方式 455

22.1.2 调整尺寸 456

22.1.3 缩放比例 457

22.2 轮廓样式 458

22.2.1 定义轮廓 458

22.2.2 设计轮廓线 460

22.3 边框样式 462

22.3.1 定义边框图像源 462

22.3.2 定义边框图像平铺方式 463

22.3.3 定义边框图像宽度 464

22.3.4 定义边框图像分割方式 464

22.3.5 定义边框图像扩展 465

22.3.6 案例：应用边框图像 466

22.3.7 定义圆角边框 468

22.3.8 案例：设计椭圆图形 470

22.4 盒子阴影 471

22.4.1 定义盒子阴影 472

22.4.2 案例：box-shadow的应用 474

22.4.3 案例：设计翘边阴影 476

22.5 案例实战 478

22.5.1 设计内容页 478

22.5.2 设计应用界面 479

22.6 在线练习 479

第23章 CSS3伸缩盒布局 480

23.1 多列布局 481

23.1.1 设置列宽 481

23.1.2 设置列数 482

23.1.3 设置间距 482

23.1.4 设置列边框 483

23.1.5 设置跨列显示 484

23.1.6 设置列高度 485

23.2 旧版伸缩盒 485

23.2.1 启动伸缩盒 485

23.2.2 设置宽度 486

23.2.3 设置顺序 488

23.2.4 设置方向 488

23.2.5 设置对齐方式 489

23.3 新版伸缩盒 491

23.3.1 认识Flexbox系统 491

23.3.2 启动伸缩盒 492

23.3.3 设置主轴方向 493

23.3.4 设置行数 494

23.3.5 设置对齐方式 495

23.3.6 设置伸缩项目 497

23.4 伸缩盒版本比较和兼容 499

23.4.1 版本比较和兼容方法 500

23.4.2 案例：设计3栏页面 503

23.4.3 案例：设计3行3列应用 503

23.5 在线练习 504

第24章 CSS3动画 505

24.1 CSS3变形 506

24.1.1 认识Transform 506

24.1.2 设置原点 506

24.1.3 2D旋转 507

24.1.4 2D缩放 508

24.1.5 2D平移 509

24.1.6 2D倾斜 509

24.1.7 2D矩阵 510

24.1.8 设置变形类型 511

24.1.9 设置透视距离和原点 511

24.1.10 3D平移 515

24.1.11 3D缩放 516

24.1.12 3D旋转 517

24.1.13 透视函数 517

24.1.14 变形原点 518

24.1.15 背景可见 518

24.2 过渡动画 519

24.2.1 设置过渡属性 519

24.2.2 设置过渡时间 520

24.2.3 设置延迟过渡时间 521

24.2.4 设置过渡动画类型 521

24.2.5 设置过渡触发动作 522

24.3 帧动画 527

24.3.1 设置关键帧 527

24.3.2 设置动画属性 528

24.4 案例实战 530

24.4.1 设计图形 530

24.4.2 设计冒泡背景按钮 531

24.4.3 设计动画效果菜单 531

24.4.4 设计照片特效 532

24.4.5 设计立体盒子 532

24.4.6 旋转盒子 533

24.4.7 设计翻转广告 533

24.4.8 设计跑步效果 533

24.4.9 设计折叠面板 534

24.5 在线练习 534

第25章 CSS3媒体查询 535

25.1 媒体查询基础 536

25.1.1 媒体类型和媒体查询 536

25.1.2 使用＠media 537

25.1.3 应用＠media 538

25.2 案例实战 541

25.2.1 判断显示屏幕宽度 541

25.2.2 设计响应式版式 542

25.2.3 设计响应式菜单 543

25.2.4 设计自动隐藏布局 544

25.2.5 设计自适应手机页面 544

25.3 在线练习 545