Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版)

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

汪婵婵，女，副教授，浙江安防职业技术学院人工智能学院副院长。2011年毕业于同济大学计算机技术工程硕士。工作多年来，一直从事网站设计类课程的教学，积累了一定的经验。曾主持省课题两项，市课题两项，院课题多项。参与多项省部级课题、市厅级课题和院级课题。主编教材四本（其中，“十三五”职业教育国家规划教材一本，“十二五”职业教育国家规划教材一本），副主编教材一本。

第一单元Web基础知识
任务1搭建开发环境1
1.1知识准备1
1.1.1Web与Internet1
1.1.2Web的工作原理2
1.1.3Web页的类型3
1.1.4HTML5概述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.1HTML5文档格式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.1CSS简介65
6.1.2CSS样式规则65
6.1.3CSS样式的引入66
6.1.4CSS样式的优先级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.2CSS样式面板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
任务8id选择器、伪选择器和表格样式92
8.1知识准备92
8.1.1id选择器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.2overflow属性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.6z-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.1box-shadow属性164
13.1.2box-sizing属性165
13.1.3线性渐变167
13.1.4径向渐变168
13.1.5重复渐变168
13.1.6Web字体图标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.3input元素及属性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基础
任务18JavaScript的应用226
18.1知识准备226
18.1.1JavaScript简介226
18.1.2JavaScript语言基础228
18.1.3JavaScript函数230
18.1.4事件及事件驱动231
18.1.5JavaScript对象233
18.1.6BOM对象238
18.1.7DOM对象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