本书是一本介绍Web前端应用开发技术的图书，主要内容包括HTML5开发基础、CSS开发基础、JavaScript开发基础、Web开发框架、Web App开发、物联网Web应用开发实例。本书采用任务式的学习方法，每个任务均给出了一个实际案例，每个实际案例均包含开发场景、任务目标、原理学习、开发实践、任务验证、任务小结、思考与拓展。本书通过实际案例将理论学习和开发实践结合起来，每个实际案例均附有完整的开发代码，读者可在开发代码的基础上进行快速的二次开发。

前 言 近年来，物联网、云计算和人工智能的迅猛发展，改变了社会的生产方式，大大提高了生产效率和社会生产力。在大数据、云计算和人工智能的推动下，物联网的体系结构得到了进一步的丰富，基于物联网的开发任务将逐渐得到拓展，使得前端开发在物联网开发中的作用越来越大。前端开发是创建Web页面或App等前端界面呈现给用户的过程，通过HTML、CSS、JavaScript及其衍生出来的各种技术、框架、解决方案，来实现用户界面交互。 本书采用任务式的学习方法，通过17个实际案例，由浅入深地介绍面向物联网的Web前端应用开发技术。本书共6章，具体内容如下： 第1章为HTML5开发基础，包括3个任务。任务1为风机设备信息页面的设计，主要介绍常见的HTML编辑器的使用方法，HTML文件的结构、元素、属性，HTML文件的设置、图片处理设置和颜色设置。任务2为楼宇照明管理页面的设计，主要介绍HTML链接的使用方法，帮助读者理解文件绝对路径与相对路径的使用区别，掌握HTML头部信息可包含的内容、HTML列表样式的编写，以及Frame框架的基本用法，通过项目实践掌握如何使用HTML框架实现系统功能的显示与切换。任务3为温湿度控制系统页面的设计，主要介绍HTML表格的使用方法、HTML区块的概念、基于div与table的布局、HTML表单的使用方法，以及表单的常用控件。 第2章为CSS开发基础，包括3个任务。任务4为光强调节页面样式的设计，主要介绍CSS层叠样式表的作用，CSS的基础语法，id选择器、class选择器、属性选择器等的语法与使用方法，CSS样式表文件的创建方法与引用方法。任务5为环境数据显示页面样式的设计，主要介绍CSS基本样式、CSS定位和CSS框模型。任务6为消防控制页面样式的设计，主要介绍响应式设计的原理、页面可视区域、网格视图、媒体查询、响应式图片等。 第3章为JavaScript开发基础，包括4个任务。任务7为水质调节系统的页面设计，主要介绍JavaScript文件引用、输出、语句、注释等基础语法。任务8为水位调节系统的页面设计，主要介绍JavaScript常量与变量、变量类型、条件语句、循环语句等的用法，以及JavaScript函数的定义、参数与调用。任务9为安防报警日志的页面设计，主要介绍JavaScript的内置对象、计时事件和存储方式。任务10为门禁远程控制的页面设计，主要介绍HTML的DOM的使用方法。 第4章为Web开发框架，包括3个任务。任务11为农业土壤调节页面的开发，主要介绍Bootstrap的CSS、布局组件及插件的使用方法。任务12为农业光强调节页面的开发，主要介绍jQuery的基础语法、jQuery选择器的使用方法、jQuery事件调用方法。任务13为仓库环境管理页面的开发，主要介绍Web图表库的原理与应用、HighCharts的加载方法和基本曲线图的绘制、FusionCharts的加载方法与3D柱状图的绘制。 第5章为Web App开发，包括2个任务。任务14为智能避障系统App的开发，主要介绍HTML5+开发框架、HBuilder开发工具的安装与使用、基于HTML5+的Web App项目创建、运行与调试、App打包。任务15为智能燃气控制App的开发，主要介绍WeX5的开发框架、WeX5的安装与使用、HTML5+ App的开发原理和开发过程，以及基于WeX5的项目创建、运行、调试和打包。 第6章为物联网Web应用开发实例，包括2个任务。任务16为物联网系统框架及Web开发接口，主要介绍物联网系统框架及Web开发接口。任务17为物联网Web应用开发，主要介绍物联网系统的分析方法，以及智云平台的Web开发接口的使用方法。 本书将Web前端应用开发技术和实际案例结合起来，读者可以边学习理论知识边进行开发，可以快速掌握Web前端应用开发技术。本书给出了实际案例的完整开发代码，读者可在开发代码的基础上快速地进行二次开发。这些实际案例既可以转化为各种比赛和创新创业的案例，也可以作为工程设计和科研项目开发的参考资料。 本书既可作为高等学校相关专业的教材或教学参考书，也可供相关领域的工程技术人员查阅。对于物联网开发和Web应用开发的爱好者来说，本书也是一本深入浅出、贴近实际应用的技术读物。 本书在编写过程中，借鉴和参考了国内外专家、学者和技术人员的相关研究成果，我们尽可能按学术规范予以说明，但难免会有疏漏之处，在此谨向有关作者表示深深的敬意和谢意。 本书的出版得到了广东省自然科学基金项目（2021A1515011701）和广东省普通高校重点领域科研项目（2020ZDZX3084）的资助。感谢中智讯（武汉）科技有限公司在本书编写的过程中提供的帮助，特别感谢电子工业出版社的编辑在本书出版过程中给予的大力支持。 本书涉及的知识面广，限于作者的水平和经验，疏漏之处在所难免，恳请广大读者和专家批评指正。 作 者 2022年9月

目　　录 第1章　HTML5开发基础 （1） 1.1　任务1：风机设备信息页面的设计 （1） 1.1.1　开发场景 （1） 1.1.2　任务目标 （2） 1.1.3　原理学习 （2） 1.1.4　开发实践 （13） 1.1.5　任务验证 （15） 1.1.6　任务小结 （15） 1.1.7　思考与拓展 （16） 1.2　任务2：楼宇照明管理页面的设计 （16） 1.2.1　开发场景 （16） 1.2.2　任务目标 （16） 1.2.3　原理学习 （17） 1.2.4　开发实践 （25） 1.2.5　任务验证 （28） 1.2.6　任务小结 （28） 1.2.7　思考与拓展 （29） 1.3　任务3：温湿度控制系统页面的设计 （29） 1.3.1　开发场景 （29） 1.3.2　任务目标 （29） 1.3.3　原理学习 （29） 1.3.4　开发实践 （39） 1.3.5　任务验证 （43） 1.3.6　任务小结 （44） 1.3.7　思考与拓展 （44） 第2章　CSS开发基础 （45） 2.1　任务4：光强调节页面样式的设计 （45） 2.1.1　开发场景 （45） 2.1.2　任务目标 （45） 2.1.3　原理学习 （46） 2.1.4　开发实践 （53） 2.1.5　任务验证 （56） 2.1.6　任务小结 （56） 2.1.7　思考与拓展 （56） 2.2　任务5：环境数据显示页面样式的设计 （56） 2.2.1　开发场景 （57） 2.2.2　任务目标 （57） 2.2.3　原理学习 （57） 2.2.4　开发实践 （75） 2.2.5　任务验证 （78） 2.2.6　任务小结 （78） 2.2.7　思考与拓展 （79） 2.3　任务6：消防控制页面样式的设计 （79） 2.3.1　开发场景 （79） 2.3.2　任务目标 （80） 2.3.3　原理学习 （80） 2.3.4　开发实践 （87） 2.3.5　任务验证 （90） 2.3.6　任务小结 （91） 2.3.7　思考与拓展 （91） 第3章　JavaScript开发基础 （93） 3.1　任务7：水质调节系统的页面设计 （93） 3.1.1　开发场景 （93） 3.1.2　任务目标 （94） 3.1.3　原理学习 （94） 3.1.4　开发实践 （100） 3.1.5　任务验证 （103） 3.1.6　任务小结 （103） 3.1.7　思考与拓展 （104） 3.2　任务8：水位调节系统的页面设计 （104） 3.2.1　开发场景 （104） 3.2.2　任务目标 （104） 3.2.3　原理学习 （104） 3.2.4　开发实践 （118） 3.2.5　任务验证 （120） 3.2.6　任务小结 （120） 3.2.7　思考与拓展 （120） 3.3　任务9：安防报警日志的页面设计 （121） 3.3.1　开发场景 （121） 3.3.2　任务目标 （121） 3.3.3　原理学习 （121） 3.3.4　开发实践 （131） 3.3.5　任务验证 （134） 3.3.6　任务小结 （134） 3.3.7　思考与拓展 （134） 3.4　任务10：门禁远程控制的页面设计 （135） 3.4.1　开发场景 （135） 3.4.2　任务目标 （135） 3.4.3　原理学习 （135） 3.4.4　开发实践 （142） 3.4.5　任务验证 （145） 3.4.6　任务小结 （146） 3.4.7　思考与拓展 （146） 第4章　Web开发框架 （147） 4.1　任务11：农业土壤调节页面的开发 （147） 4.1.1　开发场景 （147） 4.1.2　任务目标 （148） 4.1.3　原理学习 （148） 4.1.4　开发实践 （154） 4.1.5　任务验证 （158） 4.1.6　任务小结 （159） 4.1.7　思考与拓展 （159） 4.2　任务12：农业光强调节页面的开发 （159） 4.2.1　开发场景 （159） 4.2.2　任务目标 （159） 4.2.3　原理学习 （160） 4.2.4　开发实践 （168） 4.2.5　任务验证 （172） 4.2.6　任务小结 （172） 4.2.7　思考与拓展 （172） 4.3　任务13：仓库环境管理页面的开发 （172） 4.3.1　开发场景 （173） 4.3.2　任务目标 （173） 4.3.3　原理学习 （173） 4.3.4　开发实践 （181） 4.3.5　任务验证 （188） 4.3.6　任务小结 （189） 4.3.7　思考与拓展 （189） 第5章　Web App开发 （191） 5.1　任务14：智能避障系统App的开发 （191） 5.1.1　开发场景 （191） 5.1.2　任务目标 （192） 5.1.3　原理学习 （192） 5.1.4　开发实践 （199） 5.1.5　任务验证 （207） 5.1.6　任务小结 （207） 5.1.7　思考与拓展 （207） 5.2　任务15：智能燃气控制App的开发 （207） 5.2.1　开发场景 （207） 5.2.2　任务目标 （207） 5.2.3　原理学习 （208） 5.2.4　开发实践 （220） 5.2.5　任务验证 （233） 5.2.6　任务小结 （233） 5.2.7　思考与拓展 （234） 第6章　物联网Web应用开发实例 （235） 6.1　任务16：物联网系统框架及Web开发接口 （235） 6.1.1　开发场景：物联网系统框架 （235） 6.1.2　任务目标 （235） 6.1.3　原理学习：Web开发接口 （236） 6.1.4　开发实践：建立服务连接 （241） 6.1.5　任务验证 （250） 6.1.6　任务小结 （252） 6.1.7　思考与拓展 （252） 6.2　任务17：物联网Web应用开发 （252） 6.2.1　开发场景：仓库环境管理系统 （252） 6.2.2　任务目标 （252） 6.2.3　原理学习：仓库环境管理系统的分析和Web应用程序的设计 （253） 6.2.4　开发实践：仓库环境管理系统 （260） 6.2.5　任务验证 （275） 6.2.6　任务小结 （277） 6.2.7　思考与拓展 （277） 参考文献 （279）