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

Web 前端技术越来越成熟，HTML5 开发模式也越来越流行，大前端时代已经到来。尤其是 HTML5 提升了浏览器客户端的开发能力，使 Web 应用更加丰富。其实 Web 页面开发本身并不难，网上也有很多 HTML 和 CSS 技术手册。但是对于初学者来说，仅仅依靠手册自学是不够的，因为实际开发往往复杂得多，这就需要我们找到合适的思路和解决方法，积累编程能力和 Web 页面开发能力。 本书选取实际开发中常用的经典案例和前沿应用，按 Web 页面设计制作的知识技能结合由浅入深的学习过程进行设计。书中共有 8 个任务，以项目任务为导向串讲 Web 开发中的知识技能，主要包括 HTML 页面结构、各类标签及相关属性、CSS 定义和应用、CSS 选择器、CSS 常用属性、CSS3 新增样式等。首先通过 HTML 结构、各类标签语法等知识技术快速入门，呈现 Web 页面内容；其次通过 CSS 样式应用规整布局，实现页面排版布局与图文美化；之后通过表单交互网页、音视频媒体网页、动画特效网页、瀑布流布局网页设计开发巩固关键技术并逐步过渡到响应式网页的设计与开发。由技术到思维地为读者分析实现 Web 页面的技术和关键点，目的在于让初学者通过这些任务触类旁通，为深入学习 Web 知识打下坚实的基础。本书结构设计如下： 任务 1 是 HTML 基础，通过完成“散文学习”网页任务学习网页基本结构、标签及相关属性，从而设置网页内容，渲染用户视图。 任务 2 是 CSS 基础，结合时下流行的图文混排任务，分解多个小任务学习 CSS 样式定义及应用、CSS 常用选择器、CSS 常见属性、CSS3 新增样式，实现页面美化效果。 任务 3 是对前面两个任务中知识技能的强化，介绍经典的网页布局版式与设计技巧，并完成任务“学习吧”网页布局。 任务 4 通过任务“商品添加页面”的实现展开介绍 HTML5 表单标签、属性、选择器和验证方法，从而实现人机交互。 任务 5 应用音视频媒体标签仿制“网易云音乐”播放器，学习＜audio＞、＜video＞标签及相关 API 的属性、方法。 任务 6 综合应用 CSS3 新增的形变、过渡和动画样式属性实现任务“抽奖大奖盘”，为页面增强视觉特效。 任务 7 学习 CSS3 新增的 column 多列布局、Flex 弹性盒布局和 Grid 网格布局，实现纯 CSS 瀑布流网页。 任务 8 学习响应式 Web 设计原理和关键技术，带领读者自己编写响应式项目，能应用 Bootstrap 这个响应式开发框架快速搭建响应式网站。 本书每个任务由任务描述、知识图谱等组成，在知识图谱部分提出了学习目标，以指导读者重点学习和学后检验。同时每个任务后附有知识测验，供读者学后练习和上机实践，使入门者快速掌握开发技巧。 本书仅撰写 Web 功能界面设计开发知识技能部分，不做 JavaScript 行为交互功能介绍，个别任务需要读者具备 JavaScript 基础，对于无基础读者也可以跳过案例往后学习。 由于编者水平有限，书中难免存在不妥和疏漏之处，恳请读者批评指正。 编者

任务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　安装Bootstrap 300 8.2.2　组件 302 8.2.3　布局 308