本书为“十四五”高等职业教育计算机类专业新形态一体化系列教材之一，从Web前端工程师的实际岗位应用的角度阐述了HTML5和CSS3的基础知识、新元素和响应式布局的新技能，设置了“广东红色文化”主题网站制作、电子商务网站、广东优秀传统文化项目综合实训等10个项目，将HTML5和CSS3的相关知识合理地安排到各个项目中。 全书采用项目贯穿、任务驱动、理论实践一体化的教学方法，每个项目设置项目导读→学习目标→知识准备→项目评价等教学环节，同时提供了丰富的配套教学资源，配有微课视频，读者扫描书中二维码即可观看学习。 本书层次清晰、内容丰富、技术实用，代码遵循Web标准，适合作为高等职业院校计算机应用技术、计算机网络技术、电子信息技术等相关专业的Web前端开发、网页设计与制作等课程的教材，也可作为广大Web前端开发者或社会人士学习Web前端开发技术的参考用书。

近年来，Web 前端技术呈现出迅猛的发展态势，其重要性在互联网领域日益凸显，已然成为构建卓越数字体验的核心驱动力之一。Web 前端技术指 HTML、CSS、JavaScript 以及这些技术衍生的各种技术、框架、解决方案，主要用于实现互联网产品的用户界面交互。在 Web 前端技术中，HTML 和 CSS 是最基础的知识，本书主要围绕 HTML 5 和 CSS 3 新技术的案例和实际应用项目进行编写。
本书以满足企业对 Web 前端工程师人才的岗位需求为核心设计原则，坚持“以就业为导向，以能力为本位”的教育指导思想，以提高与学习者现在或未来职业岗位需求相适应的前端技能为目标编写，从而实现对技术的准确定位，使课程设置与企业需求的高度契合。
全书采用项目贯穿、任务驱动、理论实践一体化的教学方法，以真实项目为载体，以任务驱动贯穿整本书的知识点与技能点，思政元素“无痕”融入项目的任务中，每个项目均设置了“价值引领”目标，旨在引导学生树立正确的世界观、人生观和价值观。全书共分 10 个项目，每个项目设置项目导读→学习目标→知识准备→项目评价等教学环节。其中，项目二至八“广东红色文化”主题网站作为一个整体贯穿项目 ；项目九为响应式布局的制作 ；项目十为综合实训项目——广东优秀传统文化网站的制作。
项目一主要介绍前端开发的基础知识，包括网页相关知识、HTML 5和 CSS 基础知识、代码编辑开发工具等。
项目二主要介绍 HTML 5 常用的标签和属性，包括文本控制标签、图像标签、列表标签、超链接标签、新增结构化标签等。
项目三、四主要介绍 CSS 3 的相关知识，包括 CSS 基础、CSS 相关属性、CSS 基础选择器和 CSS 3 高级选择器（如属性选择器、伪类选择器、伪元素等）。
项目五、六、七主要介绍静态页面制作的核心技术，包括盒子模型、DIV+CSS 网页布局、表格和表单等知识。
项目八主要介绍过渡、变动和动画等在网页中的使用技巧及常用的功能等知识。
项目九主要介绍 Flexbox 和 Grid 响应式布局开发的知识和内容。
项目十主要介绍综合实战项目，初学者可以模仿网站的设计与制作流程完成一个真实的综合实践项目，以便更好地掌握网站项目的开发流程和相关技巧。
全书还配有丰富的教学资源，团队精心制作了微课视频、电子课件、授课计划、课程标准、模拟题及答案、素材和源代码等丰富的教学资源，读者通过扫描书中的二维码即可观看微课，也可以访问中国铁道出版社教育资源数字化平台（https://www.tdpress.com/51eds）进行下载。使用本书的师生还可以扫描加入智慧职教平台的 MOOC 课程 https://mooc.icve.com.cn/cms/courseDetails/index.htm?classld=f99175bff5754b90956e1b54d95e7a51，方便进行线上线下混合式教学。
在编写本书过程中，编者参阅了大量关于红色文化资源、中华优秀传统文化及人民网等公众平台公布的信息等相关资料，在此表示感谢 !
尽管编者尽了最大的努力，但书中难免出现疏漏和不妥之处，衷心希望广大读者批评指正，编者将不胜感激（电子邮箱 ：lingcaijin@gdcmxy.edu.cn）。
编 者
2025 年 1 月

项目一Web前端开发准备工作.1项目导读1学习目标1知识准备2一、基础概念2二、Web标准的概念4三、CSS与CSS3：从基础到高级样式设计5四、开发工具7五、使用的浏览器.7六、HTML标记和元素8任务一创建网站项目及站点管理12任务二创建第1个HTML页面.13知识拓展.14项目评价.15项目二“广东红色文化”主题网站制作——HTML5基础16项目导读.16学习目标.16知识准备.17一、文本元素17二、列表元素21三、图片元素25四、超链接27任务一使用文本段落标记元素完成招聘页面的制作.31任务二使用列表元素制作网页中的新闻页面34任务三使用图片和超链接制作新闻页面.36项目评价38项目三“广东红色文化”主题网站制作——CSS语言基础39项目导读39学习目标39知识准备40一、CSS基本语法40二、CSS文字样式44三、CSS文本属性47四、CSS的优先级50

凌财进，硕士，副教授，现任广东财贸职业学院信息中心主任，研究方向：人工智能与区块链应用。主编/参编教材多部；多次指导学生参加国家级、省级竞赛，如全国大学生人工智能算法设计与应用大赛荣获一等奖、省级创业计划竞赛荣获三等奖等；多次被评为校级优秀教育工作者。曾婷，硕士，副教授，现任教于广东财贸职业学院，研究方向：人工智能、前端开发；主授课程：Web前端开发、网页设计；具有丰富教学经验和学科竞赛类指导经验。吴洲，工程硕士，副教授，现任教于广东财贸职业学院。主要研究方向为算法设计及应用软件。近年来主持省部级课题3项，参与省级项目11项、市级1项、校级2项；公开发表专业相关论文11篇，其中SCI、EI期刊2篇；出版教材及著作2本；指导学生参加省级专业技能大赛，获省级奖项2次。

（1）本书采用“项目化教学、任务驱动”的教学一体化方式，将项目以任务进行分解、设计到每个项目-任务中，使学习者能了解Web前端岗位实际工作任务中的知识点、技能点。
（2）注重实用性，归纳并强化前端开发中常用的方法，有效帮助读者提升网页开发实践技能。
（3）教材内容融入课程思政元素，旨在培养思想政治坚定、德技并修、全面发展的新时代网络技术人员。