Web前端

本书《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》^[1]深入介绍了Web前端设计相关的各种技术，内容涵盖HTML基本标签、表格与框架、CSS页面布局、JavaScript基本语法、JavaScript对象、BOM和DOM编程、HTML5、jQuery框架以及自定义插件。

本书在HTML5章节中对HTML5的一些新特性进行全面介绍，包括HTML5+CSS3页面布局、Canvas绘图、多媒体播放、Web存储、本地数据库和Web Worker等技术；在jQuery章节中的代码均适用于jQuery 1.x和2.x两个版本。书中所有代码都是基于IE 11、Chrome和FireFox浏览器调试运行。

本书由浅入深对Web前端基础内容进行了系统讲解，并且重点突出、强调动手操作能力，以一个项目贯穿所有章节的任务实现，使得读者能够快速理解并掌握各项重点知识，全面提高分析问题、解决问题以及动手编码的能力。

随着HTML 5和ECMAScript 6的正式发布，大量的前端业务逻辑极大地增加了前端的代码量，前端代码的模块化、按需加载和依赖管理势在必行，因此Web前端越来越被人们重视。本书作为Web前端设计教材，由浅入深系统地讲解了HTML基本标签、表格与框架、CSS页面布局、JavaScript基本语法、JavaScript对象、BOM与DOM编程、HTML 5新特性、jQuery框架以及自定义插件。且对每个知识点都进行了深入分析，针对知识点在语法、示例、代码及任务实现上进行阶梯式层层强化，让读者对知识点从入门到灵活运用一步一步脚踏实地进行。

一、“在实践中成长”丛书介绍

QST青软实训“在实践中成长”丛书在技术上、教学和学习方法上进行优化升级，此次出版的丛书由QST青软实训联合高等教育的专家、IT企业的行业及技术专家共同编写，既涵盖新技术及技术的升级，同时融合了深入到高校四年教育中所总结的IT技术学习方法及教学方法。“在实践中成长”丛书系列教材包括：

• 《Java 8基础应用与开发》
• 《Java 8高级应用与开发》
• 《Oracle数据库应用与开发》
• 《Java Web技术及应用》
• 《Web前端设计与开发——HTML+CSS+JavaScript+HTML5+jQuery》^[3]
• 《Java EE轻量级框架应用与开发——S2SH》
• 《Android程序设计与开发》
• 《Linux操作系统》
• 《ZigBee技术开发——CC2530单片机技术原理及应用》
• 《Zigbee技术开发——Z-Stack协议栈原理及应用》
• 《ARM体系结构与接口技术--基于ARM11 S3C6410》
• 《Linux应用程序开发》
• 《嵌入式图形界面开发》
• 《Altium Designer原理图设计与PCB制作》

二、“在实践中成长”丛书的创新点及优势

1.面向学习者

以一个完整的项目贯穿技术点，以点连线、多线成面，通过项目驱动学习方法使学习者轻松的将技术学习转化为技术能力。

2.面向高校教师

为教学提供完整的课程产品组件及服务，满足高校教学各个环节的资源支持。

本书从技术的原理出发，同时以示例、实例的形式对各知识点进行详细讲解，并致力于将知识点融入实际项目的开发中。本书的特色是采用一个“Q- Walking Fashion E&S漫步时尚广场”项目，将所有章节重点技术进行贯穿，每章项目代码会层层迭代不断完善，最终形成一个完整的系统。通过贯穿项目以点连线、多线成面，使得读者能够快速理解并掌握各项重点知识，全面提高分析问题、解决问题以及动手编码的能力。

1.项目简介

“Q- Walking Fashion E&S漫步时尚广场”项目是一个基于购物、美食和娱乐为一体的综合性电子商务平台，系统由前台和后台两大部分组成：

• 前台功能主要包括：网站首页、用户注册与登录、购物模块、餐饮模块和影视模块；
• 后台功能主要包括：后台管理首页、商品管理模块、餐饮管理模块、影视管理模块和报表统计。

2.贯穿项目模块

“Q- Walking Fashion E&S漫步时尚广场”贯穿项目的实现穿插到《Web前端设计与开发》的所有章节中，每个章节的任务均是在前一章节的基础上进行实现，对项目逐步进行迭代、升级，最终形成一个完整的项目，并将Web前端课程重点技能点进行强化应用。

其中：

• 本教材中的贯穿项目实现并完成了前台的购物模块、用户注册和后台的管理首页、购物管理模块；
• 课后上机中的贯穿项目对前台的餐饮模块、用户登录和后台的餐饮管理模块进行练习强化；
• 本教材配套的实验手册中的贯穿项目实现并完成了前台网站的首页、影视模块以及后台的影视管理模块。

这三部分贯穿项目是并行的，并且项目的模块之间做到了对应一致，以便学生以教材为参照，经历“学习掌握——练习强化——复习巩固”的三个过程，并最终完成一个完整的大项目，确保并增强学生的动手实践能力。

本书由QST青软实训的郭全友老师负责本书编写工作和全书统稿，另外还有赵克玲、冯娟娟参与本书的审核和修订工作。作者均已从事计算机教学和项目开发多年，拥有丰富的教学和实践经验。由于时间有限，书中难免有疏漏和不足之处，肯请广大读者及专家不吝赐教。

第1章 HTML语言基础
任务驱动

学习路线

本章目标

1.1 Internet起源

1.2 HTML概述

1.2.1 HTML发展过程

1.2.2 HTML文档结构

1.2.3 编写HTML文件的注意事项

1.2.4 文档类型声明和语言版本

1.3 HEAD元素

1.3.1 title元素

1.3.2 meta元素

1.4 文本元素

1.4.1 标题标签

1.4.2 文本修饰标签

1.4.3 特殊字符

1.5 文档结构元素

1.5.1 段落标签

1.5.2 换行标签

1.5.3 水平线标签

1.6 列表元素

1.6.1 有序列表

1.6.2 无序列表

1.6.2 定义列表

1.7 div与span标签

1.8 URL简介

1.9 图像标签

1.10 超链接标签

1.10.1 文本链接与锚点链接

1.10.2 图片链接与图片热区链接

1.10.3 其他超链接

1.10.4 超链接的target属性

1.11 贯穿任务实现

1.11.1 实现【任务1-1】

1.11.2 实现【任务1-2】

1.11.3 实现【任务1-3】

1.11.4 实现【任务1-4】

本章总结

小结

Q&A

章节练习

习题

上机

第2章 表格与框架

任务驱动

学习路线

本章目标

2.1 表格

2.1.1 表格的组成

2.1.2 表格的基本属性

2.1.3 单元格标签

2.1.4 行标签

2.1.5 表格的行分组

2.1.6 表格的列分组

2.1.7 表格的嵌套

2.2 框架

2.2.1 框架集的基本结构

2.2.2 框架集的属性

2.2.3 框架的属性

2.2.4 框架集的嵌套

2.2.5 内联框架

2.2.6 框架之间的链接

2.3 贯穿任务实现

2.3.1 实现【任务2-1】

2.3.2 实现【任务2-2】

本章总结

小结

Q&A

章节练习

习题

上机

第3章 表单

任务驱动

学习路线

本章目标

3.1 表单概述

3.2 表单标签

3.3 表单域

3.3.1 单行文本框

3.3.2 密码框

3.3.3 单选按钮

3.3.4 复选框

3.3.5 文件选择框

3.3.6 隐藏域

3.3.7 多行文本框

3.3.8 列表选择框

3.4 按钮控件

3.5 表单分组

3.6 贯穿任务实现

3.6.1 实现【任务3-1】

3.6.2 实现【任务3-2】

本章总结

小结

Q&A

章节练习

习题

上机

第4章 CSS语言基础

任务驱动

学习路线

本章目标

4.1 CSS概述

4.1.1 CSS发展史

4.1.2 CSS基本语法结构

4.2 CSS的使用

4.2.1 内嵌样式

4.2.2 内部样式表

4.2.3 外部样式表

4.2.4 样式表的优先级

4.3 CSS选择器

4.3.1 基本选择器

4.3.2 组合选择器

4.3.3 属性选择器

4.4 CSS样式属性

4.4.1 文本属性

4.4.2 字体属性

4.4.3 背景属性

4.4.4 表格属性

4.4.5 列表属性

4.4.6 分类属性

4.5 伪类与伪元素

4.5.1 伪类

4.5.2 伪元素

4.6 贯穿任务实现

4.6.1 实现【任务4-1】

4.6.2 实现【任务4-2】

本章总结

小结

Q&A

章节练习

习题

上机

第5章 CSS页面布局

任务驱动

学习路线

本章目标

5.1 盒子模型

5.2 内容区content

5.3 边框border

5.3.1 边框宽度

5.3.2 边框样式

5.3.3 圆角边框

5.3.4 边框阴影

5.3.4 图像边框

5.4 内边距padding

5.5 外边距margin

5.5.1 外边距的基本用法

5.5.2 外边距合并

5.6 DIV+CSS页面布局

5.7 贯穿任务实现

5.7.1 实现【任务5-1】

5.7.2 实现【任务5-2】

本章总结

小结

Q&A

章节练习

习题

上机

第6章 JavaScript语言基础

任务驱动

学习路线

本章目标

6.1 JavaScript简介

6.1.1 JavaScript发展史

6.1.2 JavaScript特点及规范

6.2 JavaScript使用形式

6.3 基本语法

6.3.1 标识符

6.3.2 关键字

6.3.3 数据类型

6.3.4 变量

6.3.4 注释

6.4 运算符

6.4.1 赋值运算符

6.4.2 算术运算符

6.4.3 比较运算符

6.4.4 逻辑运算符

6.4.4 三元运算符

6.5 流程控制

6.5.1 分支结构

6.5.2 循环结构

6.5.3 转移语句

6.5.4 with语句

6.6 函数

6.6.1 预定义函数

6.6.2 自定义函数

6.7 贯穿任务实现

6.7.1 实现【任务6-1】

6.7.2 实现【任务6-2】

本章总结

小结

Q&A

章节练习

习题

上机

第7章 JavaScript对象

任务驱动

学习路线

本章目标

7.1 JavaScript对象

7.2 Array数组对象

7.2.1 数组对象的创建

7.2.2 数组对象的属性

7.2.3 数组对象的常用方法

7.2.4 二维数组

7.3 String字符串对象

7.3.1 字符串的创建

7.3.2 字符串对象的常用方法

7.4 Date日期对象

7.4.1 Date对象的创建

7.4.2 Date对象的常用方法

7.5 Math数学对象

7.5.1 Math对象的属性

7.5.2 Math对象的方法

7.6 RegExp正则表达式对象

7.6.1 RegExp对象的创建

7.6.2 RegExp对象的方法

7.6.3 String与RegExp

7.7 自定义对象

7.7.1 原始方式

7.7.2 构造函数方式

7.7.3 原型方式

7.7.4 混合方式

7.7.5 JSON方式

7.8 贯穿任务实现

7.8.1 实现【任务7-1】

7.8.2 实现【任务7-2】

本章总结

小结

Q&A

章节练习

习题

上机

第8章 BOM与DOM编程

任务驱动

学习路线

本章目标

8.1 BOM和DOM模型

8.1.1 BOM模型

8.1.2 DOM模型

8.1.3 事件机制

8.2 window对象

8.2.1 window对象的属性

8.2.2 window对象的方法

8.3 location对象

8.4 history对象

8.5 navigator对象

8.6 document对象

8.6.1 document对象的属性

8.6.2 document对象的方法

8.7 Form对象

8.8 Table对象

8.9 DOM节点

8.10 事件处理

8.10.1 事件流和事件对象

8.10.2 鼠标事件

8.10.3 键盘事件

8.10.4 文档事件

8.10.5 表单及表单元素事件

8.11 贯穿任务实现

8.11.1 实现【任务8-1】

8.11.2 实现【任务8-2】

8.11.3 实现【任务8-3】

本章总结

小结

Q&A

章节练习

习题

上机

第9章 HTML 5基础

任务驱动

学习路线

本章目标

9.1 HTML 5概述

9.1.1 HTML 5发展史

9.1.2 HTML 5优势

9.2 HTML 5语法特征

9.2.1 HTML 5标记方式

9.2.2 HTML 5语法差异

9.3 HTML 5文档结构

9.3.1 HTML 5文档结构元素

9.3.2 HTML 5其他标签

9.3.3 HTML 5拖放API

9.4 HTML 5表单元素

9.4.1 HTML 5表单属性

9.4.2 新增的input标签

9.4.3 自定义表单验证

9.5 贯穿任务实现

9.5.1 实现【任务9-1】

9.5.2 实现【任务9-2】

9.5.3 实现【任务9-3】

本章总结

小结

Q&A

章节练习

习题

上机

第10章 HTML 5进阶

任务驱动

学习路线

本章目标

10.1 Canvas绘图

10.1.1 <canvas>标签

10.1.2 CanvasRenderingContext2D对象

10.1.3 绘制图形

10.1.4 绘制图像

10.1.5 绘制文字

10.1.6 绘制路径

10.1.7 绘制圆弧

10.1.8 绘制渐变图形

10.1.9 图形坐标变换

10.2 多媒体播放

10.2.1 HTML 5的多媒体支持

10.2.2 HTML 5多媒体API

10.3 Web存储

10.3.1 Storage接口

10.3.2 Session Storage

10.3.3 Local Storage

10.4 本地数据库

10.4.1 SQLite数据库

10.4.2 IndexedDB数据库

10.5 Web Worker

10.5.1 Worker基本应用

10.5.2 Worker线程嵌套

10.6 贯穿任务实现

10.6.1 实现【任务10-1】

10.6.2 实现【任务10-2】

10.6.3 实现【任务10-3】

本章总结

小结

Q&A

章节练习

习题

上机

第11章 jQuery基础

任务驱动

学习路线

本章目标

11.1 jQuery概述

11.1.1 jQuery优势

11.1.2 搭建jQuery开发环境

11.1.3 DOM对象和jQuery对象

11.2 jQuery选择器

11.2.1 基本选择器

11.2.2 层次选择器

11.2.3 过滤选择器

11.2.4 表单选择器

11.3 jQuery基本操作

11.3.1 属性操作

11.3.2 样式操作

11.3.3 内容操作

11.4 jQuery事件处理

11.4.1 页面加载事件

11.4.2 事件绑定

11.4.3 解除事件绑定

11.4.4 事件对象

11.5 贯穿任务实现

11.5.1 实现【任务11-1】

11.5.2 实现【任务11-2】

11.5.3 实现【任务11-3】

本章总结

小结

Q&A

章节练习

习题

上机

第12章 jQuery进阶

任务驱动

学习路线

本章目标

12.1 jQuery文档处理

12.1.1 创建节点

12.1.2 插入节点

12.1.3 复制节点

12.1.4 删除节点

12.1.5 包裹节点

12.2 遍历节点

12.2.1 祖先遍历

12.2.2 后代遍历

12.2.3 同胞遍历

12.2.4 节点过滤

12.3 jQuery动画效果

12.4 数组和对象操作

12.5 jQuery插件

12.5.1 插件的基本原理

12.5.2 表格插件的实现

12.5.3 图表插件的实现

12.6 贯穿任务实现

12.6.1 实现【任务12-1】

12.6.2 实现【任务12-2】

12.6.3 实现【任务12-3】

本章总结

小结

Q&A

章节练习

习题

上机

附录A HTML 5新增和弃用标签

A.1 HTML 5新增的标签

A.2 HTML 5弃用标签

附录B HTML 5浏览器支持情况

附录C JSON语法

C.1 JSON简介

C.2 JSON基本结构

C.3 JSON复杂结构

C.4 JSON解析方法

附录D 常用的校验正则表达式

附录E IE 11开发人员工具

E.1 开发人员工具简介

E.2 使用F12工具