前言

随着互联网的迅速发展，各大公司都在大量招聘网页前端设计人员，同时对前端设计师的技能要求也大大提高。如今的网页设计师需要了解整个Web标准体系才能制作出符合规范的页面。

HTML 5是W3C与WHATWG合作的结果，虽然它仍处于完善之中，但是，目前大部分浏览器已经支持HTML 5。HTML 5是Web开发的一次重大改变，可以说它代表着未来的发展趋势。

党的二十大报告指出“坚持教育优先发展、科技自立自强，人才引领驱动”，为我国科技创新和计算机技术应用的全面发展提出了新的要求和目标。本书紧扣国家战略和二十大精神，旨在帮助读者深入理解以HTML 5为核心的Web前端开发技术，并在实际操作中掌握其应用技巧，推进数字化、智能化、网络化、信息化的发展进程，为推动高质量教育发展做出新的贡献。

本书主要介绍前端网页开发的必备技术： HTML 5、CSS 3及JavaScript，还包括响应式布局、字体式图标和框架等网页设计主流技术。每个项目中，介绍知识点后会随之实现相关任务，使读者以任务驱动的方式来学习，通过任务实施的过程来巩固和吸收所学知识。

本书适合网页设计的初学者阅读，并提供图片、代码等相关素材。建议在阅读本书的同时，使用网页制作工具及浏览器同步操作，在完成实例后及时查看结果，使学习效率大大提高。

本书内容概述

全书共分为11个项目。

项目1认知网页设计： 介绍网页和网站的基本概念与网页制作的工具。

项目2构建HTML 5网页： 介绍HTML 5的基础知识，使读者掌握HTML 5置标语言的使用方法。

项目3实现网页布局： 介绍实现网页布局的多种方法，包括固定宽度的布局、流式布局和弹性布局等，使读者在掌握CSS基础、盒模型、浮动、框架等知识的基础上，学会设置常见布局。

项目4对链接应用样式： 介绍修改默认样式的方法，使读者能够创建按钮式链接。

项目5设置网页导航条和列表样式： 介绍列表在网页导航条、图片列表和新闻列表中的作用，以及利用列表和样式实现它们的方法。

项目6和用户交互——表单： 介绍各种表单的类型和用法，使读者能够为页面添加搜索栏、创建用户登录界面和制作购物车等。

项目7美化页面： 介绍美化页面的主要方法，以设置文本效果、创建圆角边框和字体式图标为实例，讲解美化页面的具体思路和步骤。

项目8添加动态效果： 主要介绍JavaScript基础知识，完成显示与取消搜索框默认关键词、图片轮播、图片放大镜、提示窗口和选项卡切换的动态效果。

项目9响应式布局： 主要讲解响应式布局的概念、页面优化的方法。

项目10用Bootstrap重构网页： 介绍Bootstrap的概念，使读者掌握利用Bootstrap重构页面的方法。

项目11综合练习： 以学校网站的制作及学校手机网页的制作为项目案例，将整本书的知识融会贯通。

本书特点

（1） 情境导入、任务驱动、项目导向，每一个项目完善网页的一部分。

（2） 每个任务由学习情境、任务描述、任务知识、任务实施等模块组成，理论和实践紧密结合。

（3） 多个实例环环相扣，迭代递增。

（4） 采用当前最主流的HTML 5、CSS 3和JavaScript，涉及响应式布局、字体式图标及框架技术。

（5） 书中舍去Photoshop图片处理、Flash动画制作等内容，从纯网页编辑的角度进行编写。

（6） 本书配套相关教学资源，提供图片、代码等相关素材供免费使用。

(7) 教学团队已建立课程微信公众号，并不断更新维护，欢迎大家关注与讨论。微信公众号可从清华大学出版社读者服务部索取。

本书约定

本书代码以灰色为背景，如下所示。

!doctype html

html

head

meta charset="utf-8"

title文档标题/title

/head

body

!--此处为页面正文部分--

/body

/html

由于编者水平有限，书中难免有不足之处，敬请广大读者批评、指正。

编者2023年2月