Web前端开发从学到用完美实践 HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJSPDF电子书下载

第1章 概述 1

1.1 Web基础 2

1.1.1 Web的基本概念 2

1.1.2 Internet 2

1.1.3 协议 8

1.1.4 URL和域名 9

1.1.5 服务器 9

1.1.6 Web标准 9

1.2 Web是如何工作的？ 10

1.2.1 什么是网页？ 10

1.2.2 什么是网站？ 11

1.2.3 网页与网站的关系 11

1.2.4 浏览器是如何工作的？ 11

1.2.5 访问网站的过程 13

1.2.6 网站是怎么开发出来的？ 13

1.3 为什么学习Web前端开发？ 16

1.3.1 什么是Web前端开发？ 16

1.3.2 Web前端工程师的工作内容 17

1.3.3 Web前端工程师的职业前景 17

1.3.4 需要学习哪些内容 17

1.3.5 需要购买哪些设备？ 18

1.3.6 除了技术，还需要学什么 18

1.4 项目管理系统 19

1.4.1 什么是项目管理？ 19

1.4.2 项目管理的目的 19

1.4.3 项目管理系统——Microsoft Project 20

1.4.4 项目管理系统——Collabtive 20

第2章 开发工具 21

2.1 开发工具综述 22

2.2 原型设计工具 22

2.2.1 什么是原型设计？ 22

2.2.2 原型设计工具——Axure RP 23

2.2.3 实训：使用Axure RP实现百度登录页原型设计 23

2.3 开发工具 29

2.3.1 开发工具的作用 29

2.3.2 网站开发工具——Adobe Dreamweaver 30

2.3.3 网站开发工具——Oracle NetBeans 30

2.3.4 网站开发工具——Microsoft Visual Studio Code 31

2.3.5 实训：Adobe Dreamweaver CS6的安装与基本使用 31

2.3.6 实训：Microsoft Visual Studio Code的安装与基本使用 39

2.4 调试工具 41

2.4.1 什么是Web调试？ 41

2.4.2 网站调试工具——Firefox 41

2.4.3 网站调试工具——Google Chrome 42

2.4.4 网站调试工具——Internet Explorer 42

2.4.5 网站调试工具——Microsoft Edge 42

2.4.6 实训：使用Firefox进行网页开发调试 42

2.5 代码托管工具 48

2.5.1 为什么要进行代码托管？ 48

2.5.2 代码托管的基本功能 48

2.5.3 代码托管工具——GitHub 48

2.5.4 代码托管工具——SVN 49

2.5.5 案例：使用GitHub开源平台实现网站代码托管 49

第3章 初识HTML5 55

3.1 HTML概述 56

3.1.1 什么是HTML？ 56

3.1.2 HTML的发展历程 56

3.1.3 HTML5发展史 56

3.1.4 HTML5开发团队 57

3.1.5 HTML5官方资源 57

3.2 HTML5的优势 57

3.2.1 优势 57

3.2.2 新功能 59

3.3 HTML5的新特征 61

3.3.1 语法的改变 61

3.3.2 元素 62

3.3.3 属性 67

3.3.4 全局属性 69

3.4 HTML5文档结构 70

3.4.1 认识文档结构 70

3.4.2 案例：创建HTML5网页 72

第4章 HTML5结构与属性 73

4.1 从HTML4到HTML5 74

4.1.1 使用表格布局 74

4.1.2 使用区块布局 74

4.1.3 使用HTML5结构元素布局 75

4.1.4 语义Web 75

4.2 HTML5基础 76

4.2.1 HTML5语法 76

4.2.2 HTML5元素 77

4.2.3 HTML5属性 82

4.2.4 HTML5全局属性 84

4.2.5 案例：个人简历网页的实现 84

4.3 HTML5结构元素 87

4.3.1 HTML5主体结构元素 88

4.3.2 HTML5非主体结构元素 92

4.3.3 案例：使用结构元素进行网页布局（新闻列表＋新闻列表内容呈现） 95

4.4 超链接 99

4.4.1 绝对路径与相对路径 99

4.4.2 超链接元素 99

4.4.3 超链接属性 100

4.4.4 案例：网址导航页面的实现 100

第5章 表单 102

5.1 表单基础 103

5.1.1 表单 103

5.1.2 input元素 104

5.1.3 label元素 105

5.1.4 button元素 105

5.1.5 select元素 106

5.1.6 textarea元素 108

5.2 使用form元素 108

5.2.1 新增form元素 109

5.2.2 form属性总览 110

5.2.3 新增form属性 110

5.3 使用input元素 111

5.3.1 input类型总览 111

5.3.2 新增input类型 112

5.3.3 input属性总览 119

5.3.4 新增的input属性 120

5.4 案例：高考改革方案调查问卷网页的实现 126

5.5 案例：智能表单（用户注册） 130

第6章 多媒体 135

6.1 多媒体基础 136

6.1.1 什么是多媒体？ 136

6.1.2 音频编码与音频格式 136

6.1.3 视频编码与视频格式 136

6.1.4 在Web上能够使用的音频和视频格式 137

6.1.5 如何在Web上播放视频？ 138

6.2 HTML5音频与视频 139

6.2.1 audio元素 139

6.2.2 video元素 140

6.2.3 audio和video的属性 141

6.2.4 audio和video的方法 144

6.2.5 audio和video的事件 145

6.2.6 案例：在网页上使用背景音乐 146

6.2.7 案例：在网页上播放视频 147

6.3 播放控制 147

6.3.1 预加载媒体文件 148

6.3.2 视频封面图 148

6.3.3 自动播放 148

6.3.4 循环播放 148

6.3.5 添加变量 148

6.3.6 播放 149

6.3.7 暂停 150

6.3.8 快放、慢放、慢动作 150

6.3.9 快进、快退 151

6.3.10 进度拖动 152

6.3.11 音量控制 154

6.3.12 全屏播放 155

6.3.13 播放器容错处理 157

6.4 解决兼容问题 158

6.4.1 浏览器对多媒体的兼容性支持 158

6.4.2 使用多种媒体格式提升兼容性 160

6.4.3 使用Flash提升兼容性 160

6.5 字幕 161

6.5.1 标记时间的文本轨道 162

6.5.2 视频字幕 164

6.6 案例：使用播放器插件实现视频播放 166

第7章 初识CSS3 167

7.1 CSS3概述 168

7.1.1 什么是CSS？ 168

7.1.2 CSS发展史 168

7.1.3 CSS3新特征 168

7.1.4 主流浏览器对CSS3的支持 170

7.1.5 谁在使用CSS3 172

7.1.6 CSS3的未来 172

7.2 CSS3功能 172

7.2.1 CSS3模块 172

7.2.2 使用CSS3的优势 173

7.3 在HTML中使用CSS 174

7.3.1 内联样式 174

7.3.2 嵌入样式 174

7.3.3 外部样式 175

7.3.4 网站CSS文件的规划 176

7.4 案例：基于终端设备选择不同样式 177

7.5 案例：基于浏览器选择不同样式 178

第8章 选择器 179

8.1 认识CSS选择器 180

8.2 基础选择器 180

8.2.1 语法 180

8.2.2 通配符选择器 181

8.2.3 元素选择器 182

8.2.4 类选择器 183

8.2.5 ID选择器 185

8.2.6 选择器兼容性 186

8.3 层次选择器 186

8.3.1 语法 186

8.3.2 后代选择器 187

8.3.3 子选择器 187

8.3.4 相邻兄弟选择器 189

8.3.5 通用兄弟选择器 189

8.3.6 选择器组合 190

8.3.7 选择器兼容性 191

8.4 伪类选择器 191

8.4.1 语法 191

8.4.2 动态伪类选择器 192

8.4.3 目标伪类选择器 193

8.4.4 语言伪类选择器 194

8.4.5 UI元素状态伪类选择器 194

8.4.6 结构伪类选择器 196

8.4.7 否定伪类选择器 204

8.4.8 伪元素 205

8.5 属性选择器 208

8.5.1 语法 208

8.5.2 使用方法 209

8.5.3 浏览器兼容性 212

第9章 文字样式 213

9.1 文本样式 214

9.1.1 属性 214

9.1.2 文本颜色：color 214

9.1.3 缩进：text-indent 215

9.1.4 行高：line-height 216

9.1.5 字母间隔：letter-spacing 216

9.1.6 水平对齐：text-align 217

9.1.7 文本装饰：text-decoration 218

9.1.8 字符转换：text-transform 219

9.1.9 空白处理：white-space 220

9.1.10 文字间隔：word-spacing 220

9.1.11 首字下沉：:first-letter 221

9.2 字体样式 222

9.2.1 什么是字体？ 222

9.2.2 属性 222

9.2.3 字体系列：font-family 223

9.2.4 字体大小：font-size 223

9.2.5 字体加粗：font-weight 224

9.2.6 字体风格：font-style 225

9.3 字体图标 226

9.3.1 什么是字体图标？ 226

9.3.2 制作字体图标 226

9.3.3 如何使用字体图标？ 227

9.4 文本效果 228

9.4.1 CSS3新增文本属性 228

9.4.2 文本溢出：text-overflow 228

9.4.3 文字阴影：text-shadow 229

9.4.4 A文本换行 230

9.5 使用服务器端字体 231

9.6 案例：诗歌排版 232

9.7 案例：使用服务器端字体实现网站图标 234

第10章 背景与边框 236

10.1 背景属性 237

10.1.1 基本属性 237

10.1.2 CSS3新增背景属性 238

10.1.3 多背景 241

10.1.4 渐变背景 243

10.2 边框属性 245

10.2.1 基本属性 245

10.2.2 CSS3新增边框属性 247

10.2.3 圆角边框 248

10.2.4 图片边框 251

10.2.5 渐变边框 256

10.2.6 盒子阴影 257

10.3 案例：图片轮转的实现 264

10.4 案例：网页课程表的实现 266

第11章 盒模型 271

11.1 盒子 272

11.1.1 元素盒子 272

11.1.2 尺寸 280

11.2 盒子类型 281

11.2.1 盒子的基本类型 281

11.2.2 CSS3新增的类型 287

11.2.3 浏览器对盒子的支持情况 293

11.3 盒子的属性 294

11.3.1 内容溢出 294

11.3.2 自由缩放 299

11.3.3 外轮廓 299

11.3.4 阴影 301

11.4 浏览器的盒子调试 304

11.4.1 在Internet Explorer浏览器中进行盒子调试 305

11.4.2 在Firefox浏览器中进行盒子调试 307

11.4.3 在Google Chrome浏览器中进行盒子调试 307

11.4.4 在Microsoft Edge浏览器中进行盒子调试 308

第12章 布局 311

12.1 定位与布局的基本属性 312

12.1.1 基本属性 312

12.1.2 外边距与内边距 312

12.1.3 浮动布局 313

12.1.4 定位布局 318

12.2 多列布局 325

12.2.1 多列布局的基本知识 325

12.2.2 多列布局的基本属性 326

12.2.3 多列布局属性 326

12.2.4 列宽与列数 326

12.2.5 列边距与列边框 326

12.2.6 跨列布局 327

12.2.7 列高 327

12.3 盒布局 329

12.3.1 盒布局的基本知识 329

12.3.2 盒布局的基本属性 329

12.3.3 使用自适应宽度的弹性盒布局 329

12.3.4 改变元素的显示顺序 332

12.3.5 改变元素排列方向 334

12.3.6 使用弹性布局消除空白 335

12.3.7 对多个元素使用box-flex属性 336

12.3.8 对齐方式 337

12.3.9 布局方式对比 339

12.4 自适应布局 343

12.4.1 自适应布局的基本知识 344

12.4.2 自适应布局的基本属性 344

12.4.3 允许网页宽度自动调整 344

12.4.4 不使用绝对宽度 344

12.4.5 相对大小的字体 345

12.4.6 流动布局 345

12.4.7 选择加载CSS 345

12.4.8 CSS的@media规则 345

12.4.9 图片的自适应 346

12.5 案例：网页布局 348

第13章 CSS动画 359

13.1 Web动画 360

13.1.1 GIF动画 360

13.1.2 Flash动画 360

13.1.3 JavaScript动画 360

13.1.4 CSS3动画 361

13.2 使用变形属性 361

13.2.1 进行简单变形 361

13.2.2 变形子属性 362

13.2.3 2D变形函数 369

13.2.4 3D变形函数 372

13.2.5 案例：制作时钟 375

13.3 使用过渡属性 378

13.3.1 设置元素过渡 378

13.3.2 设置过渡元素 379

13.3.3 设置过渡持续时间 380

13.3.4 指定过渡函数 381

13.3.5 规定过渡延迟时间 385

13.3.6 过渡触发 386

13.3.7 案例：制作动态网站导航 387

13.4 使用动画属性 390

13.4.1 建立基本动画 390

13.4.2 动画关键帧 392

13.4.3 动画子属性 393

13.4.4 给元素应用动画 395

13.4.5 案例：实现页面加载动画 396

13.5 案例：引人入胜的动态照片墙 402

第14章 初识JavaScript 405

14.1 JavaScript概述 406

14.1.1 什么是JavaScript？ 406

14.1.2 JavaScript能够实现什么？ 407

14.2 语法 407

14.2.1 调用方法 407

14.2.2 基本语法 408

14.2.3 函数 417

14.2.4 对象 418

14.3 DOM 419

14.3.1 什么是DOM？ 419

14.3.2 获取HTML元素 419

14.3.3 对HTML元素进行操作 421

14.4 案例：使用JavaScript进行表单验证 423

14.4.1 功能 423

14.4.2 实现效果 423

14.4.3 代码 424

14.5 案例：使用JavaScript实现规定时间内答题效果 427

14.5.1 功能 427

14.5.2 实现效果 427

14.5.3 代码 428

第15章 jQuery编程 430

15.1 jQuery概述 431

15.1.1 jQuery简介 431

15.1.2 为什么要使用jQuery？ 432

15.1.3 其他的JavaScript类库 433

15.2 jQuery基础应用 434

15.2.1 调用方法 434

15.2.2 基本语法 434

15.2.3 选择器 435

15.2.4 事件 445

15.2.5 常用效果 449

15.2.6 案例：使用jQuery实现图片轮转 456

15.3 jQuery中的DOM操作 459

15.3.1 DOM操作基础 459

15.3.2 节点操作 460

15.3.3 属性操作 467

15.3.4 样式操作 468

15.3.5 内容操作 470

15.3.6 案例：使用jQuery实现表格排序 472

15.4 jQuery插件 474

15.4.1 什么是jQuery插件？ 474

15.4.2 jQuery UI 475

15.4.3 jQuery Mobile 479

15.5 案例：使用jQuery插件实现表单验证 483

15.5.1 功能 483

15.5.2 实现效果 484

15.5.3 代码 484

15.6 案例：使用JQuery Mobile快速开发手机网站 485

15.6.1 功能 485

15.6.2 实现效果 485

15.6.3 代码 486

第16章 AJAX 488

16.1 概述 489

16.1.1 什么是AJAX？ 489

16.1.2 为什么使用AJAX？ 489

16.1.3 AJAX的优势 489

16.1.4 AJAX的应用场景 489

16.2 基础知识 490

16.2.1 XML 490

16.2.2 xmlHttpRequest 491

16.2.3 工作原理 491

16.3 AJAX实现 492

16.3.1 案例：使用AJAX基于本地XML实现学生成绩册 492

16.3.2 案例：使用AJAX读取网易新闻列表 495

16.4 使用jQuery实现AJAX 497

16.4.1 基本方法 497

16.4.2 jQuery中的全局事件 509

16.5 案例：实时表单验证 510

第17章 AngularJS 518

17.1 AngularJS概述 519

17.1.1 AngularJS简介 519

17.1.2 AngularJS特性 519

17.1.3 AngularJS框架 520

17.2 AngularJS基本概念 520

17.3 AngularJS应用 521

17.3.1 AngularJS初始化 521

17.3.2 指令 523

17.3.3 模板 523

17.3.4 表达式 524

17.3.5 作用域 524

17.3.6 控制器 526

17.3.7 过滤器 526

17.3.8 表单 528

17.3.9 模块 530

17.3.10 路由 530

17.3.11 服务 534

17.4 案例：使用AngularJS实现即时搜索 537

第18章 文件 540

18.1 文件存储 541

18.2 处理用户文件 541

18.2.1 读取文件 541

18.2.2 读取文件属性 543

18.2.3 文件分割 545

18.2.4 处理事件 547

18.3 文件操作 549

18.3.1 本地磁盘操作 549

18.3.2 创建文件 552

18.3.3 创建目录 553

18.3.4 列出文件 553

18.3.5 处理文件 557

18.3.6 移动 557

18.3.7 复制 560

18.3.8 删除 560

18.4 文件内容操作 561

18.4.1 写入内容 561

18.4.2 追加内容 564

18.4.3 读取内容 564

18.5 案例：用户本地资源管理 567

第19章 绘图 575

19.1 Canvas基础知识 576

19.1.1 Canvas 576

19.1.2 绘图方法 577

19.1.3 绘图属性 578

19.2 图形绘制 579

19.2.1 矩形 579

19.2.2 线条 581

19.2.3 多边形 581

19.2.4 圆角矩形 583

19.2.5 圆形 584

19.2.6 曲线 586

19.2.7 文字 588

19.2.8 图像 592

19.3 图形变换与控制 600

19.3.1 坐标变换 600

19.3.2 矩阵变换 604

19.3.3 设置阴影 605

19.3.4 叠加风格 607

19.3.5 填充风格 608

19.4 案例：用Canvas绘制统计报表 612

第20章 本地存储 616

20.1 基础知识 617

20.1.1 本地存储简介 617

20.1.2 本地存储类型 617

20.2 Cookie 619

20.2.1 Cookie概述 619

20.2.2 数据操作 619

20.2.3 案例：在网站中自动记录用户状态 621

20.3 Web Storage 623

20.3.1 sessionStorage 623

20.3.2 localStorage 626

20.3.3 对比分析 628

20.4 本地数据库 628

20.4.1 存储原理 628

20.4.2 数据操作 629

20.5 案例：使用本地存储减少服务器数据库请求 635

第21章 地理定位 641

21.1 常见地理定位方式 642

21.1.1 IP定位 642

21.1.2 GPS定位 642

21.1.3 Wi-Fi定位 642

21.1.4 手机基站定位 642

21.2 使用HTML5实现地理定位 642

21.2.1 浏览器支持性检查 643

21.2.2 位置请求 643

21.2.3 隐私保护 646

21.3 案例：使用百度地图展示当前位置 646

21.4 案例：使用百度地图展示运动轨迹 648

第22章 Web测试 652

22.1 概述 653

22.1.1 什么是Web测试？ 653

22.1.2 测试内容 653

22.1.3 测试目的 654

22.2 用户界面测试 654

22.2.1 导航测试 654

22.2.2 图形测试 655

22.2.3 内容测试 655

22.2.4 整体界面测试 655

22.3 兼容性测试 655

22.3.1 平台兼容性测试 655

22.3.2 浏览器兼容性测试 657

22.3.3 分辨率兼容性测试 658

22.4 功能测试 659

22.5 性能测试 662

22.5.1 连接速度测试 663

22.5.2 压力测试 667

第23章 网站发布 676

23.1 概述 677

23.2 域名注册 677

23.2.1 什么是域名注册？ 677

23.2.2 如何注册域名？ 677

23.2.3 实训：通过阿里云进行域名注册 677

23.3 Web服务器构建 680

23.3.1 什么是Web服务器？ 680

23.3.2 如何构建Web服务器？ 680

23.3.3 实训：使用阿里云构建Web服务器 680

23.4 网站上传 686

23.5 网站备案 686

23.5.1 什么是网站备案？ 686

23.5.2 实训：通过阿里云进行网站备案 686

23.6 域名解析 688

23.6.1 什么是域名解析？ 688

23.6.2 实训：在阿里云上配置域名解析 689

参考文献 691