Web前端工程师是互联网时代Web产品研发中不可缺少的专业角色。本书从Web开发实际应用的角度，以任务项目开发为主线，把HTML5、CSS3的Web前端开发理论知识、实战技能融入8个任务，引导读者从HTML5设置网页内容、CSS定义样式美化网页布局等基础任务开始，逐步掌握图文网页、表单交互网页、音视频媒体网页、动画特效网页、瀑布流布局网页等页面开发，并在熟练编程的基础上，理解自适应网页设计和响应式网页设计关键技术，掌握响应式网页的设计与开发。本书配以思维导图帮助读者梳理知识点，将知识点融入到Web前端开发实际岗位案例中，有效掌握核心技巧，力求提高读者的Web网页开发水平。本书既可作为高等职业院校计算机及相关专业Web前端设计与开发课程的教材，也可供从事网页设计与制作、网页编程、Web应用开发等行业人员参考阅读。

李利正，毕业学校：浙江师范大学，学历：本科，学位：硕士，职称：副教授，研究方向：计算机应用

任务1　创建个网页1
1.1　基本条件和概念3
1.1.1　学习工具3
1.1.2　基本概念3
1.1.3　任务：建站点建网页6
1.2　格式排版标签9
1.2.1　段落标签与换行标签9
1.2.2　标题标签10
1.2.3　水平线标签10
1.2.4　无语义标签11
1.2.5　文本标签11
1.3　列表标签13
1.3.1　有序列表14
1.3.2　无序列表15
1.3.3　自定义列表17
1.3.4　嵌套列表18
1.4　图像20
1.5　超链接24
1.5.1　超链接的属性24
1.5.2　邮箱链接26
1.5.3　锚点链接27
1.6　表格28
1.7　任务实施32
任务2　用CSS美化你的网页36
2.1　CSS概念37
2.2　CSS的使用方法37
2.3　CSS声明与应用39
2.3.1　CSS格式39
2.3.2　CSS注释39
2.3.3　CSS单位39
2.3.4　CSS颜色39
2.3.5　选择器40
2.4　CSS常见属性48
2.4.1　CSS字体48
2.4.2　CSS文本56
2.4.3　CSS盒子模型66
2.4.4　CSS边框72
2.4.5　CSS链接81
2.4.6　CSS列表83
2.4.7　CSS背景92
2.4.8　CSS浮动112
2.4.9　CSS定位124
2.5　任务实施129
任务3　规整网页布局134
3.1　布局方式135
3.2　固定布局136
3.3　单列布局136
3.3.1　等宽单列布局136
3.3.2　非等宽单列布局139
3.4　两列布局141
3.4.1　浮动方式实现两列布局141
3.4.2　position实现两列布局142
3.5　三列布局143
3.5.1　圣杯布局143
3.5.2　双飞翼布局147
3.6　嵌套混合布局149
3.7　任务实施150
3.7.1　整体布局151
3.7.2　第二层布局153
3.7.3　第三层布局154
3.7.4　各模块内容设计155
任务4　通过表单与用户交互164
4.1　认识表单165
4.1.1　表单域166
4.1.2　表单元素168
4.1.3　HTML5新增表单类型与属性172
4.1.4　表单验证177
4.2　任务实施179
任务5　应用媒体标签制作个性化播放器189
5.1　HTML5音频标签190
5.2　HTML5视频标签192
5.3　HTML5音视频标签使用中的“坑”193
5.4　音视频标签的DOM操作194
5.5　任务实施198
任务6　制作活动抽奖大转盘206
6.1　CSS坐标系统与角度单位207
6.2　transform属性209
6.3　transition属性223
6.4　animation属性228
6.5　@keyframes属性230
6.6　任务实施233
任务7　纯CSS实现瀑布流布局240
7.1　多列布局实现瀑布流网页布局241
7.1.1　多列布局知识图谱241
7.1.2　多列布局前导知识241
7.1.3　任务实施245
7.2　弹性布局实现瀑布流布局249
7.2.1　弹性布局知识图谱249
7.2.2　弹性布局前导知识250
7.2.3　容器属性251
7.2.4　项目属性254
7.2.5　利用弹性布局设计微信底部导航栏257
7.2.6　任务实施264
7.3　网格布局实现瀑布流布局265
7.3.1　网格布局知识图谱265
7.3.2　网格布局前导知识266
7.3.3　任务实施277
任务8　响应式网页开发280
8.1　前导知识281
8.1.1　设备屏幕281
8.1.2　关于视口284
8.1.3　媒体查询技术287
8.1.4　响应式图片技术290
8.1.5　流式布局293
8.2　响应式框架制作旅游网页299
8.2.1　安装Bootstrap300
8.2.2　组件302
8.2.3　布局308