内容简介
《Web前端技术》以项目任务式体例模式编写而成。全书共6个项目，主要包括Web 基础知识、HTML5语言应用、CSS应用、盒子模型及应用、表单和多媒体应用、JavaScript应用。读者通过对《Web前端技术》的学习可以了解大数据与人工智能的应用如何改变生活。
《Web前端技术》结构清晰，语言简洁，既可作为应用型本科院校、职业院校相关专业的教材，也可作为网页设计和网站开发爱好者的入门学习用书。
精彩书摘
项目1 Web基础知识
项目导读
在当今数字化时代，Web技术已经成为信息传播和交流的重要平台。无论是社交、购物、教育还是娱乐，互联网都扮演着不可或缺的角色。而构建一个功能丰富、用户体验良好的网站，需要扎实的Web基础知识作为支撑。本项目主要介绍Web技术的基础知识。
学习目标
知识目标
掌握网页的概念、基本构成要素等相关知识。
熟练使用常用的开发工具。
了解网站的建设流程。
技能目标
掌握下载和安装开发工具软件的方法。
掌握站点创建的过程。
能够熟练进行创建和保存网页，运行网页等操作。
素质目标
在学习网页设计和网站开发的过程中，培养学生创新思维和解决问题的能力。
通过搭建开发环境，强化学生的动手能力和实际操作技能，使其能够在实际操作中深入理解理论知识，培养解决实际问题的能力。
思政目标
激发学生为国家信息化发展贡献智慧和力量的热情。
培养学生良好的网络道德和法律意识，为构建健康的网络空间贡献力量。
任务1 网页与网站基础
任务描述
网页和网站是两个相关但不同的概念，网站是网页的集合。也就是说，网站的设计者先把整个网站的结构规划好，再依据结构制作出不同的网页，并让网页间彼此相连，这种完整的结构就称为网站。
任务分析
在制作网页和网站之前，读者首先要认识网页，了解网页和网站之间的关系，了解网页的基本构成要素以及设计基础。
任务重点与实施
1.1.1 网页
要想知道网站的组成，得先认识网页。通过浏览器在互联网上看到的每一个画面都是网页。网页是互联网展示信息的一种形式，它是由超文本标记语言（hyper textmarkup language，HTML）或者其他语言编写的，通过浏览器编译后供用户获取信息的页面，又称为Web页，其中可包含文字、图像、表格、动画和超链接等各种网页元素。
进入网站看到的第一个网页称为该网站的首页（home page）。首页是网站的门面，它的功能通常是负责网站导航及介绍最新消息，当浏览者进入首页，就可以马上看到最新的消息，并快速找到感兴趣的主题，然后通过超链接跳转到其他的网页，观看更详细的内容。
什么是静态网页和动态网页？很多人可能会把包含动画元素的页面理解为动态网页，相反，如果页面中没有动画元素，就是静态网页。很显然，这样的理解是不正确的。
静态网页与动态网页是相对应的，静态网页的统一资源定位符（uniform resource lo－cator，URL）及文件后缀名都是以“.htm”“.html＂＂.shtml”“.xml”等常见形式出现的，而动态网页URL的后缀名则是以“.asp”“.jsp”“.php”“.perl”“.cgi”等形式出现的。
静态网页的内容是固定的，浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用户阅读。若网站维护者要更新网页的内容，就必须手动更新所有的HTML文档。因此，静态网页的致命弱点就是不易维护，为了不断更新网页内容，必须不断地重复修改HTML文档内容。随着网站内容和信息量的日益扩增，网页维护的工作量无疑是巨大的。
在HTML格式的网页上，也可以出现各种动态的效果，如图形交换格式（graphicsinterchange format，GIF）的动画、Animate动画、滚动字母等，但这些动态效果只是视觉上的。
静态网页具有以下特点。
（1）静态网页的内容相对稳定，因此容易被搜索引擎检索。
（2）静态网页没有数据库的支持，在网站制作和维护方面的工作量较大，因此当网站的信息量很大时，完全依靠静态网页的制作方式比较困难。
（3）静态网页的交互性较差，在功能方面有较大的限制。
动态网页是指服务器根据用户的不同请求，动态生成不同的页面内容，而不是像静态网页那样提前写好固定的HTML文档。动态网页一般与数据库有关，可以根据数据库中的数据动态生成页面内容。常见的动态网页技术有ASP、JSP、PHP等。相比静态网页，动态网页的优点是可以根据用户的不同需求提供不同的服务，同时也方便维护和更新。
动态网页具有以下特点。
（1）动态网页以数据库技术为基础，可以大大降低网站维护的工作量。
（2）采用动态技术的网页可以实现更多功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。
（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时，服务器才返回一个完整的网页。
……
目录
项目1 Web基础知识 1
任务1 网页与网站基础 2
任务2 搭建开发环境 8
项目2 HTML5语言应用 22
任务1 HTML5语言基础 23
任务2 图像及表格的应用 33
任务3 HTML5新增标签及属性 49
项目3 CSS应用 66
任务1 CSS基本知识 67
任务2 选择器 77
项目4 盒子模型及应用 93
任务1 盒子模型基本知识 94
任务2 网页布局 112
任务3 网页动态效果 126
项目5 表单和多媒体应用 146
任务1 表单 147
任务2 网页多媒体元素 166
项目6 JavaScript应用 178
任务1 JavaScript基础 179
任务2 jQuery基础 204
参考文献 233
试读
项目1 Web基础知识
项目导读
在当今数字化时代，Web技术已经成为信息传播和交流的重要平台。无论是社交、购物、教育还是娱乐，互联网都扮演着不可或缺的角色。而构建一个功能丰富、用户体验良好的网站，需要扎实的Web基础知识作为支撑。本项目主要介绍Web技术的基础知识。
学习目标
知识目标
掌握网页的概念、基本构成要素等相关知识。
熟练使用常用的开发工具。
了解网站的建设流程。
技能目标
掌握下载和安装开发工具软件的方法。
掌握站点创建的过程。
能够熟练进行创建和保存网页，运行网页等操作。
素质目标
在学习网页设计和网站开发的过程中，培养学生创新思维和解决问题的能力。
通过搭建开发环境，强化学生的动手能力和实际操作技能，使其能够在实际操作中深入理解理论知识，培养解决实际问题的能力。
思政目标
激发学生为国家信息化发展贡献智慧和力量的热情。
培养学生良好的网络道德和法律意识，为构建健康的网络空间贡献力量。
任务1 网页与网站基础
任务描述
网页和网站是两个相关但不同的概念，网站是网页的集合。也就是说，网站的设计者先把整个网站的结构规划好，再依据结构制作出不同的网页，并让网页间彼此相连，这种完整的结构就称为网站。
任务分析
在制作网页和网站之前，读者首先要认识网页，了解网页和网站之间的关系，了解网页的基本构成要素以及设计基础。
任务重点与实施
1.1.1 网页
要想知道网站的组成，得先认识网页。通过浏览器在互联网上看到的每一个画面都是网页。网页是互联网展示信息的一种形式，它是由超文本标记语言（hyper textmarkup language，HTML）或者其他语言编写的，通过浏览器编译后供用户获取信息的页面，又称为Web页，其中可包含文字、图像、表格、动画和超链接等各种网页元素。
进入网站看到的第一个网页称为该网站的首页（home page）。首页是网站的门面，它的功能通常是负责网站导航及介绍最新消息，当浏览者进入首页，就可以马上看到最新的消息，并快速找到感兴趣的主题，然后通过超链接跳转到其他的网页，观看更详细的内容。
什么是静态网页和动态网页？很多人可能会把包含动画元素的页面理解为动态网页，相反，如果页面中没有动画元素，就是静态网页。很显然，这样的理解是不正确的。
静态网页与动态网页是相对应的，静态网页的统一资源定位符（uniform resource lo－cator，URL）及文件后缀名都是以“.htm”“.html＂＂.shtml”“.xml”等常见形式出现的，而动态网页URL的后缀名则是以“.asp”“.jsp”“.php”“.perl”“.cgi”等形式出现的。
静态网页的内容是固定的，浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用户阅读。若网站维护者要更新网页的内容，就必须手动更新所有的HTML文档。因此，静态网页的致命弱点就是不易维护，为了不断更新网页内容，必须不断地重复修改HTML文档内容。随着网站内容和信息量的日益扩增，网页维护的工作量无疑是巨大的。
在HTML格式的网页上，也可以出现各种动态的效果，如图形交换格式（graphicsinterchange format，GIF）的动画、Animate动画、滚动字母等，但这些动态效果只是视觉上的。
静态网页具有以下特点。
（1）静态网页的内容相对稳定，因此容易被搜索引擎检索。
（2）静态网页没有数据库的支持，在网站制作和维护方面的工作量较大，因此当网站的信息量很大时，完全依靠静态网页的制作方式比较困难。
（3）静态网页的交互性较差，在功能方面有较大的限制。
动态网页是指服务器根据用户的不同请求，动态生成不同的页面内容，而不是像静态网页那样提前写好固定的HTML文档。动态网页一般与数据库有关，可以根据数据库中的数据动态生成页面内容。常见的动态网页技术有ASP、JSP、PHP等。相比静态网页，动态网页的优点是可以根据用户的不同需求提供不同的服务，同时也方便维护和更新。
动态网页具有以下特点。
（1）动态网页以数据库技术为基础，可以大大降低网站维护的工作量。
（2）采用动态技术的网页可以实现更多功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。
（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时，服务器才返回一个完整的网页。
……
前言/序言
党的二十大报告中指出，育人的根本在于立德，要全面贯彻党的教育方针，落实立德树人的根本任务，培养德、智、体、美、劳全面发展的社会主义建设者和接班人。报告中的内容为我国新时代的教育事业指明了清晰且坚定的方向，也为我们提供了思想指引和行动指南。
随着宽带的普及，上网变得越来越方便，以前只有专业公司才能提供的Web服务，现在许多普通的宽带用户也能做到。也许你会觉得网页制作很难，然而如果使用HTML5＋CSS＋JavaScript相关技术，即使制作一个功能强大的网站，也是一件非常容易的事情。
本书以由浅入深、循序渐进的方式展开讲解，以合理的结构和经典的范例对最基本和实用的功能进行了详细的介绍，具有极高的实用价值。通过对本书的学习，读者可以掌握网页设计和网站开发技术的基本知识和应用技巧。
（1）案例丰富，简单易懂：本书从帮助用户快速熟悉和提升网页设计与网站开发技术应用技巧的角度出发，尽量结合实际应用给出详尽的操作步骤与技巧提示，力求将最常见的方法与技巧全面细致地介绍给读者，使读者容易掌握。
（2）技能与思政教育紧密结合：在讲解网页设计和网站开发技术专业知识的同时，紧密结合思政教育主旋律，从专业知识角度触类旁通地引导学生相关思政品质的提升。
（3）项目式教学，实操性强：全书采用项目式教学，把网页设计和网站开发技术应用知识分解并融入一个个实践操作的训练项目中，增强了本书的实用性。
本书由郑周龙（高州市第一职业技术学校）、刘霄宇（鞍山职业技术学院）、张金波（辽阳职业技术学院）担任主编，由杨帆（集美工业学校）、骆任芳（广西交通技师学院）、李婷瑶（新乡职业技术学院）、王艳萍（郑州铁路职业技术学院）、廖季萍（赣州职业技术学院）、王晓光（平顶山工业职业技术学院）担任副主编。
由于编者水平有限，书中难免存在疏漏和不当之处，敬请各位专家及读者批评指正。
编者
