前言
Foreword

HTML5与CSS3是目前静态网页制作的主要技术，也是Web前端开发技术的基础与核心之一。2019年教育部实施“学历证书+若干职业技能等级证书”制度试点（以下简称“1+X证书制度试点”）方案，Web前端开发职业技能等级证书为首批试点证书。在工业和信息化部教育与考试中心制定的Web前端开发职业技能等级标准中，Web前端开发职业技能分为初、中、高三个等级，其中初级证书持有者具有静态网页开发能力；中级证书持有者具有动态网页设计、开发、调试、维护等能力；高级证书持有者具有复杂网页设计开发能力和Web前端架构设计规划能力。掌握HTML与CSS技术是三个等级共同的基本能力标准与知识要求。

目前，市场上关于HTML5 与CSS3的教材种类繁多，其中有不少经典的、全面的教材；但一些教材是分块讲解HTML5与CSS3，不利于学生整体掌握、应用知识，一些教材则堆砌理论，案例较少。本书编者遵循高职高专学生的学习规律，结合课程思政，融合1+X认证标准等，在本书的编写中做了一些探索和改革。本书采用项目驱动的编写思路，对标Web前端开发职业技能等级标准中HTML编写网页、CSS美化页面的要求，通过对15个项目案例展开讲解，将知识点分块集成于每个项目中。每个项目均包含学习目标、任务描述、设计思路、实施步骤、储备知识点，内容涉及网页设计基础、HBuilder X工具的使用、HTML和CSS基础知识、HTML5新增标记、CSS3新增选择器、盒子模型和div布局等。本书能帮助读者掌握Web前端开发基本技术并快速上手实战，适用于Web前端开发技术的初学者如高职高专相关专业的学生，也可作为Web前端开发职业技能等级证书培训的参考书。本书主要有以下特色。

（1）融入思政教育

本书将红色教育与技能学习融为一体，通过学习、宣传、贯彻党的二十大精神、党史学习教育、新中国史教育、党的重要会议精神等Web页面制作的案例，将“红色教育、课程思政、立德树人”有机融合到教材中。

（2）课证融通

本书将“1+X证书制度试点”Web前端开发职业技能等级标准的初级能力标准与知识要求作为主要目标，共设置了15个案例，其中1个为可选拓展案例，适合不同学习能力的读者。

（3）资源丰富

本书对应的视频讲解内容已被制成微课资源，扫描书中二维码，即可打开对应案例的讲解视频；同时，还提供适用性强、起引领创新作用的多种类型的立体化、信息化课程资源，帮助读者快速学习和掌握相关技能。

（4）项目导向

本书按照“以学生为中心、项目任务为导向、促进学生自主学习”的思路进行开发设计，弱化“理论教学材料”的特征，强化“项目开发实践”功能，项目的实施大致按照“学习目标—任务描述—设计思路—实施步骤—储备知识点”的流程来讲解，基本遵循初学者的学习规律，将案例涉及的知识点后置，初学者在完成案例后再学习相关抽象理论，实现具象到抽象的转变，如此更利于初学者对知识融会贯通、举一反三。

（5）活页式教材

本书的内容组织形式为活页式，每个项目均可单独拆出作为相关实训的指导手册使用。书中的储备知识点、案例效果及代码参考了网络开源代码。从知识架构来看，本书主要包括以下四部分内容。

第一部分为HTML5的基础知识及应用，包括准备知识以及项目 1至项目 4。其中，准备知识介绍网页、W3C、Web的概念，网站设计原则以及网页设计规范、网页配色；项目1介绍开发工具的使用；项目 2通过制作“习近平总书记考察清华大学并发表重要讲话”新闻页面，讲解基本页面布局的知识；项目3通过制作“沁园春·雪”页面，讲解HTML5文档头部标签、文本标签、文本格式化标签及特殊字符标签的应用；项目4通过制作“党史学习教育专题网”页面，讲解列表标签、图像标签、超链接标签的应用。

第二部分为CSS的基础知识及应用，包括项目5至项目8。其中，项目5通过某学院“党建专栏”页面的制作，讲解CSS的基本知识；项目 6通过某学院新闻页面的制作，讲解关系选择器、属性选择器、伪类、伪元素选择的使用；项目 7 通过“宏伟蓝图满怀激情初心如磐砥砺奋进——信息工程学院师生热议党的二十大报告”新闻页面的制作，讲解盒子模型的使用；项目8通过“习近平：在庆祝中国共产党成立100周年大会上的讲话”学习页面的制作，讲解页面的浮动布局与定位布局。

第三部分为HTML5和CSS3开发基础与应用，包括项目9至项目14。其中，项目9通过制作“甘林信息多媒体中心”页面，讲解HTML5媒体标签的使用；项目10通过制作“美丽校园”网站首页，讲解HTML5新增的结构标签、分组标签、页面交互标签、语义标签的使用；项目11通过制作个人微博页面，讲解表格标签的使用；项目 12通过制作“信息工程学院岗位实习调查表”页面，讲解表单标签的使用；项目13通过制作某教务网络管理系统页面，讲解框架布局页面的方法；项目14通过制作“最美天水旅游”页面，讲解CSS3中的变形与动画应用。

第四部分为选修内容，即项目15，通过一个实例讲解canvas绘图流程及方法。

本书由汪雁、黄伟、安龙、张旭鹏合作编写，其中，汪雁负责项目10至项目14的编写，并负责全书的内容统筹、章节结构设计和统稿工作；黄伟负责项目2、项目3、项目4、项目9的编写；安龙负责项目5至项目8的编写；张旭鹏负责准备知识、项目1、项目15的编写。

由于编者水平有限，书中难免存在疏漏或错误，敬请读者批评指正。