本书为“十五五”职业教育计算机类专业新形态一体化系列教材之一，根据HTML5和CSS3标准详细讲解了网页的布局和制作方法。全书共分13个单元，内容包括：准备工作、HTML5常见元素、网页整体布局的搭建、网页主体内容的构建、网页页眉的构建、网页主导航的构建、网页横幅广告的构建、网页页脚的构建、混合布局的综合网页的构建，以及弹性布局和自定义动画。每个单元包含若干个任务，各任务之间有连贯性，强化和覆盖相关知识点。本书与Web前端开发工作岗位接轨，强调三方面的技能：一是针对只会编写局部模块的代码，缺乏对整体项目架构的统筹设计的问题，培养读者基于网页设计稿（或效果图）来规划网页，从网页整体入手，先搭建结构，再填充内容的技能；二是归纳和强化常用的网页布局方法，使读者熟练掌握方法，而不仅是知识点；三是帮助读者学会编写代码，而不是用Dreamweaver的可视化操作来生成代码。

HTML5 和 CSS3 是 HTML 和 CSS 的较新标准。HTML 和 CSS 是 Web 前端开发基础技术，分别用于实现网页的结构和表现，是学习后续前端脚本语言 JavaScript 和前端开发框架（Bootstrap、jQuery 等）的重要基础。
本书系 2022 年海南省高等学校科学研究项目“中小零售型企业数字化转型解决方案研究”（课题编号：HNKYZC 2022-20）的研究成果。编者将长期的高职教学实践所得精心提炼到了本书中，充分考虑了高职学生的学情，按照初学者的认知规律循循善诱，依循开发者的思维路径分步讲解，在精心编排的 50 多个网页制作任务中渗透了实际网站开发中常用的方法、经验，覆盖了从无到有地制作一个完整的网页所需的知识和技术。本书自第一版出版后得到了读者的好评，与本书配套的在线课程于2022 年 6 月入选海南省高校精品在线开放课程。本次修订增补了弹性布局和自定义动画相关章节，全面更新并增补微课视频，并在每个单元最后设置了“启智润心”模块，将技术知识与价值观引导、人文素养、社会责任感等内容自然结合，引导学生在思考网页设计逻辑的同时，通过实践体会技术与价值观的结合，形成正确的职业观和价值观。
全书共分 13 个单元，单元内的任务之间互补强化，单元之间衔接连贯。
单元 1 准备工作，介绍 HTML5 和 CSS3 是什么，如何搭建网页制作环境，如何使用网页编辑器的编辑和调试功能。
单元 2 HTML5 常见元素，介绍制作一个完整的网页一般需要哪些 HTML5 元素，如何使用这些元素。
单元 3 网页整体布局的搭建，介绍典型的网页布局有哪些，搭建网页结构用到哪些“盒子”，实现这些布局设置哪些样式。
单元 4 网页主体内容的构建 1——文本的制作，介绍典型的网页布局中主体内容区的文本内容的制作方法。
单元 5 网页主体内容的构建 2——图片的制作，介绍典型的网页布局中主体内容区的图片内容的制作方法。
单元 6 网页主体内容的构建 3——表格的制作，介绍典型的网页布局中主体内容区的表格内容的制作方法。
单元 7 网页主体内容的构建 4——表单的制作，介绍典型的网页布局中主体内容区的表单内容的制作方法。
单元 8 网页页眉的构建，介绍典型的网页布局中页眉的制作方法。
单元 9 网页主导航的构建，介绍典型的网页布局中主导航的制作方法。
单元 10 网页横幅广告的构建，介绍典型的网页布局中横幅广告的制作方法。
单元 11 网页页脚的构建，介绍典型的网页布局中页脚的制作方法。
单元 12 混合布局的综合网页的构建，介绍复杂网页的制作方法。
单元 13 弹性布局和自定义动画，介绍一种新的布局方式和自定义动画的实现方法。
本书主要特色：
（1）与 Web 前端开发工作岗位接轨，教会学生直接写 HTML5 和 CSS3 代码，而不是教可视化操作。
（2）教会学生基于网页设计稿（或效果图）制作完整的网页，而不是仅仅会设计制作网页一角。
（3）归纳和强化常用的网页布局方法，让学生熟练掌握方法，而不仅仅是知识点。
（4）每个实训任务都有详尽的步骤和逻辑，而不是直接粘贴成片的代码。
课时数及选用建议（详见教材，课时供参考）。
为方便教学，本书以微课视频细化知识点讲解，用二维码形式体现在书中，读者可扫码自主学习。此外，本书还配有课程标准、电子教案、PPT 课件、习题参考答案等数字资源，读者如有需要，可访问中国铁道出版社教育资源数字化平台 https://www.tdpress.com/51eds 免费下载使用。
同时，与本书配套的海南省高校精品在线开放课程“HTML5+CSS3 网页制作”已在智慧树网上线，读者可直接搜索该课程并自行学习。
本书由斯琴高娃、邓惠丹、梁炳进任主编，陈翠琴、张乐吟、张智、姚雅峰、刘泽锋任副主编。其中，单元 1、单元 3 由斯琴高娃编写，单元 2、单元 7 由邓惠丹编写，单元 4 由张乐吟、姚雅峰编写，单元 5 由陈翠琴编写，单元 6 由姚雅峰编写，单元 8 至单元 10 由张智编写，单元11 由刘泽锋编写，单元 12 由梁炳进编写；单元 13 由斯琴高娃、姚雅峰编写。全书由斯琴高娃设计整体方案并负责统稿。
由于时间仓促，编者水平有限，书中难免存在疏漏和不足之处，敬请广大读者批评指正，联系方式：378083015@qq.com。
编 者
2025 年 8 月

单元1准备工作.1任务1.1认识HTML5和CSS31任务1.2搭建软件环境2任务1.2.1安装HBuilderX3任务1.2.2安装SublimeText3.5任务1.3分析第一个网页6任务1.4了解网页编辑和调试技巧.9启智润心HTML5技术中的责任与担当.10单元小结11习题11单元2HTML5常见元素12任务2.1认识标题元素12任务2.2认识段落元素14任务2.3认识水平线元素、换行元素.15任务2.4认识图像元素16任务2.5认识超链接.17任务2.6认识无序列表18任务2.7认识有序列表19任务2.8认识自定义列表20任务2.9认识表格元素21任务2.10认识表单元素.23任务2.11认识音频、视频元素24任务2.12认识块级元素和行内元素26启智润心网页中的家乡美景28单元小结28习题28单元3网页整体布局的搭建29

斯琴高娃，硕士，副教授，先后在内蒙古民族大学、河南职业技术学院、海南职业技术学院从事计算机专业教学。主授课程HTML5+CSS3网页制作、JavaScript+jQuery前端开发；专业研究方向：Web开发。近5年来，主持省级科研项目2个；参与省级教学能力大赛荣获三等奖；指导学生参加省级技能大赛“低代码编程”赛项荣获二等奖。邓惠丹，讲师，现任教于海南职业技术学院。主授课程：HTML5+CSS3网页制作、Web前端技能包等；研究方向：大数据应用。近年来，主持中国高等教育学会职业教育分会项目1项；参加省级教学能力大赛荣获三等奖；指导学生参加“挑战杯”全国大学生课外学术科技作品竞赛荣获国赛三等奖、参加中国计算机设计大赛荣获海南赛区二等奖。梁炳进，副教授、高级工程师，现任广东食品药品职业学院软件学院院长，广州市科技专家，广州市政务信息化专家，中山大学访问学者，学校教学名师、思政名师。有8年上市公司从业经验，主持教改、科研课题15项。指导学生获得省级以上技能大赛奖项13项，多次荣获优秀指导老师称号。主持多个现代学徒制试点，发展了华为ICT产业学院。

本书重在培养学生运用Web新技术进行Web前端设计的能力，主要包括：
（1）能基于网页设计稿（或效果图）来规划网页，从网页整体入手，先搭建结构，再填充内容，解决只会写局部模块的代码不会写整体的问题；
（2）会归纳和强化常用的方法，熟练掌握方法，而不仅仅是知识点；
（3）能根据实际需要写代码，而不是用Dreamweaver的可视化操作来生成代码。