本书从初学者的角度出发，以一个完整的旅游网站前端页面的开发项目为载体，按照项目开发流程和学生的认知规律，由浅入深、循序渐进地将HTML5和CSS3的理论知识和关键技术融入各个工作任务中。通过具体任务的实施及项目的完整实现，使学生能够快速掌握网站前端页面开发相关的理论知识和职业技能，从而独立设计开发各种类型的商业网站。本书包含12个项目，项目涉及的主要知识点和技能点包括：网站开发环境的选取和配置、DIV+CSS页面布局技术、HTML5标记与CSS3样式属性的使用、浮动与定位的设置、HTML5音视频技术、表单的应用、CSS3的动画制作、响应式页面开发、弹性盒布局技术等，并配有微课视频、课件、源代码、任务拓展、阅读拓展、习题等数字教学资源。
王婷婷，女，1983年3月出生，山东德州人，毕业于山东大学计算机学院。现任济南职业学院计算机学院软件技术专业副主任、web前端开发专业方向负责人、web前端开发“1+X”证书试点工作负责人。作为第一主讲人多次参加职业院校信息化教学大赛，获得国赛二等奖1项、三等奖1项，省赛一等奖2项、二等奖1项；指导学生参加职业院校技能大赛，获得全国一等奖1项，省赛二等奖2项、三等奖1项。在省级及以上刊物发表多篇论文，编写多本教材，申报了多项软件著作权；取得“计算机装调员”职业资格证书，获得双师型教师认定；参与多个企业项目研发，具有较好的行业影响力。
项目1 制作第一个网页 1
任务1.1 认识网页、浏览器与WWW 1
1.1.1 Web的发展历程和相关概念 2
1.1.2 常用浏览器 5
1.1.3 HTML5的发展历程和相关概念 5
任务1.2 创建第一个HTML5网页 6
1.2.1 建立网站的目录结构 7
1.2.2 常用的集成开发环境 7
1.2.3 HTML5网页的基本结构 8
1.2.4 代码注释 11
项目小结 14
课后习题 14
项目2 搭建网页基础布局 15
任务2.1 创建CSS3样式表 15
2.1.1 CSS概述 16
2.1.2 CSS样式规则及引入方式 18
2.1.3 CSS基础选择器 23
2.1.4 CSS的特征 28
任务2.2 使用盒模型对网页进行基础布局 36
2.2.1 盒模型基础 37
2.2.2 盒模型的相关属性 41
2.2.3 盒模型的内减模式 55
2.2.4 背景样式基础 58
项目小结 72
课后习题 72
项目3 制作公司简介模块 74
任务3.1 文字内容的制作 74
3.1.1 文本相关的标记 75
3.1.2 CSS字体及文本样式 80
任务3.2 图像内容的制作 92
3.2.1 图像标记 93
3.2.2 元素显示模式转换 96
项目小结 102
课后习题 102
项目4 制作旅行故事模块 104
任务4.1 元素的浮动 104
4.1.1 浮动属性 105
4.1.2 清除浮动的不良影响（盒子高度塌陷及其解决办法） 110
任务4.2 元素的定位 117
4.2.1 定位的作用及分类 118
4.2.2 绝对定位与相对定位 120
4.2.3 固定定位的特点及应用案例 122
4.2.4 元素的层叠等级 123
项目小结 130
课后习题 130
项目5 制作新闻中心模块 132
任务5.1 列表的制作 132
5.1.1 列表标记 133
5.1.2 列表样式 136
项目小结 145
课后习题 146
项目6 制作导航模块 147
任务6.1 超链接的制作 147
6.1.1 超链接标记 148
6.1.2 CSS链接伪类选择器 151
6.1.3 CSS属性选择器 152
任务6.2 列表嵌套 160
6.2.1 列表的嵌套 160
6.2.2 CSS关系选择器 161
6.2.3 CSS伪类选择器 164
项目小结 172
课后习题 172
项目7 制作宣传视频模块 174
任务7.1 播放音频和视频 174
7.1.1 HTML5的音频标记 175
7.1.2 HTML5的视频标记 178
项目小结 185
课后习题 185
项目8 制作热门推荐模块 187
任务8.1 表格的制作 187
8.1.1 表格的相关标记 188
8.1.2 表格的样式设置 193
8.1.3 合并单元格 196
项目小结 200
课后习题 200
项目9 制作会员登录页面 202
任务9.1 表单的制作 202
9.1.1 表单的作用及构成 203
9.1.2 input表单控件 206
项目小结 222
课后习题 222
项目10 制作新闻详情页面 223
任务10.1 HTML5新增标记与属性 223
10.1.1 新增文档结构化标记 224
10.1.2 新增语义信息标记 229
10.1.3 新增全局属性 230
任务10.2 CSS3高级应用 235
10.2.1 线性渐变 235
10.2.2 径向渐变 236
10.2.3 文字渐变 239
项目小结 241
课后习题 242
项目11 制作页面动画效果 243
任务11.1 过渡效果的实现 243
任务11.2 变形与动画效果的实现 252
11.2.1 CSS3的变形属性 253
11.2.2 CSS3的动画属性 262
项目小结 269
课后习题 270
?
项目12 制作响应式页面 271
任务12.1 页面布局的新技术 271
12.1.1 响应式网页设计 273
12.1.2 媒体查询 274
12.1.3 弹性盒布局 283
项目小结 300
课后习题 300
书单推荐
