本书以“采用网页新标准技术、突破传统知识体系结构、基于工作能力培养、置身真实工作情境”为标准，通过任务驱动的教学方式讲解HTML5、CSS3、JavaScript等Web前端开发技术。本书包含“8个知识单元、18个项目任务、36个实战案例、18个课后实训”，每个项目任务又以“知识准备→实战演练→强化训练→课后实训”为主线，介绍了Web基础知识、HTML5语言基础、HTML5新增标签及属性、CSS3基础、盒子模型、HTML5表单的应用、网页多媒体和JavaScript基础。本书将Web前端开发技术贯穿所有的项目任务和实训中，深入剖析了网页布局及样式美化的思路和方法，使学生掌握Web前端核心技术，启发并引导学生自主学习，并形成良好的职业素养。本书附有源代码、电子课件、教案等教学资源。本书既可以作为高等院校、高等职业院校“网页设计与制作”课程的教材，也可以作为前端与移动开发的培训教材，还可以供网页制作、网站开发、网页编程、美工设计等人员参考。

汪婵婵，副教授，2011年毕业于同济大学计算机技术工程硕士。工作十多年来，一直从事网站设计类课程的教学，积累了一定的经验。曾主持省课题一项，市课题一项，院课题多项。参与多项省部级课题、市厅级课题和院级课题。主编教材两本，副主编一本。

第一单元 Web基础知识

任务1 搭建开发环境1

1.1 知识准备1

1.1.1 Web与Internet1

1.1.2 Web的工作原理2

1.1.3 Web页的类型3

1.1.4 HTML5概述3

1.2 实战演练——搭建开发环境3

1.2.1 网页编辑软件的安装3

1.2.2 浏览器的安装5

1.3 强化训练——创建第一个HTML5页面5

1.3.1 创建和管理站点5

1.3.2 创建和保存HTML5文档7

1.4 课后实训8

第二单元 HTML5语言基础

任务2 文字与段落排版10

2.1 知识准备10

2.1.1 HTML5文档格式10

2.1.2 标签的属性11

2.1.3 文本标签12

2.1.4 分隔标签14

2.1.5 序列标签16

2.2 实战演练——制作“科技馆参观须知”网页18

2.2.1 网页效果图18

2.2.2 制作过程19

2.2.3 代码分析19

2.3 强化训练——制作“我家菜馆”点菜单网页20

2.3.1 网页效果图20

2.3.2 制作过程20

2.3.3 代码分析21

2.4 课后实训21

任务3 图像和超链接22

3.1 知识准备22

3.1.1 图像标签22

3.1.2 绝对路径和相对路径23

3.1.3 超链接标签24

3.1.4 锚点链接25

3.2 实战演练——制作“网页技术介绍”网页27

3.2.1 网页效果图27

3.2.2 制作过程27

3.2.3 代码分析29

3.3 强化训练——制作“文章故事网”网页29

3.3.1 网页效果图29

3.3.2 制作过程30

3.3.3 代码分析31

3.4 课后实训31

第三单元 HTML5新增标签及属性

任务4 结构标签和分组标签32

4.1 知识准备32

4.1.1 结构标签32

4.1.2 分组标签39

4.2 实战演练——制作“唐诗欣赏”网页41

4.2.1 网页效果图41

4.2.2 制作过程41

4.2.3 代码分析44

4.3 强化训练——制作“温州地标性建筑”网页45

4.3.1 网页效果图45

4.3.2 制作过程45

4.3.3 代码分析47

4.4 课后实训48

任务5 页面交互标签、层次语义标签和全局属性48

5.1 知识准备48

5.1.1 页面交互标签48

5.1.2 层次语义标签51

5.1.3 全局属性53

5.2 实战演练——制作“书评网”网页56

5.2.1 网页效果图56

5.2.2 制作过程57

5.2.3 代码分析60

5.3 强化训练——制作“面试应答技巧”网页60

5.3.1 网页效果图60

5.3.2 制作过程61

5.3.3 代码分析63

5.4 课后实训63

第四单元 CSS3基础

任务6 标记选择器和类选择器65

6.1 知识准备65

6.1.1 CSS简介65

6.1.2 CSS样式规则65

6.1.3 CSS样式的引入66

6.1.4 CSS样式的优先级68

6.1.5 标记选择器68

6.1.6 类选择器69

6.2 实战演练——制作“美化文章”网页70

6.2.1 网页效果图70

6.2.2 制作过程70

6.2.3 代码分析72

6.3 强化训练——制作“图文混排”网页72

6.3.1 网页效果图72

6.3.2 制作过程73

6.3.3 代码分析74

6.4 课后实训75

任务7 链接伪类和CSS样式面板75

7.1 知识准备75

7.1.1 链接伪类75

7.1.2 CSS样式面板77

7.2 实战演练——制作“散文欣赏”网页77

7.2.1 网页效果图77

7.2.2 制作过程78

7.2.3 代码分析85

7.3 强化训练——制作“热点新闻”列表85

7.3.1 网页效果图85

7.3.2 制作过程86

7.3.3 代码分析91

7.4 课后实训91

任务8 id选择器、伪选择器和表格样式92

8.1 知识准备92

8.1.1 id选择器92

8.1.2 伪选择器93

8.1.3 表格94

8.2 实战演练——制作“鞋子尺码对照单”网页96

8.2.1 网页效果图96

8.2.2 制作过程96

8.2.3 代码分析98

8.3 强化训练——制作“婴儿身高体重标准表”网页99

8.3.1 网页效果图99

8.3.2 制作过程100

8.3.3 代码分析102

8.4 课后实训103

任务9 复合选择器、通配符选择器103

9.1 知识准备103

9.1.1 复合选择器103

9.1.2 通配符选择器106

9.1.3 同时应用多个样式106

9.2 实战演练——制作“寓言故事”网页107

9.2.1 网页效果图107

9.2.2 制作过程108

9.2.3 代码分析110

9.3 强化训练——制作“诗词欣赏”网页110

9.3.1 网页效果图110

9.3.2 制作过程111

9.3.3 代码分析116

9.4 课后实训116

第五单元 盒子模型

任务10 盒子模型及应用119

10.1 知识准备119

10.1.1 盒子模型的概念119

10.1.2 边框的设置120

10.1.3 内边距的设置125

10.1.4 外边距的设置126

10.2 实战演练——制作“古诗文欣赏”网页128

10.2.1 网页效果图128

10.2.2 制作过程128

10.2.3 代码分析129

10.3 强化训练——制作“散文赏析”网页130

10.3.1 网页效果图130

10.3.2 制作过程130

10.3.3 代码分析132

10.4 课后实训133

任务11 元素的浮动133

11.1 知识准备133

11.1.1 元素的类型及转换133

11.1.2 overflow属性135

11.1.3 元素的浮动136

11.1.4 清除浮动139

11.2 实战演练——制作“网站导航条”网页144

11.2.1 网页效果图144

11.2.2 制作过程145

11.2.3 代码分析146

11.3 强化训练——制作“浪漫花语百科网”网页146

11.3.1 网页效果图146

11.3.2 制作过程146

11.3.3 代码分析150

11.4 课后实训151

任务12 元素的定位152

12.1 知识准备152

12.1.1 元素的定位模式与边偏移152

12.1.2 静态定位152

12.1.3 相对定位152

12.1.4 绝对定位154

12.1.5 固定定位156

12.1.6 z-index层叠等级属性156

12.2 实战演练——制作“旅游景点推荐网”banner157

12.2.1 网页效果图157

12.2.2 制作过程157

12.2.3 代码分析159

12.3 强化训练——制作“个人博客首页”网页160

12.3.1 网页效果图160

12.3.2 制作过程160

12.3.3 代码分析163

12.4 课后实训164

任务13 阴影与渐变属性164

13.1 知识准备164

13.1.1 box-shadow属性164

13.1.2 box-sizing属性165

13.1.3 线性渐变167

13.1.4 径向渐变168

13.1.5 重复渐变168

13.1.6 Web字体图标170

13.2 实战演练——制作“网站广告栏”网页171

13.2.1 网页效果图171

13.2.2 制作过程171

13.2.3 代码分析173

13.3 强化训练——制作“旅游攻略网”网页174

13.3.1 网页效果图174

13.3.2 制作过程175

13.3.3 代码分析179

13.4 课后实训181

任务14 过渡与变形属性181

14.1 知识准备181

14.1.1 过渡属性181

14.1.2 变形属性183

14.2 实战演练——制作“产品展示”网页184

14.2.1 网页效果图184

14.2.2 制作过程185

14.2.3 代码分析186

14.3 强化训练——制作“商品评论”网页187

14.3.1 网页效果图187

14.3.2 制作过程187

14.3.3 代码分析191

14.4 课后实训191

第六单元 HTML5表单的应用

任务15 表单与input元素194

15.1 知识准备194

15.1.1 认识表单194

15.1.2 创建表单194

15.1.3 input元素及属性195

15.2 实战演练——制作“登录界面”网页196

15.2.1 网页效果图196

15.2.2 制作过程196

15.2.3 代码分析198

15.3 强化训练——制作“简历”表单199

15.3.1 网页效果图199

15.3.2 制作过程200

15.3.3 代码分析203

15.4 课后实训204

任务16 其他表单元素与表单验证204

16.1 知识准备204

16.1.1 其他表单元素204

16.1.2 表单验证方法207

16.1.3 正则表达式208

16.2 实战演练——制作“商品订购”表单210

16.2.1 网页效果图210

16.2.2 制作过程210

16.2.3 代码分析213

16.3 强化训练——制作“会员注册”表单213

16.3.1 网页效果图213

16.3.2 制作过程214

16.3.3 代码分析216

16.4 课后实训217

第七单元 网页多媒体

任务17 视频与音频218

17.1 知识准备218

17.1.1 嵌入视频218

17.1.2 嵌入音频219

17.1.3 ＜source＞标签219

17.1.4 视频与音频的DOM操作220

17.2 实战演练——制作“音乐播放器”网页221

17.2.1 网页效果图221

17.2.2 制作过程221

17.2.3 代码分析223

17.3 强化训练——制作“视频播放”网页223

17.3.1 网页效果图223

17.3.2 制作过程224

17.3.3 代码分析225

17.4 课后实训225

第八单元 JavaScript基础

任务18 JavaScript的应用226

18.1 知识准备226

18.1.1 JavaScript简介226

18.1.2 JavaScript语言基础228

18.1.3 JavaScript函数230

18.1.4 事件及事件驱动231

18.1.5 JavaScript对象233

18.1.6 BOM对象238

18.1.7 DOM对象240

18.2 实战演练——制作“商品精选模块”网页243

18.2.1 网页效果图243

18.2.2 制作过程243

18.2.3 代码分析245

18.3 强化训练——制作“焦点图广告”网页246

18.3.1 网页效果图246

18.3.2 制作过程246

18.3.3 代码分析250

18.4 课后实训251