本书以“采用网页新标准技术、突破传统知识体系结构、基于工作能力培养、置身真实工作情境”为标准，通过任务驱动的教学方式讲解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与Internet 1
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 实战演练——制作“旅游景点推荐网”banner 157
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