本书以构建Web开发核心能力为目标，系统讲解前端必备技术与实践方法。全书通过4个项目（包含10个任务，9个进阶训练）模拟真实的任务开发场景，任务遵循“任务目标→知识准备→任务实施→进阶训练→课后练习”的学习主线，分别介绍了网页基础知识、HTML5语法结构和基础标签、CSS基础样式及动画等高级样式、盒子模型、HTML5表单、多媒体标签的使用和JavaScript基础知识。每个实训案例都包含了对前面知识的复习和巩固，致力于营造真实的工作情境，引导学生掌握Web前端核心技术，并形成良好的职业素养。 本书适合作为高等职业院校“Web前端开发”课程的教材，也可作为“1+X”Web前端开发（中级）职业技能等级证书的考试参考书，还可供从事网页制作、网站开发、网页编程等工作的人员参考。

在当今数字化时代，Web 前端开发扮演着至关重要的角色。从精美的网页界面到流畅的用户交互，前端开发技术不断推动着互联网的发展与创新。本书全面贯彻党的二十大精神，以社会主义核心价值观为引领，传承与发扬中国优秀传统文化，将工匠精神、爱国精神、科技创新精神等思政元素融入开发案例，致力于引导学生形成正确的世界观、人生观、价值观。


在编写本书的过程中，我们秉持专业、系统、实用的原则，通过清晰的讲解和丰富的案例，逐步引导学生掌握 HTML、CSS和JavaScript等核心技术，了解如何构建结构良好的网页布局，运用样式美化页面，以及使用JavaScript实现动态交互效果。


本书采用“任务驱动、案例教学、过程指导、探究实践”的编写模式，通过4个项目（包含10个任务，9个进阶训练）模拟真实的任务开发场景，任务遵循“任务目标→知识准备→任务实施→进阶训练”的学习主线，使学生置身于真实的工作情境中。本书具有以下特点：


1．立德树人、思政先行


本书将工匠精神、爱国情怀、科技强国等思政元素融入任务中，通过制作奥运奖牌榜、科技助农网页，将理想信念教育、乡村振兴战略等有机融入教学。同时，通过制作航天新闻网页、航天知识竞赛网页，展现我国科技创新驱动发展成果，从而培养学生的爱国主义情怀，增强学生的社会责任意识和自主创新意识，培养学生乐于奉献的精神。


2．专创融合、创新实践


本书结合Web前端开发技能要求与双创教育需求，将网页的创新设计、功能的创新应用、审美的创新突破和网站的创新开发作为专创融合重点内容，有机融入各个任务中。


3．任务驱动、岗课融通


本书4个项目的主题分别为“知己”、“知彼”、“知天文”和“知地理”。其中，“知己”和“知彼”旨在通过制作个人简历和招聘网站了解当前的Web前端就业形势，清晰自我定位，明确岗位需求，实现岗课融通；“知天文”和“知地理”旨在通过制作相关网页了解我国航天科技的迅猛发展，厚植爱国情怀和科技强国的内驱力。





本书还配备了丰富的教学资源，微课视频可通过扫描二维码观看，教学大纲、教学课件、教案、源代码以及练习题和实践项目等，可登录中国铁道出版社教育资源数字化平台https://www.tdpress.com/51eds获取。


本书由济南工程职业技术学院的刘姗姗、马妍妍、林淑云、宗京秀担任主编，王谦、夏兆民、刘斌、韩琦担任副主编。其中刘姗姗编写项目一的任务一、任务二和项目二的任务三，马妍妍编写项目三和项目四的任务二，林淑云编写项目二的任务一和任务二，宗京秀编写项目一的任务三和项目四的任务一，王谦、刘斌、韩琦、夏兆民负责各任务进阶部分的实现。为落实产教融合、校企合作开发，特邀请济南博赛网络技术有限公司的工程师参与本书编写指导。


我们深知学习是一个不断探索和实践的过程。因此，在阅读本书的过程中，希望读者积极动手实践，勇于尝试新的技术和方法。无论读者未来的目标是成为一名专业的Web前端开发工程师，还是希望为自己的项目增添精彩的网页界面，通过学习本书都将获得宝贵的知识和技能。让我们一起踏上Web前端开发的精彩之旅，共同探索这个充满无限可能的领域。


虽然我们精心组织，认真编写，书中仍难免存在疏漏和不妥之处，恳请各界专家和广大师生不吝赐教、批评指正。


编 者


2025年5月

项目一知己——制作个人简历网站1任务一初识网页结构2【任务目标】2【知识准备】2一、网页基础知识介绍2二、HTML5概述3三、HTML5基础知识5【任务实施】9【课后练习】14任务二制作个人简历15【任务目标】15【知识准备】15一、文本控制标签15二、图像应用19三、超链接应用24四、序列标签28【任务实施】32【进阶训练】35【课后练习】35任务三美化个人简历36【任务目标】36【知识准备】37一、CSS概述37二、CSS样式规则37三、CSS样式的引入37四、CSS基础选择器40五、CSS基础属性47六、CSS高级特性49【任务实施】52【进阶训练】56【课后练习】66项目二知彼——制作招聘网站68任务一制作招聘网站导航栏69【任务目标】69【知识准备】69一、盒子模型的概念69二、边框属性70三、内边距属性74四、外边距属性76五、元素

刘姗姗，2005年7月毕业于山东大学数学学院计算机科学专业。同年入职济南工程职业技术学院现代教育技术中心，副教授。2008年读取山东大学工程硕士，并担任教学秘书。2010年担任计算机教研室主任，2019年成立移动互联技术专业，担任专业主任。主编及参与编写《网页设计》《信息技术》《计算机基础》等教材十余本，完成省级以上课题研究十余项，发表相关论文二十余篇。马妍妍，2013年7月毕业于青岛理工大学通信与信息系统专业。2013年至2017年在企业担任软件开发工程师，负责产品后台开发；2019年底至今入职济南工程职业技术学院信息工程系，加入移动互联应用技术教研室。2020年至2024年获得山东省职业院校教学能力大赛一等奖1项，三等奖1项；全国行业技能大赛-python方向三等奖，山东省“超星杯”优质课堂案例一等奖等多项奖项。主编和参与编写《计算机基础》《信息技术》等教材，完成省级以上课题研究七项，发表相关论文十余篇。林淑云，2010年6月毕业于山东师范大学计算机应用技术专业，2012年10月入职济南工程职业技术学院，承担相关教学工作，参与编写教材《信息技术》，参与相关课题研究10项，主持相关课题2项，发表相关论文5篇

1．立德树人、思政先行





2．专创融合、创新实践


3．任务驱动、岗课融通