本书为“十四五”普通高等院校新形态一体化系列教材之分册，面向Web前端网站的设计开发实际，应用“实例/项目-知识·应用”双线与双向的教学理念，实施实例/项目剖析教学法，深入剖析知识要点，以问题为导向，启迪解决问题的能力，形成新形态的一体化教材。本书注重理论与实践的紧密结合，通过丰富的实例、项目实践体验和综合项目实践，更好地帮助读者理解和掌握所学知识。通过学习本书，读者可以快速掌握Web前端网站设计开发的技术和方法，并达到一定的实际应用水平。 本书主要内容包括Web前端开发基础、单列图文网页设计、层叠样式表（CSS）、网页的布局设计、JavaScript语言基础、应用BOM与DOM编程、HTML5与CSS3高级应用以及三个教学型实践项目。 本书适合作为普通高等院校计算机类专业的教材，也可供Web前端开发爱好者自学使用。

Web 前端开发是计算机类专业的一门重要课程，主要涉及 HTML5、CSS3、JavaScript 与jQuery 几个基本的核心内容，具体包括 Web 前端开发基础、单列图文网页的设计、CSS、网页
的布局设计、JavaScript 编程、应用 DOM 和 BOM 编程、HTML5 进阶与应用 CSS3 渲染网页效果、jQuery 基础与应用等内容。要学好这门课程是需要较多课时数的，但在学校的实际教学中，课程往往只能分配到 32 ～ 48 学时，导致课程教学难以达到独立开发实用网站的预期目标。
针 对 课 程 的 教 学 难 点， 本 书 在 第 1 章以诗歌网页为典型案例构造出 HTML+CSS+JavaScript 的最小结构模型，并在后续章节中不断应用该模型，从而使学生易于理解和掌握HTML、CSS 和 JavaScript 的 Web 前端开发核心内容，减少学习难点内容所花费的时间，快速达到学习目标。
本书围绕 Web 前端开发课程的核心内容，从文本网页、图册网页、图文网页和表单网页四个基本的单列布局网页出发，设计了 11 个教学型项目实践体验环节，将项目与 HTML 标签
巧妙结合，呈现出新颖的教学内容组织结构。先采用项目驱动方法和项目剖析教学法开展实践教学，再归纳总结课程的知识内容，以进一步提高学生的学习认知能力与水平，快速提升学生
Web 前端开发设计的能力。
为进一步提高学生的综合开发与应用能力，按照项目描述、实践目标、需求分析、开发环境、开发指导、相关知识剖析等部分编写了三个教学型综合实践项目，涵盖了课程的主要内容。所
有的代码都集成为一个网站，方便学习与使用。
本书思政特色鲜明，注重选材，在内容、实例、项目中渗透课程思政教育的元素，弘扬优秀的社会、企业和校园文化，弘扬中华优秀传统文化，激发爱国情怀，实现润物无声、潜移默
化的教育效果。
本书是全国高等院校计算机基础教育研究会 2021 年度“基于 HTML5+CSS3+JavaScript+jQuery 的 Web 前端开发技术研究”项目（2021-AFCEC-440）的研究成果。在第一部分的七章
中，“从项目到应用、从知识到应用”体现的是双线教学，“从项目到知识、从知识到项目”体现的是双向教学，合起来就是双线双向的教学理念。在第三部分的三章中，通过综合项目，形
成了双线双向教学的第二个维度。
本书由汉口学院李林、杨蓓编著，参加编写的人员有张艳辉、王毅超等。
本书提供项目实践的视频教学内容，可扫码观看学习，另外本书还提供了所有项目的代码、课程大纲、教案、教学课件 PPT 等资源，如有需要，请到中国铁道出版社教育资料数字化平
台（https://www.tdpress.com/51eds）下载。
由于编著者水平和能力有限，书中难免有疏漏和不足之处，恳请各位同仁和广大读者批评指正。
编著者
2024 年 12 月

第一部分基础知识第1章Web前端开发基础11.1项目实践1：诗歌网页设计21.2网页与网站141.2.1网页141.2.2网站151.2.3静态网页与动态网页151.3HTML161.3.1HTML是什么161.3.2HTML的发展历程191.3.3HTML5标签及其属性191.4CSS211.4.1CSS是什么211.4.2CSS的发展历程221.5Web标准221.5.1结构标准231.5.2表现标准231.5.3行为标准231.6HTML5文档结构241.7开发工具25小结27习题27第2章单列图文网页设计.292.1项目实践2：文本网页设计292.2文本网页设计应用的标签322.2.1<p>标签322.2.2<h1>～<h6>标签352.2.3<hr>标签352.2.4<br>标签35

李林，男，教授。从事计算机专业教学20年，主编、参编教材12本。在高等院校课程教学质量与评价研究方向有特长。杨蓓，女，硕士，中级。从事计算机相关专业教学6年，主编、参编教材2本。在信息安全技术应用方面有特长。

为提高学生的综合开发与应用能力，按照项目描述、实践目标、需求分析、开发环境、开发指导、相关知识剖析等部分编写了三个教学型综合实践项目，涵盖了课程的主要内容。所
有的代码都集成为一个网站，方便学习与使用。