本书用通俗易懂的语言详细介绍了HTML5网页设计和应用CSS3样式美化网页。涵盖了教育部

《Web前端开发职业技能等级标准》“1+X”证书和工信部“蓝桥杯”全国软件和信息技术专业人

才《Web应用开发》大赛的相关网页设计与制作知识点，以真实岗位生产项目、典型工作任务、案

例等为载体组织教学内容并进行教学设计，重点突出“教、学、做”一体化，注重培养学生的应用

能力和解决问题的实际工作能力，培养高素质高技能应用型人才。

全书共分为9章，内容包括：HTML5基本标签及开发工具介绍、CSS样式表基础、表格的应

用、表单的应用、应用CSS设置链接和导航菜单、应用CSS3样式美化网页、基于DIV+CSS的网页、

应用CSS3布局网页、应用DIV+CSS设计商业网站。

本书适合作为高等院校各专业《网页设计与制作》课程的教材，也可作为前端开发的培训教

材，还可作为Web开发爱好者的自学用书。

       全书共分为9章，内容包括：HTML5基本标签及开发工具介绍、CSS3样式基础、表格的应用、表单的应用、设置链接和导航菜单、应用CSS3样式美化网页、基于DIV+CSS的网页、应用CSS3布局网页、应用DIV+CSS设计商业网站。

      本书既可作为高等院校各专业《网页设计与制作》课程的教材，也可以作为前端开发的培训教材，还可作为WEB开发爱好者的自学用书。

目前正值高职教育大变革时期，高职教育的发展离不开优秀的教材，而电子信息大类

专业群课程的教材也需要进行改革以适应当前高职的教育发展形势。

为什么要学习本书

本书用通俗易懂的语言详细介绍了 HTML5 网页设计和应用 CSS3 样式美化网页。涵

盖了教育部“1+X”《Web 前端开发职业技能等级标准》证书和工信部“蓝桥杯”全国软

件和信息技术专业人才《Web 应用开发》大赛的相关网页设计与制作知识点，以真实的岗

位生产项目、典型工作任务、案例等为载体组织教学内容并进行教学设计，重点突出“教、

学、做”一体化，注重培养学生的应用能力和解决问题的实际工作能力，培养高素质高技

能应用型人才。

如何使用本书？

本书根据用人企业的岗位需求，通过企业真实案例开展教学，在教学中大量采取“案

例教学、任务驱动、项目引领”的教学方法，各个相对完整的教学任务突出了课程内容的

综合应用性、实用性，在“行动导向”的教学模式中形成技能与能力。

全书共分为 9 章，系统地讲解了 HTML5 网页设计和应用 CSS3 样式美化网页的相关

知识，主要内容如下：

第 1 章主要讲解 HTML5 基本标签及开发工具介绍。

第 2 章主要讲解 CSS3 样式基础。

第 3 章主要讲解网页中表格的应用。

第 4 章主要讲解网页中表单的应用。

第 5 章主要讲解如何设置链接和制作导航菜单。

第 6 章主要讲解如何应用 CSS3 样式美化网页中的元素。

第 7 章主要讲解基于 DIV+CSS 的网页的盒模型、浮动和定位。

第 8 章主要讲解如何应用 CSS3 合理布局网页。

第 9 章主要讲解应用 DIV+CSS 设计商业网站，渐进式完成项目开发全过程。

前？ 言

I

文前.indd 1 2022/8/2 14:35:10

本书在内容组织形式上强调学生的主体性学习，每章先提出学习目标，再进行任务分

析，使学生在开始实施每个项目前就知道学习的任务和要求，引起学生的注意与兴趣，然

后针对本项目相关理论知识进行介绍，最后给出技能目标、内容，让学生目标明确地去进

行学习、实践和自我评价。

本书由长期从事“HTML5&CSS3 网页设计与制作”课程教学的一线教师、IT 企业工

程师联合编写，内容满足国家信息化发展战略对人才培养的要求，深入浅出、图文并茂、

有趣好学。

本书由向文娟主编，李颖、管伟、柴芳老师和高军、杨欣等多位企业工程师参与编写。

在一年的编写过程中，编者付出了大量辛勤的劳动，同时也得到了许多高职院校、企业和

出版社领导的支持与帮助，在此一并标识衷心的感谢。

由于编者水平有限，书中难免存在疏漏与不妥之处，敬请各位读者批评指正，感谢您

使用本书，期待本书能成为您的良师益友。

编者

2022 年 4 月

第1章 HTML5基本标签及开发工具介绍1

1 1 HTML概述  2

1 1 1 HTML5发展历史2

1 1 2 HTML5新特性2

1 1 3 HTML5组织3

1 1 4 HTML5构成3

1 2 第一个入门网页 4

1 2 1 头部…5

1 2 2 标题…5

1 2 3 元标签5

1 2 4 入门网页6

1 3 开发工具简介7

1 3 1 使用记事本编辑器7

1 3 2 使用EditPlus编辑器 8

1 3 3 使用Sublime编辑器8

1 3 4 使用Dreamweaver编辑器 9

1 4 HBuilderX界面介绍 9

1 4 1 “文件”菜单 10

1 4 2 界面功能介绍   11

1 4 3 使用HBuilderX新建一个
网页                                        11

1 5 在页面中添加HTML                         13

1 5 1 标题标签13

1 5 2 段落标签14

1 5 3 换行标签15

1 5 4 预排版标签15

1 5 5 文本格式化标签                   16

1 5 6 列表                                       17

1 5 7 设置文本字体                       22

1 5 8 插入图片                               23

1 5 9 插入特殊符号                       24

1 5 10 插入横线                             25

1 6 HTML5新增标签                               26

1 6 1标签                        26

1 6 2 声音内容的标签     27

1 6 3 图形的标签           27

1 6 4 调用命令的标签                                       29

1 6 5 定义时间或日期的标签                                       29

1 6 6 定义视频的标签     30

本章小结                                                     30

课后自测                                                     31

上机实战                                                     34

拓展练习                                                     36

第2章 CSS样式表基础 37

2 1 初步认识CSS3                                   38

2 1 1 什么是CSS3                          38

2 1 2 CSS3发展简史                      38

2 1 3 CSS3基本语法                      39

2 2 CSS语法结构分析                             39

2 2 1 CSS3属性选择器                  39

2 2 2 元素选择器                           40

2 2 3 群组选择器                           40

2 2 4 包含选择器                           41

2 2 5 CLASS及ID选择器              42

2 2 6 子元素选择器                       45

2 2 7 相邻兄弟选择器                   45

2 2 8 伪类及伪对象                       46

目录

文前 indd 1 2022/8/2 14:35:11

II

2 2 9 通配选择器                           48

2 3 将CSS应用于网页                             49

2 3 1 行内样式表                           49

2 3 2 内部样式表                           50

2 3 3 外部样式表                           51

本章小结                                                     53

课后自测                                                     53

上机实战                                                     56

拓展练习                                                     58

第3章表格的应用60

3 1表格的应用                                        61

3 2表格的基础用法                                61

3 2 1行代码                                   61

3 2 2单元格                                   61

3 2 3列的合并                               63

3 2 4行的合并                               64

3 2 5表格大小                               65

3 2 6表格内文字位置                   66

3 2 7单元格、边框的背景

颜色                                       67

3 2 8单元格间距                           68

3 2 9表格表头                               69

3 2 10表格标题                             70

本章小结                                                     71

课后自测                                                     71

上机实战                                                     72

拓展练习                                                     75

第4章 表单的应用77

4 1 表单的属性                                        78

4 2 在表单中添加元素                            78

4 2 1 文本字段和密码域               79

4 2 2 单选按钮                               80

4 2 3 复选框                                   81

4 2 4 普通按钮                               81

4 2 5 提交按钮                               82

4 2 6 重置按钮                               83

4 2 7 隐藏域                                   84

4 2 8 文件域                                   85

4 2 9 菜单列表类表单元素           86

4 2 10 文本域                                 87

4 3 HTML5新增表单输入类型               88

4 3 1 email类型                              89

4 3 2 number类型                           90

4 3 3 range类型                              91

4 3 4 url类型                                  93

本章小结                                                     94

课后自测                                                     94

上机实战                                                     96

拓展练习                                                     99

第5章 应用CSS设置链接和导航菜单100

5 1 超链接伪类的应用                          101

5 1 1 超链接的4种样式               101

5 1 2 将链接转换为块级元素     103

5 1 3 锚点                                     107

5 1 4 用CSS制作按钮                   110

5 1 5 首字下沉                              117

5 2 应用CSS美化表单元素                   122

5 2 1 改变文本框和文本域

样式                                     122

5 2 2 用图片美化按钮                 133

5 2 3 改变下拉列表样式             134

5 2 4 用label标签提升用户体验                                     138

5 3 设置导航菜单                                  141

5 3 1 横向列表菜单                     141

5 3 2 用图片美化的横向导航     143

5 3 3 CSS Sprites技术                  145

5 3 4 二级菜单列表                     147

HTML5&CSS3 网页设计与制作

本章小结                                                   150

课后自测                                                   150

上机实战                                                   157

拓展练习                                                   162

第6章 应用CSS3样式美化

网页163

6 1 使用CSS美化网页                           164

6 1 1美化网页文字                     164

6 1 2美化网页图片                     167

6 1 3美化网页背景                     168

6 1 4美化网页边框                     169

6 1 5美化网页表格                     170

6 1 6美化网页表单                     171

6 1 7美化网页导航                     172

6 1 8美化网页菜单                     173

6 2 CSS美化网页案例——制作百度热搜                                             175

本章小结                                                   180

课后自测                                                   180

上机实战                                                   181

拓展练习                                                   185

第7章 基于DIV+CSS的网页186

7 1 理解表现和结构分离                      187

7 1 1 内容、结构和表现的

概念                                     187

7 1 2 DIV与CSS结合的优势       188

7 1 3 改善现有网站的方法         189

7 2 认识DIV                                           191

7 2 1 DIV的概念                          191

7 2 2 使用DIV                              191

7 2 3 理解DIV                              194

7 2 4 并列与嵌套DIV结构          200

7 2 5 使用适合的对象来布局网页 207

7 3 盒模型详解                                      208

7 3 1 盒模型的概念                     208

7 3 2 盒模型的细节                     209

7 3 3 盒模型的宽、高、边框、

内边距、外边距定义         212

7 3 4 上下margin叠加问题          222

7 3 5 左右margin加倍问题          225

7 4 使用CSS完善盒模型                       228

7 4 1 显示方式定义                     228

7 4 2 溢出处理                             230

7 4 3 轮廓样式定义                     232

7 5 认识浮动与定位                              240

7 5 1 文档流                                 241

7 5 2 浮动定位                             244

7 5 3 浮动的清理                         264

7 5 4 何时选用浮动定位             270

本章小结                                                   270

课后自测                                                   271

上机实战                                                   275

拓展练习                                                   282

第8章 应用CSS3布局网页 283

8 1应用CSS布局网页                           284

8 1 1一列固定宽度及高度         284

8 1 2一列自适应宽度                 285

8 1 3一列固定宽度居中             285

8 2应用CSS布局网站实例                   286

8 2 1使用色块进行布局页面     287

8 2 2完成布局及内容                 289

本章小结                                                   292

课后自测                                                   292

上机实战                                                   293

拓展练习                                                   296

第9章 网上书城网页设计
与制作 297

9 1站点建立                                          298

9 2结构分析                                          299

9 3框架搭建                                          300

9 4商业网站页面布局                          303

9 5头部及其导航                                  303

9 6网站主体                                          308

9 7底部及快捷操作                              315

9 8相对路径和相对于根目录路径      318

本章小结                                                   318

课后自测                                                   318

上机实战                                                   319

拓展练习                                                   323

参考文献324

向文娟，女，武汉外语外事职业学院副教授，学部主任，计算机专业。从教近20年，发表论文10余篇，任副主编撰写基于SQL Server的数据库设计的《HITE5.0网络营销技术工程师》系列教材共10本。

本书适合作为高等院校各专业《网页设计与制作》课程的教材，也可作为前端开发的培训教材，还可作为Web开发爱好者的自学用书。