单元 Web基础知识
任务1 搭建开发环境\t1
1.1 知识准备\t1
1.1.1 Web与Internet\t1
1.1.2 Web的工作原理\t2
1.1.3 Web页的类型\t3
1.1.4 HTML5概述\t3
1.2 实战演练――搭建开发环境\t3
1.2.1 网页编辑软件的安装\t3
1.2.2 浏览器的安装\t5
1.3 强化训练――创建个HTML5页面\t5
1.3.1 创建和管理站点\t5
1.3.2 创建和保存HTML5文档\t7
1.4 课后实训\t8

第二单元 HTML5语言基础
任务2 文字与段落排版\t10
2.1 知识准备\t10
2.1.1 HTML5文档格式\t10
2.1.2 标签的属性\t11
2.1.3 文本标签\t12
2.1.4 分隔标签\t14
2.1.5 序列标签\t16
2.2 实战演练――制作“科技馆参观须知”网页\t18
2.2.1 网页效果图\t18
2.2.2 制作过程\t19
2.2.3 代码分析\t19
2.3 强化训练――制作“我家菜馆”点菜单网页\t20
2.3.1 网页效果图\t20
2.3.2 制作过程\t20
2.3.3 代码分析\t21
2.4 课后实训\t21
任务3 图像和超链接\t22
3.1 知识准备\t22
3.1.1 图像标签\t22
3.1.2 绝对路径和相对路径\t23
3.1.3 超链接标签\t24
3.1.4 锚点链接\t25
3.2 实战演练――制作“网页技术介绍”网页\t27
3.2.1 网页效果图\t27
3.2.2 制作过程\t27
3.2.3 代码分析\t29
3.3 强化训练――制作“文章故事网”网页\t29
3.3.1 网页效果图\t29
3.3.2 制作过程\t30
3.3.3 代码分析\t31
3.4 课后实训\t31

第三单元 HTML5新增标签及属性
任务4 结构标签和分组标签\t32
4.1 知识准备\t32
4.1.1 结构标签\t32
4.1.2 分组标签\t39
4.2 实战演练――制作“唐诗欣赏”网页\t41
4.2.1 网页效果图\t41
4.2.2 制作过程\t41
4.2.3 代码分析\t44
4.3 强化训练――制作“温州地标性建筑”网页\t45
4.3.1 网页效果图\t45
4.3.2 制作过程\t45
4.3.3 代码分析\t47
4.4 课后实训\t48
任务5 页面交互标签、层次语义标签和全局属性\t48
5.1 知识准备\t48
5.1.1 页面交互标签\t48
5.1.2 层次语义标签\t51
5.1.3 全局属性\t53
5.2 实战演练――制作“书评网”网页\t56
5.2.1 网页效果图\t56
5.2.2 制作过程\t57
5.2.3 代码分析\t60
5.3 强化训练――制作“面试应答技巧”网页\t60
5.3.1 网页效果图\t60
5.3.2 制作过程\t61
5.3.3 代码分析\t63
5.4 课后实训\t63

第四单元 CSS3基础
任务6 标记选择器和类选择器\t65
6.1 知识准备\t65
6.1.1 CSS简介\t65
6.1.2 CSS样式规则\t65
6.1.3 CSS样式的引入\t66
6.1.4 CSS样式的优先级\t68
6.1.5 标记选择器\t68
6.1.6 类选择器\t69
6.2 实战演练――制作“美化文章”网页\t70
6.2.1 网页效果图\t70
6.2.2 制作过程\t70
6.2.3 代码分析\t72
6.3 强化训练――制作“图文混排”网页\t72
6.3.1 网页效果图\t72
6.3.2 制作过程\t73
6.3.3 代码分析\t74
6.4 课后实训\t75
任务7 链接伪类和CSS样式面板\t75
7.1 知识准备\t75
7.1.1 链接伪类\t75
7.1.2 CSS样式面板\t77
7.2 实战演练――制作“散文欣赏”网页\t77
7.2.1 网页效果图\t77
7.2.2 制作过程\t78
7.2.3 代码分析\t85
7.3 强化训练――制作“热点新闻”列表\t85
7.3.1 网页效果图\t85
7.3.2 制作过程\t86
7.3.3 代码分析\t91
7.4 课后实训\t91
任务8 id选择器、伪选择器和表格样式\t92
8.1 知识准备\t92
8.1.1 id选择器\t92
8.1.2 伪选择器\t93
8.1.3 表格\t94
8.2 实战演练――制作“鞋子尺码对照单”网页\t96
8.2.1 网页效果图\t96
8.2.2 制作过程\t96
8.2.3 代码分析\t98
8.3 强化训练――制作“婴儿身高体重标准表”网页\t99
8.3.1 网页效果图\t99
8.3.2 制作过程\t100
8.3.3 代码分析\t102
8.4 课后实训\t103
任务9 复合选择器、通配符选择器\t103
9.1 知识准备\t103
9.1.1 复合选择器\t103
9.1.2 通配符选择器\t106
9.1.3 同时应用多个样式\t106
9.2 实战演练――制作“寓言故事”网页\t107
9.2.1 网页效果图\t107
9.2.2 制作过程\t108
9.2.3 代码分析\t110
9.3 强化训练――制作“诗词欣赏”网页\t110
9.3.1 网页效果图\t110
9.3.2 制作过程\t111
9.3.3 代码分析\t116
9.4 课后实训\t116

第五单元 盒子模型
任务10 盒子模型及应用\t119
10.1 知识准备\t119
10.1.1 盒子模型的概念\t119
10.1.2 边框的设置\t120
10.1.3 内边距的设置\t125
10.1.4 外边距的设置\t126
10.2 实战演练――制作“古诗文欣赏”网页\t128
10.2.1 网页效果图\t128
10.2.2 制作过程\t128
10.2.3 代码分析\t129
10.3 强化训练――制作“散文赏析”网页\t130
10.3.1 网页效果图\t130
10.3.2 制作过程\t130
10.3.3 代码分析\t132
10.4 课后实训\t133
任务11 元素的浮动\t133
11.1 知识准备\t133
11.1.1 元素的类型及转换\t133
11.1.2 overflow属性\t135
11.1.3 元素的浮动\t136
11.1.4 清除浮动\t139
11.2 实战演练――制作“网站导航条”网页\t144
11.2.1 网页效果图\t144
11.2.2 制作过程\t145
11.2.3 代码分析\t146
11.3 强化训练――制作“浪漫花语百科网”网页\t146
11.3.1 网页效果图\t146
11.3.2 制作过程\t146
11.3.3 代码分析\t150
11.4 课后实训\t151
任务12 元素的定位\t152
12.1 知识准备\t152
12.1.1 元素的定位模式与边偏移\t152
12.1.2 静态定位\t152
12.1.3 相对定位\t152
12.1.4 绝对定位\t154
12.1.5 固定定位\t156
12.1.6 z-index层叠等级属性\t156
12.2 实战演练――制作“旅游景点推荐网”banner\t157
12.2.1 网页效果图\t157
12.2.2 制作过程\t157
12.2.3 代码分析\t159
12.3 强化训练――制作“个人博客首页”网页\t160
12.3.1 网页效果图\t160
12.3.2 制作过程\t160
12.3.3 代码分析\t163
12.4 课后实训\t164
任务13 阴影与渐变属性\t164
13.1 知识准备\t164
13.1.1 box-shadow属性\t164
13.1.2 box-sizing属性\t165
13.1.3 线性渐变\t167
13.1.4 径向渐变\t168
13.1.5 重复渐变\t168
13.1.6 Web字体图标\t170
13.2 实战演练――制作“网站广告栏”网页\t171
13.2.1 网页效果图\t171
13.2.2 制作过程\t171
13.2.3 代码分析\t173
13.3 强化训练――制作“旅游攻略网”网页\t174
13.3.1 网页效果图\t174
13.3.2 制作过程\t175
13.3.3 代码分析\t179
13.4 课后实训\t181
任务14 过渡与变形属性\t181
14.1 知识准备\t181
14.1.1 过渡属性\t181
14.1.2 变形属性\t183
14.2 实战演练――制作“产品展示”网页\t184
14.2.1 网页效果图\t184
14.2.2 制作过程\t185
14.2.3 代码分析\t186
14.3 强化训练――制作“商品评论”网页\t187
14.3.1 网页效果图\t187
14.3.2 制作过程\t187
14.3.3 代码分析\t191
14.4 课后实训\t191

第六单元 HTML5表单的应用
任务15 表单与input元素\t194
15.1 知识准备\t194
15.1.1 认识表单\t194
15.1.2 创建表单\t194
15.1.3 input元素及属性\t195
15.2 实战演练――制作“登录界面”网页\t196
15.2.1 网页效果图\t196
15.2.2 制作过程\t196
15.2.3 代码分析\t198
15.3 强化训练――制作“简历”表单\t199
15.3.1 网页效果图\t199
15.3.2 制作过程\t200
15.3.3 代码分析\t203
15.4 课后实训\t204
任务16 其他表单元素与表单验证\t204
16.1 知识准备\t204
16.1.1 其他表单元素\t204
16.1.2 表单验证方法\t207
16.1.3 正则表达式\t208
16.2 实战演练――制作“商品订购”表单\t210
16.2.1 网页效果图\t210
16.2.2 制作过程\t210
16.2.3 代码分析\t213
16.3 强化训练――制作“会员注册”表单\t213
16.3.1 网页效果图\t213
16.3.2 制作过程\t214
16.3.3 代码分析\t216
16.4 课后实训\t217

第七单元 网页多媒体
任务17 视频与音频\t218
17.1 知识准备\t218
17.1.1 嵌入视频\t218
17.1.2 嵌入音频\t219
17.1.3 ＜source＞标签\t219
17.1.4 视频与音频的DOM操作\t220
17.2 实战演练――制作“音乐播放器”网页\t221
17.2.1 网页效果图\t221
17.2.2 制作过程\t221
17.2.3 代码分析\t223
17.3 强化训练――制作“视频播放”网页\t223
17.3.1 网页效果图\t223
17.3.2 制作过程\t224
17.3.3 代码分析\t225
17.4 课后实训\t225

第八单元 JavaScript基础
任务18 JavaScript的应用\t226
18.1 知识准备\t226
18.1.1 JavaScript简介\t226
18.1.2 JavaScript语言基础\t228
18.1.3 JavaScript函数\t230
18.1.4 事件及事件驱动\t231
18.1.5 JavaScript对象\t233
18.1.6 BOM对象\t238
18.1.7 DOM对象\t240
18.2 实战演练――制作“商品精选模块”网页\t243
18.2.1 网页效果图\t243
18.2.2 制作过程\t243
18.2.3 代码分析\t245
18.3 强化训练――制作“焦点图广告”网页\t246
18.3.1 网页效果图\t246
18.3.2 制作过程\t246
18.3.3 代码分析\t250
18.4 课后实训\t251

本书根据计算机相关专业人才培养的需要，结合高等教育对Web前端技术课程的要求，以及对学生网页设计与制作的技术能力要求、行业企业相应岗位能力要求以及当今流行的网页制作新技术新标准，以“实用、好用、够用”为原则，采用任务驱动模式，将HTML5和CSS3设计网页的技巧融入