Web前端开发与应用教程

本书由北部湾大学与北京华晟信息技术股份有限公司联合组织编写 ,主要面向 21世纪应用型本科学生及对物联网感兴趣的初学者。目前 ,市面上关于物联网 Web的书很多 ,但是真正贴合实际、面向工程应用的书却少之又少。本书本着深入浅出的原则 ,紧紧围绕 Web前端基础的一般原理和技术进行阐述 ,轻理论推导 ,重实际应用。本书立足于应用型本科的人才培养目标 ,同时贯彻 MIMPS教学法 (MasterInManagementPracticeandSimulations)、工程师自主教学的要求 ,将知识点模块化、分层 —交织 ,以任务驱动的方式安排章节 ,突出实用性和工程性 ,力求使抽象的理论具体化、形象化 ,减少学习的枯燥感 ,激发学习兴趣 ,有较强的理论性和实用性。
本书共 6章,主要特点如下。
(1)实践性强。改变纯理论教学的思路 ,编写了大量实战任务和工程案例 ,通过任务案例理解理论知识 ,边学边做 ,让学生掌握实际工作中所需要用到的各种技能。
(2)组织架构新。本书在第 1篇中介绍 Web技术的发展概述及技术原理,目的是让学生掌握一个大致的框架 ,然后在第 2、3、4篇穿插实战项目所需要具备的理论知识 ,整体上架构清晰 ,目标明确 ,培养效果好。
(3)内容实用性好。本书由一批具有丰富教学经验的教师和多年工程实践经验的企业培训师联合编写 ,内容贴合实际又易于学习 ,实用性好。
在本书的编写过程中 ,得到了北部湾大学与北京华晟信息技术股份有限公司领导的关心和支持 ,更得到了广大同事的无私帮助及家人的温馨支持,在此向他们表示诚挚的谢意与感激。
由于编者水平和学识有限 ,书中难免存在不妥和疏漏之处 ,还请广大读者批评、指正。
编者 
2023年8月

本书紧扣互联网行业发展对 Web前端开发工程师职业的新要求,详细介绍了 HTML、HTML5基础、?CSS、CSS3应用、JavaScript、jQuery等相关知识,并以智慧农业实践项目作为实操,提升读者的项目实践经验。本书内容由浅入深,循序渐进地引导读者快速入门,并能提高初级及以上读者的实际应用能力,使其快速适应 Web前端开发工程师职业的新需求。本书可作为计算机科学与技术及相关专业的教材,也可作为互联网行业相关岗位的工程技术人员的参考书,还可作为初学者的自学参考书。

农国才，中共党员，副教授，主要研究方向为计算机应用技术。从事高校教育教学工作27年，出版教材3本，完成省级科研项目3项。

第1篇 
Web前端开发技术综述篇

第1章 
Web前端开发技术综述 
?2?

1.1?Web综述 
?2?
1.1.1?Web的发展历程 
?2?
1.1.2?Web的技术标准和应用领域 
?4?
1.1.3?Web的开发工具 
?9?
1.2?Web前端工程师的职业需求 
?13?
1.2.1?Web前端开发的由来 
?13?
1.2.2?Web前端开发工程师的职业要求 
?13?
1.3思政案例 
1爱国人物 
———钱学森的艰难回国路 
?13
第2篇 
Web前端技术基础篇

第2章 
HTML标记语言 
?18?

2.1?HTML概述 
?18?
2.1.1?HTML发展现状 
?18?
2.1.2?HTML页面结构 
?19?
2.1.3?HTML页面编辑 
?20?
2.1.4?HTML注释 
?22?
2.2?HTML文本与图像 
?22?
2.2.1?HTML头部元素 
?22?
2.2.2?HTML文本 
?23?
2.2.3超链接 
?27?
2.2.4图片标记 
?29?
2.2.5框架标记 
?31?
2.2.6综合实例 
?32?
2.3?HTML表格 
?36?
2.3.1表格标签 
?36?
 
Web前端开发与应用教程

2.3.2行标签 
?38?
2.3.3单元格标签 
?39?
2.3.4表格实例 
?40?

2.4?HTML表单 
?42?
2.4.1表单标签 
?42?
2.4.2输入标签 
?44?
2.4.3表单实例 
?45?
2.5?HTML5新特性 
?47?
2.5.1?HTML5入门 
?47?
2.5.2?HTML5表单 
?50?
2.5.3?WebSocket?59?

2.6思政案例 
2爱国故事 
———2001年网络 
“大战 
”?62

第3章 
CSS层叠样式 
?64?

3.1?CSS基础 
?64?
3.1.1?CSS概述 
?64?
3.1.2?CSS样式表分类 
?65?
3.1.3?CSS选择器 
?66?
3.1.4?CSS样式特性 
?70?
3.2?CSS盒子模型 
?72?
3.2.1盒子模型的概念 
?72?
3.2.2边框 
?73?
3.2.3内边距 
?73?
3.2.4外边距 
?74?
3.2.5盒子的浮动与定位 
?74?
3.3?CSS常用属性 
?78?
3.3.1字体属性 
?78?
3.3.2文本属性 
?80?
3.3.3背景属性 
?81?
3.3.4鼠标属性 
?84?
3.3.5列表属性 
?85?
3.4?CSS页面布局 
?86?
3.4.1网页布局的类型 
?86?
3.4.2?DIV CSS网页布局 
?87?
3.4.3?CSS综合实例 
?89?
3.5?CSS3新特性 
?94?
3.5.1?CSS3新属性 
?94?
3.5.2?CSS3弹性盒子 
?97?

3.6思政案例 
3中国国家博物馆 
VR展馆 
———大唐风华 
?100?
Ⅳ 

 
目　录

第4章 
JavaScript脚本语言 
?101?

4.1?JavaScript基础 
?101?
4.1.1?JavaScript概述 
?101?
4.1.2?JavaScript基本语法 
?104?
4.1.3?JavaScript运算符 
?110?
4.1.4?JavaScript控制流程 
?111?
4.2?JavaScript事件和函数 
?115?
4.2.1?JavaScript事件 
?115?
4.2.2?JavaScript函数 
?116?
4.3?JavaScript内置对象 
?118?
4.3.1?Aray对象 
?118?
4.3.2?String对象 
?120?
4.3.3?Date对象 
?122?
4.3.4?Math对象?123?
4.3.5?Window对象 
?125?
4.3.6?Document对象 
?128?
4.4?JavaScript性能优化和安全防护 
?130?
4.4.1?JavaScript性能优化 
?130?
4.4.2?JavaScript安全防护 
?133?
4.4.3?JavaScript综合实例 
?135?
4.5思政案例4中国国家博物馆 
VR展馆———复兴之路 
?138
第3篇 
Web前端技术进阶篇

第5章 
jQuery应用?140?

5.1?jQuery基础 
?140?
5.1.1?jQuery简介 
?140?
5.1.2?jQuery选择器 
?141?
5.1.3?jQuery文档处理 
?143?
5.1.4?jQuery事件 
?145?
5.1.5?jQuery控制元素 
CSS样式 
?147?
5.1.6?jQuery遍历 
?149?
5.2?jQuery高级应用 
?151?
5.2.1?jQuery动画特效 
?151?
5.2.2?jQuery插件机制 
?153?
5.3思政案例5中国载人航天之路 
?156?
Ⅴ 

 
Web前端开发与应用教程

第4篇智慧农业系统项目篇

第6章智慧农业系统项目 
?160?

6.1前期设计 
?160?
6.1.1需求调研及现场工勘 
?160?
6.1.2总体方案框架设计 
?162?

6.2具体方案设计 
?164?
6.2.1传感器及执行器应用 
?164?
6.2.2边缘计算模块 
?168?
6.2.3组网方案设计 
?168?
6.2.4服务端方案设计 
?169?
6.2.5前端软件方案设计 
?171?

6.3?Web端软件实现 
?175?
6.3.1远程农业监控系统实现 
?175?
6.3.2农业物联网生产系统实现 
?183?
6.3.3云溯源查询监管应用系统实现 
?189?
6.3.4云信息追溯系统实现 
?194?
6.3.5系统管理实现 
?195
参考文献 
?200?

Ⅵ 

本书紧扣互联网行业发展对 Web前端开发工程师职业的新要求,详细介绍了 HTML、HTML5基础、?CSS、CSS3应用、JavaScript、jQuery等相关知识,并以智慧农业实践项目作为实操,提升读者的项目实践经验。本书内容由浅入深,循序渐进地引导读者快速入门,并能提高初级及以上读者的实际应用能力,使其快速适应 Web前端开发工程师职业的新需求。本书可作为计算机科学与技术及相关专业的教材,也可作为互联网行业相关岗位的工程技术人员的参考书,还可作为初学者的自学参考书。

农国才，中共党员，副教授，主要研究方向为计算机应用技术。从事高校教育教学工作27年，出版教材3本，完成省级科研项目3项。