Web开发典藏大系 HTML 5+CSS 3网页开发实战精解PDF电子书下载

第1篇 技术概览 2

第1章HTML 5标准（教学视频：46分钟） 2

1.1 HTML 5介绍 2

1.1.1 HTML 5的历史背景 2

1.1.2 HTML 5的现状 3

1.1.3良好的设计理念 4

1.1.4新增的HTML 5原生功能 5

1.1.5 HTML 5带来的好处 6

1.2全新的HTML 5 7

1.2.1从“头”说起 7

1.2.2明确简洁的结构 7

1.2.3新增的元素 10

1.2.4废弃的元素 11

1.2.5全新的选择器 12

1.2.6脚本日志和调试 12

1.3 HTML 5的未来发展 14

1.4小结 15

1.5习题 15

第2章CSS 3层叠样式表（教学视频：25分钟） 16

2.1 CSS 3简介 16

2.1.1 CSS 3的历史背景 16

2.1.2 CSS 3的发展现状 17

2.1.3 CSS 3新特性预览 18

2.2增强的选择器功能 20

2.2.1元素选择符和关系选择符 20

2.2.2属性选择符 20

2.2.3结构伪类选择符 23

2.2.4 UI元素状态伪类选择符 26

2.2.5伪元素选择符 27

2.3小结 28

2.4习题 28

第2篇 基于CSS 3的Web界面设计实战 30

第3章 文本、背景、边框不再单调（教学视频：96分钟） 30

3.1文本与字体 30

3.1.1多样化的文本阴影——text-shadow属性 30

3.1.2溢出文本处理——text-overflow属性 34

3.1.3对齐的文字才好看word-wrap和word-break属性 35

3.1.4使用服务器端的字体——@font-face规则 37

3.1.5实验室：丰富的文字样式 40

3.2色彩模式和不透明度 41

3.2.1不再为配色发愁——HSL色彩模式 42

3.2.2含不透明度的——HSLA色彩模式 44

3.2.3含不透明度的——RGBA色彩模式 45

3.2.4不透明度——opacity属性 46

3.2.5实验室：半透明的遮蔽层 48

3.3背景 51

3.3.1元素里定义多个背景图片 51

3.3.2指定背景的原点位置 52

3.3.3指定背景的显示区域 55

3.3.4指定背景图像的大小 57

3.3.5实验室：设计信纸的效果 59

3.4边框 62

3.4.1设计圆角边框——border-radius属性 62

3.4.2设计图像边框——border-image属性 68

3.4.3设计多色边框——border-color属性 76

3.4.4实验室：使用新技术设计网页 78

3.5小结 83

3.6习题 83

第4章 灵活的盒布局和界面设计（教学视频：69分钟） 84

4.1灵活的盒布局 84

4.1.1开启盒布局 84

4.1.2元素的布局方向——box-orient属性 86

4.1.3元素的布局顺序——box-direction属性 87

4.1.4调整元素的位置——box-ordinal-group属性 89

4.1.5弹性空间分配——box-flex属性 91

4.1.6元素的对其方式——box-pack和box-align属性 94

4.1.7实验室：使用新型盒布局设计网页 97

4.2增强的盒模型 101

4.2.1盒子阴影——box-shadow属性 101

4.2.2盒子尺寸的计算方法——box-sizing属性 106

4.2.3盒子溢出内容处理——overflow-x和overflow-y属性 108

4.2.4实验室：设计网站服务条款页面 109

4.3增强的用户界面设计 112

4.3.1允许用户改变尺寸resize属性 112

4.3.2定义外轮廓线outline属性 113

4.3.3伪装的元素——appearance属性 118

4.3.4为元素添加内容——content属性 120

4.3.5实验室：设计一个省份选择盘 124

4.4小结 125

4.5习题 126

第5章 你一直期待的多列布局（教学视频：21分钟） 127

5.1多列布局基础 127

5.1.1多列属性columns 127

5.1.2列宽属性column-width 129

5.1.3列数属性column-count 129

5.1.4列间距属性column-gap 131

5.1.5定义列分隔线——column-rule属性 132

5.1.6定义横跨所有列——column-span属性 135

5.2实验室：模仿杂志的多列版式 136

5.3小结 138

5.4习题 138

第6章 酷炫的动画和渐变（教学视频：82分钟 139

6.1 CSS 3变形基础 139

6.1.1元素的变形——transform属性 139

6.1.2旋转 139

6.1.3缩放和翻转 141

6.1.4移动 143

6.1.5倾斜 145

6.1.6矩阵变形 147

6.1.7同时使用多个变形函数 149

6.1.8定义变形原点——transform-origin属性 151

6.1.9实验室：设计图片画廊 153

6.2 CSS 3过渡效果 156

6.2.1实现过渡效果——transition属性 156

6.2.2指定过渡的属性——transition-property属性 157

6.2.3指定过渡的时间——transition-duration属性 159

6.2.4指定过渡延迟时间——transition-delay属性 160

6.2.5指定过渡方式——transition-timing-function属性 161

6.2.6实验室：制作滑动的菜单 162

6.3 CSS 3动画设计 165

6.3.1关键帧动画——@keyframes规则 165

6.3.2动画的实现——animation属性 166

6.3.3实验室：永不停止的风车 170

6.4 CSS 3渐变设计 172

6.4.1 CSS线性渐变 172

6.4.2 CSS径向渐变 175

6.4.3实验室：设计渐变的按钮 177

6.5小结 179

6.6习题 180

第7章 支持多种设备的样式表方案（教学视频：15分钟） 181

7.1媒体查询 181

7.1.1@media规则的语法 181

7.1.2使用Media Queries链接外部样式表文件 185

7.2实验室：自适应屏幕的样式表方案 185

7.3小结 191

7.4习题 191

第3篇 基于HTML 5的Web应用开发实战 194

第8章 绘制图形如此简单（教学视频：78分钟 194

8.1 Canvas简介 194

8.2 Canvas基本知识 195

8.2.1构建Canvas元素 195

8.2.2使用JavaScript实现绘图的流程 196

8.3使用Canvas绘图 198

8.3.1绘制矩形 198

8.3.2使用路径 201

8.3.3图形组合 205

8.3.4绘制曲线 207

8.3.5使用图像 212

8.3.6剪裁区域 214

8.3.7绘制渐变 216

8.3.8描边属性 219

8.3.9模式 221

8.3.10变换 222

8.3.11使用文本 226

8.3.12阴影效果 228

8.3.13状态的保存与恢复 229

8.3.14操作像素 230

8.4实验室：在Canvas中实现动画 232

8.5小结 236

8.6习题 236

第9章 便捷的音频和视频（教学视频：44分钟） 237

9.1 audio和video基础知识 237

9.1.1在线多媒体的发展 237

9.1.2多媒体术语 238

9.1.3 HTML 5多媒体文件格式 239

9.1.4功能缺陷及未来趋势 240

9.2使用HTML5的audio和video元素 241

9.2.1在网页中使用audio和video 241

9.2.2 audio和video的特性和属性 242

9.2.3 audio和video的方法 246

9.2.4 audio和video的事件 248

9.3实验室：自定义播放工具条 250

9.4小结 254

9.5习题 254

第10章 不可思议的表单（教学视频：59分钟） 255

10.1 HTML 5表单概述 255

10.1.1 HTML表单的进化 255

10.1.2当前的支持情况 256

10.2新增表单输入类型 256

10.2.1新增的表单输入类型 256

10.2.2面向未来的新型表单 258

10.3新增表单特性及元素 258

10.4表单验证API 261

10.4.1与验证有关的表单元素特性 261

10.4.2表单验证的属性 262

10.4.3 ValidityState对象 263

10.4.4表单验证的方法 264

10.4.5表单验证的事件 266

10.5实验室：用户注册页面 267

10.6小结 270

10.7习题 270

第11章 可触到的拖放功能（教学视频：39分钟） 271

11.1拖放API 271

11.1.1新增的draggable特性 271

11.1.2新增的鼠标拖放事件 271

11.1.3 DataTransfer对象 272

11.1.4实验室：拖放元素的内容 273

11.2文件API 276

11.2.1新增的标签特性 276

11.2.2 FileList对象与File对象 276

11.2.3 Blob对象 277

11.2.4 FileReader接口 278

11.3实验室：把图片拖入浏览器 283

11.4小结 286

11.5习题 286

第12章 本地存储让你的应用更加高效（教学视频：37分钟） 287

12.1本地存储对象——Web Storage 287

12.1.1 Web Storage简介 287

12.1.2 localStorage和sessionStorage 288

12.1.3设置和获取Storage数据 289

12.1.4 Storage API的属性和方法 291

12.1.5存储JSON对象的数据 294

12.1.6 Storage API的事件 296

12.1.7实验室：在两个窗口中实现通信 296

12.2本地数据库——Web SQL Database 298

12.2.1 Web SQL Database简介 298

12.2.2操作Web SQL数据库 299

12.2.3实验室：基本的数据库操作示例 300

12.3小结 303

12.4习题 304

第13章 别开生面的离线应用（教学视频：33分钟） 305

13.1 Web离线应用缓存 305

13.2缓存清单文件manifest 306

13.3检测浏览器的网络状态 308

13.4应用缓存接口applicationCache 309

13.5实验室：图片画廊的离线应用 312

13.6小结 314

13.7习题 315

第14章 安全的跨源通信（教学视频：37分钟 316

14.1跨文档消息传输 316

14.1.1跨文档消息传输的实现 316

14.1.2 Web源安全 317

14.1.3使用postMessage接口 318

14.1.4消息事件接口MessageEvent 319

14.1.5实验室：跨文档消息传输示例 320

14.2跨源请求——XMLHttpRequestLevel 2 324

14.2.1改进的XmlHttpRequest对象 324

14.2.2 XMLHttpRequestLevel2规范说明 325

14.2.3使用新的XMLHttpRequest对象 327

14.2.4实验室：跨源请求示例 329

14.3小结 331

14.4习题 332

第15章 强大的WebSocket双向通信（教学视频：23分钟） 333

15.1 WebSocket概述 333

15.1.1 WebSocket简介 333

15.1.2实时Web应用面临的问题 333

15.1.3 WebSocket的优势 334

15.2 WebSocket协议 335

15.2.1 WebSocket握手协议 335

15.2.2浏览器的支持情况 336

15.3 WebSocket编程接口 336

15.4使用WebSocket编程 339

15.5实验室：构建实时的聊天应用 340

15.6小结 343

15.7习题 343

第16章Web背后——看不见的多线程（教学视频：34分钟 345

16.1 Web Workers概述 345

16.2专属线程 346

16.2.1专属线程的基本用法 346

16.2.2多个线程嵌套 349

16.2.3实验室：专属线程中的异步请求 352

16.3共享线程 355

16.3.1共享线程的基本用法 355

16.3.2实验室：共享线程使用示例 356

16.4 Web Workers接口框架解析 358

16.4.1线程外部的接口 358

16.4.2线程内部的接口 360

16.5小结 362

16.6习题 363

第17章 我知道你在哪里一地理位置API（教学视频：21分钟） 364

17.1 Geolocation概述 364

17.1.1地理位置信息 364

17.1.2使用案例 365

17.1.3隐私策略 366

17.2 Geolocation基本用法 367

17.2.1浏览器的支持情况 367

17.2.2单次获取地理位置 368

17.2.3重复性的位置信息更新 372

17.3 Geolocation接口解析 373

17.4实验室：在地图上显示我的位置 375

17.5小结 379

17.6习题 379