本书为“十四五”高等职业教育计算机类专业新形态一体化系列教材之一，从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 与 CSS 3 ：从基础到高级样式设计  5
四、开发工具  7
五、使用的浏览器 . 7
六、HTML 标记和元素  8
任务一 创建网站项目及站点管理12
任务二 创建第 1 个 HTML 页面.13
知识拓展.14
项目评价.15

项目二 “广东红色文化”主题网站制作——HTML 5 基础 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
五、CSS 层叠性与继承性  51
六、CSS 基础选择器 . 53
七、CSS 设置列表样式 . 57
任务一 使用文本段落标记元素及 CSS 样式完成招聘页面的制作. 59
任务二 使用 CSS 基础选择器美化家乡旅游特色的页面. 60
任务三 使用 CSS 样式美化新闻列表页面 63
项目评价 65

项目四 “广东红色文化”主题网站制作——CSS 3 高级选择器 66
项目导读 66
学习目标 66
知识准备 67
一、属性选择器  67
二、伪类选择器及伪类元素  73
三、关系选择器  82
任务一 使用 CSS 的伪类选择器制作“广东省各市红色文化”
新闻景点页面 88
任务二 综合运用伪类选择器与伪元素制作“广东红色文化特色
展览”页面 89
项目评价 92

项目五 “广东红色文化”主题网站制作——CSS 盒子模型 93
项目导读 93
学习目标 93
知识准备 94
一、盒子模型与概念 . 94
二、盒子模型相关属性 . 98
三、设置背景颜色和背景图像的 CSS 属性  107
四、CSS 3 渐变属性 .110
任务一 使用 CSS 盒子模型布局“广州红色旅游文化”明信片114
任务二 使用 CSS 美化“广州红色旅游文化”明信片页面117
项目评价120
项目六 “广东红色文化”主题网站制作——DIV+CSS 网页布局. 121
项目导读 121
学习目标 . 121
知识准备122
一、经典布局与 CSS 布局  122
二、DIV+CSS 布局的应用  124
三、响应式布局  126
四、元素的浮动  127
五、元素的定位  130
六、元素的类型与转换  137
任务一 使用 DIV+CSS 进行页面浮动布局140
任务二 使用 CSS 进行页面美化143
任务三 使用定位元素制作二级导航146
项目评价147

项目七 “广东红色文化”主题网站制作——表格与表单. 148
项目导读148
学习目标148
知识准备149
一、表格应用 . 149
二、表单定义 . 155
三、HTML 5 新增表单元素和属性  160
任务一 使用表格元素制作一个招聘页面的信息表162
任务二 使用表单元素制作一个注册信息页面165
项目评价168

项目八 “广东红色文化”主题网站制作——CSS 3 动画效果 169
项目导读169
学习目标169
知识准备170
一、过渡效果 . 170
二、变形动画（transform）  171
三、动画（animation）  174
任务一 使用过渡动画制作一个文字下拉效果175
任务二 使用 3D 变形动画制作图片翻转效果177
项目评价178

项目九 电子商务网站的制作——Flexbox 和 Grid 布局. 179
项目导读179
学习目标179
知识准备180
一、弹性盒布局  180
二、网格布局 . 186
任务一 使用弹性盒子制作电子商务书城网站的布局191
任务二 使用网格制作电子商务主题书城网站的布局194
任务三 美化电子商务书城网站197
任务四 电子商务书城轮播图的制作200
项目评价204

项目十 广东优秀传统文化项目综合实训. 205
项目导读205
学习目标205
知识准备206
一、HTML 5 网站需求分析 . 206
二、网站建设流程与技术实现 . 207
任务一 HTML 5 网页布局构建.207
任务二 二级和三级页面制作217
项目评价222
参考文献 

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

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