第3版前言

本书第1版和第2版汇聚了编者团队长期扎根一线的实践经验与深刻洞见。自2017年1月第1版出版以来，本书已被全国30余所高等院校选作网页设计与制作相关课程的教材，并受到广大读者的青睐，成为许多学习者自学网页设计的重要参考资料。前两版进行了多次重印，累计销量近2万册。9年来，编写团队始终没有停下前进的步伐，持续在教学实践中深耕细作、不断探索创新，力求为读者带来更优质的内容。

《HTML5十CSS3网页设计与制作案例教程（第3版，微课版）》改版的动力主要来自以下几个方面：

(1) 网页设计与制作技术的持续演进和发展，尤其是高效开发工具、AI辅助工具的广泛应用，以及主流浏览器对新版语言和技术的支持程度不断提升。

(2) 第1版和第2版在使用过程中获得的积极反馈和宝贵建议。

(3) 编者在教学实践中产生的新认识与新体会。

(4) 图书出版领域新技术、新形态的不断涌现。

(5) 案例内容的创新拓展，注重融入中国传统文化元素，增强文化底蕴与审美引导。

在延续前两版优点的基础上，第3版对全书章节结构进行了更加合理的安排，弥补了前两版中的疏漏与不足之处，力求内容更加科学严谨。具体修订包括以下方面：

(1) 根据当前的技术趋势对内容进行了更新、优化和调整。

(2) 增补新的开发工具和智能化辅助工具的介绍，使用新版浏览器展示网页示例。

(3) 在案例设计中尽可能融入中国传统文化题材，以润物细无声的方式弘扬优秀传统文化。

(4) 在原有配套资源(如案例代码、习题参考答案、教学课件等)的基础上，新增教学微课视频，为读者提供更好的学习体验。

(5) 删减了教学中使用率较低的第14、15章综合案例，将更多案例纳入线上资源并采取持续更新机制，为读者提供更丰富的学习资料。

(6) 对部分习题进行了调整与修订。

本书由姬莉霞、张晗任主编，李学相、王祥仲、陶紫琼、乔俊玲任副主编，参与编写的还有张雷、姬丽娟、李营升、李亚蕾、孙壮壮、龚政洁、闫慧泽、王威、李子彬等人。由于编者水平有限，书中难免存在不足之处，敬请广大读者批评指正，我们将及时在后续版本中进行修正。

本书配套教学大纲、电子教案、教学课件、习题参考答案，可扫描下列二维码获取；教学视频、例题源文件、素材文件，可扫描相应章节中的二维码学习。

编 ?者

2026年2月

第2版前言

本书第1版是编者们在一线教学过程中总结经验写就的。自2017年1月出版以来，已被30多所高等院校选作网页设计相关课程的教材，也被很多读者选为网页设计学习的自学工具书，受到了高校师生和广大读者朋友的喜爱，多次重印，累计销量近2万册。近3年来，编者团队教学与探索的脚步从未停歇。

本书改版的动力主要来自以下几个方面：

(1) 网页设计与制作技术的发展，特别是浏览器对新版本语言和技术的支持。

(2) 第1版在使用过程中得到的积极反馈和建议。

(3) 作者在教学实践过程中有了新的心得和体会。

(4) 图书出版领域新技术、新方式的出现。

(5) 对案例设计涉及内容的推陈出新，特别是对中国传统文化欣赏的融入。

第2版对全书章节结构进行了更加合理的调整，改写了原有疏漏和需要改进的地方，并继承和发扬了第1版的特色，力求更加科学严谨。主要改动体现在以下方面：

(1) 对章内知识点顺序和内容进行调整，使其更清晰明了。

(2) 顺应应用趋势，增加新的技术和方法，删掉一些过时或应用较少的内容。

(3) 使用新版浏览器浏览网页。

(4) 调整与修改部分习题。

(5) 将部分案例内容与中国传统文化相结合，以期潜移默化地弘扬中国传统文化知识。

(6) 对全书章节结构进行了调整，将原第12章“CSS美化表格与表单”内容整合入原第10章“CSS盒子模型”，使全书结构更合理。

(7) 将案例代码、习题答案、附录文件、课件等配套资源放在网上，通过扫描相应二维码等方式下载。

本书由姬莉霞、李学相主编，韩颖、刘成明担任副主编，此外，参与本书编写的还有崔战友、龚禾芳、程凤娟、赵玉娟、张雷、姬丽娟、李营升、张晓、赵润哲、赵耀、李子彬、谷梦丽、李亚蕾、郜华、孙壮壮等人。由于作者水平有限，书中难免存在不足之处，敬请广大读者批评指正，我们将及时进行调整。

本书教学大纲、教案、课件、习题参考答案可扫描下列相应二维码获取，书中各章案例代码源文件可通过扫描各章对应的二维码获取。

编 ?者

2019年12月

第1版前言

HTML5十CSS3凭借其标准布局和精美样式，实现了网页内容和样式的分离，使网页样式布局和美化达到了前所未有的高度，成为Web标准中不可替代的技术规范。本书以知识点示例、章节综合案例、全书综合案例和实验手册等形式，全面涵盖网页设计的基础知识、HTML5和CSS3技术、DIV十CSS网页布局技术等。

本书主要内容如下：第1章多方位讲解网页设计的基本知识和技能；第2～7章深入浅出地讲解HTML5的语法和标记；第8～13章以案例为载体，分模块讲述CSS3对网页元素的控制和美化；第14章通过大量案例讲述“内容”与“样式”分离的网页设计方式，主要介绍DIV十CSS布局方式；第15～16章以综合案例引领读者掌握页面及网站的设计和实现。

本书主要特色如下：

?采用最新规范技术HTML5十CSS3。

?案例充沛：知识点示例十章节综合案例十全书综合案例。对每个知识点都进行详细说明，并且使用示例支撑，避免空洞的说教；每章都有相应知识的综合案例，并给出两个全局综合案例，进一步阐述页面和网站的前端设计。

?代码详尽，配图丰富。每个案例都有详细的代码及分析，并附效果图，即使读者在不能实际操作的情况下也能很好地获取知识。

?配备课后习题、习题参考答案和实验手册。

?提供源代码和教学课件。

本书读者对象包括大中专院校计算机专业师生，以及网页设计爱好者和制作人员。引领读者快速学习和掌握HTML5十CSS3设计模式是本书的初衷，如果你是具有前瞻性的Web前端工作者和爱好者，那么你一定会从本书中受益，因为它就是专门为你打造的。

本书由一线教师姬莉霞、李学相、韩颖、刘成明编写。参与本书编写的还有张晗、姬丽娟、马建红、张雷、李营升、巩舣、谷梦丽、王海龙、熊笛等人。本书在写作过程中力求严谨，案例也经过精心设计，但由于水平有限，不足之处在所难免，敬请广大读者批评指正。

编 ?者

2017年1月

在延续前两版优点的基础上，《HTML5十CSS3网页设计与制作案例教程（第3版，微课版）》对全书章节结构进行了更加合理的安排，弥补了前两版中的疏漏与不足之处，力求内容更加科学严谨。(1)根据当前的技术趋势对内容进行了更新、优化和调整。(2)增补新的开发工具和智能化辅助工具的介绍，使用新版浏览器展示网页示例。(3)在案例设计中尽可能融入中国传统文化题材，以润物细无声的方式弘扬优秀传统文化。(4)在原有配套资源(如案例代码、习题参考答案、教学课件等)的基础上，新增教学微课视频，为读者提供更好的学习体验。(5)删减了教学中使用率较低的第14、15章综合案例，将更多案例纳入线上资源并采取持续更新机制，为读者提供更丰富的学习资料。(6)对部分习题进行了调整与修订。

Web标准是网页前端技术的核心规范与发展方向，HTML5和CSS3是Web标准的主要组成部分，共同体现了内容和样式分离的网页设计精髓。《HTML5十CSS3网页设计与制作案例教程（第3版，微课版）》共13章，通过知识点讲解、例题实训及章节综合案例等多种形式，系统介绍了网页设计的基础知识、HTML5与CSS3核心技术，以及网页布局等实用内容。讲解过程由浅入深、循序渐进，力求通过丰富的实例操作让读者快速掌握网页设计的方法与技巧。本书配套提供教学大纲、电子教案、教学课件、习题参考答案、教学视频、例题源文件及素材文件，便于读者学习和参考。本书既适合作为大中专院校及培训机构计算机相关专业的教材，也适合网页设计制作人员及广大爱好者学习和使用。

目录

第1章 ???网页设计基础知识 ?1

1.1 ?网页相关知识简介 ?2

1.1.1 ?互联网、因特网和万维网 ?2

1.1.2 ?网站和网页 ?2

1.1.3 ?网页与HTML ?3

1.1.4 ?静态网页和动态网页 ?3

1.1.5 ?URI和URL ?5

1.1.6 ?HTTP和HTTPS ?6

1.1.7 ?浏览器 ?6

1.2 ?网页的基本元素 ?6

1.2.1 ?网页的基本媒体元素 ?6

1.2.2 ?网页的基本布局元素 ?8

1.3 ?网页设计常用技术 ?10

1.3.1 ?网页标记语言HTML ?10

1.3.2 ?网页表现技术CSS ?11

1.3.3 ?网页脚本语言JavaScript ?11

1.4 ?网页设计常用工具 ?11

1.4.1 ?基于文本的编辑器 ?12

1.4.2 ?专业代码编辑器 ?12

1.4.3 ?集成开发环境 ?13

1.4.4 ?浏览器开发者工具 ?14

1.4.5 ?在线协作工具 ?14

1.4.6 ?AI辅助工具 ?14

1.5 ?习题 ?15

1.5.1 ?单选题 ?15

1.5.2 ?填空题 ?15

1.5.3 ?判断题 ?15

1.5.4 ?简答题 ?15

第2章 ???HTML5基础 ?16

2.1 ?认识HTML5 ?17

2.1.1 ?HTML及其发展 ?17

2.1.2 ?HTML5的特点 ?17

2.1.3 ?编写第一个HTML5文件 ?18

2.2 ?HTML基本语法 ?19

2.2.1 ?标记与元素 ?19

2.2.2 ?HTML属性 ?20

2.2.3 ?全局属性 ?21

2.3 ?HTML5文档的结构 ?22

2.3.1 ?HTML5文档的基本结构 ?22

2.3.2 ?网页标题