商品详情
前
言
在当今数字化时代，网页已成为信息传播的重要载体，它不仅关乎美
学与创意，更关乎如何高效、优雅地呈现内容，提升用户体验。HTML5
与CSS3 作为网页设计与开发的核心技术手段，不仅推动了网页内容的丰
富与表现力的提升，还极大地促进了网页的交互性和响应式设计的发展。
本书是一本以项目为导向、任务为驱动的理实一体化校企双元教材，
旨在通过一系列精心设计的任务，让读者在动手实践中逐步掌握HTML5
和CSS3 的核心技术与实用技巧。理论知识固然重要，但只有通过实际操作，
才能真正理解和运用这些技术。本书特别注重“学以致用”，让读者在完
成任务的过程中，不仅能够掌握技术细节，更能理解其背后的设计理念和
用户体验原则，不仅能学会“怎么做”，还能理解“为什么这么做”。
内容亮点
（1）项目导向、任务驱动。
本书根据HTML5 和CSS3 的技术特点，设置了11 个项目，每个项目
都以任务为核心，优选更贴近实际需求的典型工作案例，任务驱动式地呈
现知识的阶梯推进：夯实基础→内容为王→技能提升→创意创新。从简单
的页面制作到复杂的交互效果逐步深入，帮助读者循序渐进地提升技能，
旨在培养具备全面素质和高度竞争力的网页设计和前端开发人才。
（2）学以致用、与时俱进。
本书注重实践与应用。将理论知识与实际应用相结合，使学生在学习
过程中能够将理论知识灵活地转换为实践技能，加深对HTML5 和CSS3
技术的理解和掌握，以快速适应市场需求，与实际工作无缝接轨。本书
关注前沿技术与发展趋势，紧跟HTML5 和CSS3 的最新发展，详细介绍
HTML5 的新元素、新属性以及CSS3 的新特性，如弹性盒子布局、动画和
过渡效果等，确保读者掌握最前沿的网页前端技术。
（3）涵盖“1十X”证书内容。
本书在内容的设置上涵盖了Web 前端开发“1十X”证书考试的相关专
业知识。本书注重实践应用，这种实践导向的教学方式有助于培养学生的
实际操作能力和解决问题的能力，符合“1十X”证书制度中强调的职业技
能培养的目标。
适用对象
（1）高校相关专业师生：本书适合作为网页设计、前端开发等相关课
程的教材或参考书。
Htczw.indd 1
2025/10/23 16:36:03
II
HTML5十CSS3网页设计与制作任务教程
（2）网页设计初学者：本书适合对网页设计充满兴趣，希望从零开始系统学习HTML5
和CSS3 的初学者使用。
（3）前端开发人员：本书适合希望掌握HTML5 和CSS3 的进阶技巧，以提升网页性能
和用户体验的前端开发人员使用。
（4）自学者和爱好者：本书能够为对网页设计充满热情，希望通过自学来掌握HTML5
和CSS3 技术的自学者和爱好者提供一条清晰的学习路径。
本书由高欢、佟欢担任主编，郗君甫、陈晔桦、张小志担任副主编。本书项目1 由王冬
梅编写，项目2、项目3、项目6 由佟欢编写，项目4、项目8 由高欢编写，项目5 由王彤编
写，项目7 由宋亚青编写，项目9 由郗君甫、张小志和辛景波编写，项目10 由陈晔桦编写，
项目11 由丁莉编写。
由于本书的编者能力有限，尽管态度严谨，但书中仍然难免存在一些不足和缺陷，衷心
希望专业人士和广大读者能提出您的宝贵意见，以帮助我们进一步完善本书内容、提高本书
质量。
编者
2025 年4 月
HTML5十CSS3网站设计新形态教材，省级精品课配套教材
本书关注Web前端行业的前沿动态和技术发展趋势，及时吸纳了HTML5和CSS3的最新技术标准和设计理念，所涉及内容与实际职业需求保持同步。根据HTML5和CSS3的技术特点，本书共设置11个项目，涵盖了“1十X”证书、Web前端开发证书的相关专业知识，内容包括Web基础知识、HTML5常用标记以及新增的结构化元素、CSS3基础以及常用样式属性、CSS盒子模型、CSS3高级选择器、浮动与定位、网页常见布局及弹性布局、HTML5表单和表格、CSS3过渡、转换与动画效果、HTML5音频和视频、HTML5画布等。本书配套数字教学资源包括示例源码、PPT课件、教学案例、课后习题答案。本书适合高校相关专业师生、网页设计初学者、前端开发人员及自学者和爱好者使用。
高欢，河北工程职业技术大学副教授。主要讲授《计算机文化基础》《HTML5十CSS3网站设计》《JavaScript脚本语言》《Jquery网页特效设计》《Vue前端框架技术》等课程。副主编、参编国家规划教材5部，公开发表论文数篇，参与两个省级课题研究。在第二届全国高校微课教学比赛中获全国三等奖、省一等奖。指导学生参加2020年“挑战杯”河北省大学生课外学术科技作品竞赛一等奖、第六届‘互联网十’创新创业大赛获省赛银奖。参与建设国家级精品在线课《计算机文化基础》、省级精品在线课《HTML5网页设计技术》。
目 录
项目1 了解Web 基础知识..............................................................
1
任务1.1 创建简单的HTML5 页面........................................................
1
1.1.1 Web 相关概念........................................................................
1
1.1.2 HTML5 概述..........................................................................
4
1.1.3 CSS3 概述 ..............................................................................
5
1.1.4 HTML5 开发工具..................................................................
6
项目2 构建HTML5 网页结构 .....................................................12
任务2.1 制作图文混排页面 .................................................................12
2.1.1 HTML5 的文档结构............................................................12
2.1.2 HTML5 标记及属性............................................................14
2.1.3 HTML 文本段落标记..........................................................15
2.1.4 HTML 图片标记..................................................................20
2.1.5 HTML 列表标记..................................................................23
2.1.6 超链接标记 ..........................................................................27
项目3 应用CSS3 样式..................................................................34
任务3.1 使用CSS3 美化网页元素......................................................34
3.1.1 CSS 书写规则 ......................................................................34
3.1.2 CSS 样式的引入方式 ..........................................................35
3.1.3 CSS 基础选择器 ..................................................................37
3.1.4 CSS 常用的文本属性 ..........................................................42
3.1.5 CSS 列表样式属性 ..............................................................48
3.1.6 超链接伪类选择器 ..............................................................52
3.1.7 CSS 的三大特性 ..................................................................53
项目4 认识CSS 盒子模型............................................................60
任务4.1 理解盒子模型 .........................................................................60
4.1.1 盒子模型理论 ......................................................................60
4.1.2 盒子边框属性 ......................................................................62
4.1.3 内边距属性 ..........................................................................65
4.1.4 外边距属性 ..........................................................................66
Htczw.indd 3
2025/10/23 16:36:04
任务4.2 使用CSS3 新增盒子模型属性............................................................................. 71
4.2.1 box_sizing 属性 ................................................................................................... 71
4.2.2 圆角属性 ............................................................................................................. 73
4.2.3 图片边框 ............................................................................................................. 77
4.2.4 盒子阴影 ............................................................................................................. 78
任务4.3 设置盒子背景 ........................................................................................................ 83
4.3.1 常用背景属性 ..................................................................................................... 83
4.3.2 CSS3 新增背景属性 ........................................................................................... 89
任务4.4 设置渐变效果 ........................................................................................................ 98
4.4.1 线性渐变 ............................................................................................................. 98
4.4.2 径向渐变 ............................................................................................................. 99
4.4.3 重复线性渐变 ................................................................................................... 100
4.4.4 重复径向渐变 ................................................................................................... 101
项目5 使用CSS3 高级选择器............................................................................... 106
任务5.1 使用属性、关系选择器选择元素 ...................................................................... 106
5.1.1 属性选择器 ....................................................................................................... 106
5.1.2 关系选择器 ....................................................................................................... 108
任务5.2 使用结构化伪类选择器选择元素 ......................................................................112
5.2.1 :root 选择器........................................................................................................113
5.2.2 :not 选择器 .........................................................................................................113
5.2.3 :only_child 选择器..............................................................................................114
5.2.4 :empty 选择器 ....................................................................................................115
5.2.5 :target 选择器 .....................................................................................................115
5.2.6 :first_child
和:last_child 选择器.........................................................................116
5.2.7 :nth_child(n) 和:nth_last_child(n) 选择器..........................................................117
5.2.8 :nth_of_type(n) 和:nth_last_of_type(n) 选择器...................................................118
任务5.3 使用伪元素选择器选择元素.............................................................................. 123
5.3.1 ::before 选择器.................................................................................................. 123
5.3.2 ::after 选择器..................................................................................................... 124
5.3.3 ::first_letter
和::first_line
选择器 ...................................................................... 125
5.3.4 ::selection 选择器.............................................................................................. 126
项目6 设置浮动与定位........................................................................................... 131
任务6.1 转换元素的类型.................................................................................................. 131
6.1.1 元素的类型 ....................................................................................................... 131
6.1.2 元素类型的转换 ............................................................................................... 135
任务6.2 设置元素的浮动.................................................................................................. 139
6.2.1 元素的浮动 ....................................................................................................... 139
6.2.2 清除元素的浮动 ............................................................................................... 141
IV
Htczw.indd 4
2025/10/23 16:36:04
6.2.3 overflow
属性.................................................................................................... 145
任务6.3 设置元素的定位.................................................................................................. 150
6.3.1 定位的相关属性 ............................................................................................... 151
6.3.2 静态定位 ........................................................................................................... 151
6.3.3 相对定位 ........................................................................................................... 151
6.3.4 绝对定位 ........................................................................................................... 152
6.3.5 固定定位 ........................................................................................................... 154
6.3.6 黏性定位 ........................................................................................................... 157
6.3.7 z_index 属性 ...................................................................................................... 158
项目7 实现网页布局............................................................................................... 167
任务7.1 实现常见的页面布局.......................................................................................... 167
7.1.1 网页布局类型 ................................................................................................... 167
7.1.2 HTML5 新增结构元素..................................................................................... 173
7.1.3 HTML5 页面交互元素..................................................................................... 178
任务7.2 实现弹性布局 ...................................................................................................... 189
7.2.1 Flex 容器和项目 ............................................................................................... 189
7.2.2 Flex 容器的属性 ............................................................................................... 190
7.2.3 Flex 项目的属性 ............................................................................................... 197
项目8 制作表单和表格........................................................................................... 205
任务8.1 创建表单 .............................................................................................................. 205
8.1.1 表单标记 ........................................................................................................... 205
8.1.2 input 控件.......................................................................................................... 206
8.1.3 textarea 控件...................................................................................................... 214
8.1.4 select 控件 ......................................................................................................... 214
任务8.2 使用HTML5 新增input 类型及属性 ................................................................ 220
8.2.1 HTML5 新增的input 类型............................................................................... 220
8.2.2 HTML5 新增的input 属性............................................................................... 227
8.2.3 pattern 表单验证属性 ....................................................................................... 231
任务8.3 制作表格 .............................................................................................................. 235
8.3.1 表格的创建与美化 ........................................................................................... 235
8.3.2 合并单元格 ....................................................................................................... 237
8.3.3 表格的结构标记 ............................................................................................... 240
项目9 实现过渡、转换与动画效果....................................................................... 246
任务9.1 实现过渡效果 ...................................................................................................... 246
9.1.1 参与过渡的属性 ............................................................................................... 246
9.1.2 过渡持续的时间 ............................................................................................... 246
9.1.3 过渡的时间曲线 ............................................................................................... 249
V
Htczw.indd 5
2025/10/23 16:36:04
9.1.4 过渡的延迟时间 ............................................................................................... 249
9.1.5 过渡复合属性 ................................................................................................... 251
任务9.2 实现2D 转换效果 ............................................................................................... 254
9.2.1 transform 属性................................................................................................... 255
9.2.2 2D 平移 ............................................................................................................. 255
9.2.3 2D 缩放 ............................................................................................................. 256
9.2.4 2D 旋转 ............................................................................................................. 257
9.2.5 2D 倾斜 ............................................................................................................. 259
9.2.6 改变转换原点 ................................................................................................... 260
任务9.3 实现3D 转换效果 ............................................................................................... 265
9.3.1 3D 转换属性 ..................................................................................................... 265
9.3.2 3D 转换方法 ..................................................................................................... 268
任务9.4 实现复杂动画...................................................................................................... 275
9.4.1 @keyframes 规则.............................................................................................. 275
9.4.2 定义动画名称 ................................................................................................... 275
9.4.3 定义动画播放的时长 ....................................................................................... 276
9.4.4 定义动画的速度曲线 ....................................................................................... 276
9.4.5 定义动画延迟 ................................................................................................... 277
9.4.6 定义动画播放次数 ........................................................................................... 278
9.4.7 定义动画播放的方向 ....................................................................................... 278
9.4.8 定义动画播放的状态 ....................................................................................... 278
9.4.9 动画复合属性 ................................................................................................... 279
项目10 插入音频与视频......................................................................................... 285
任务10.1 实现在线视听 .................................................................................................... 285
10.1.1 音频和视频文件格式 ..................................................................................... 285
10.1.2 插入音频 ......................................................................................................... 287
10.1.3 插入视频 ......................................................................................................... 289
10.1.4 音频和视频的使用方法与事件 ..................................................................... 290
项目11 绘制HTML5 画布..................................................................................... 296
任务11.1 绘制机器人 ........................................................................................................ 296
11.1.1 创建及使用画布 ............................................................................................. 296
11.1.2 绘制直线 ......................................................................................................... 297
11.1.3 绘制三角形 ..................................................................................................... 299
11.1.4 绘制矩形 ......................................................................................................... 300
11.1.5 绘制圆形 ......................................................................................................... 301
11.1.6 绘制文字 ......................................................................................................... 302
参考文献...................................................................................................................... 307
- 新华一城书集 （微信公众号认证）
- 上海新华书店官方微信书店
- 扫描二维码，访问我们的微信店铺
- 随时随地的购物、客服咨询、查询订单和物流...
