《物联网web应用技术》课件 项目一 任务二Web技术概述

《Web应用技术》物联网Web应用技术项目一物联网与web技术任务二Web技术概述任务引入自从1989年由

TimBerners-Lee(蒂姆·伯纳斯·李)

发明了

WorldWideWeb

以来，Web主要经历了3个阶段，分别是静态文档阶段（Web1.0）、动态网页阶段（Web1.5）和Web2.0阶段。随着区块链、人工智能和物联网在内的多项技术迅速发展，人们又提出了Web3.0的构想。任务描述:Web技术概述；网络程序开发的体系结构；前端开发的工作内容；web前端开发环境搭建。任务教学目标：了解web技术和发展历程；了解网络开发的体系结构和前端开发的工作内容；完成HBuilderX软件的下载安装；会创建HTML项目。任务概要教学内容Web技术概述Web的发展历程网络程序开发的体系结构前端开发一二三四Web技术在物联网行业中的应用Web前端开发环境搭建五六Web技术概述知识点一页面通常都是HTML格式的；网页可以展示文字、图片、媒体等内容；网页需要通过浏览器来阅读。Web在计算机网页开发设计中就是网页的意思。网页是网站中的一个页面。Web（一）什么是Web（二）Web应用程序的工作原理（二）Web应用程序的工作原理web应用程序工作过程：用户使用浏览器通过HTTP协议请求服务器上的Web页面；Web服务器接受到用户的请求；服务器处理后发送给客户端浏览器；客户端浏览器显示页面。Web的发展历程知识点二Web的发展历程自从1989年由

TimBerners-Lee(蒂姆·伯纳斯·李)

发明了

WorldWideWeb

以来，Web主要经历了3个阶段。Web1.0Web1.5Web2.0静态文档阶段受低版HTML语言和旧式浏览器的制约；Web页面只能包括单纯的文本内容；浏览器页只能显示呆板的文字信息。动态网页阶段在传统的静态网页中加入各种程序和逻辑控制，从而实现动态和个性化的交流与互动。Web2.0阶段以用户为中心，通过网络应用（WebApplications）促进网络上人与人间的信息交换和协同合作。网络程序开发的体系结构知识点三网络程序开发的体系结构Web网络程序开发的体系架构分为三种：C/S架构、B/S架构和混合架构。（一）C/S架构Client/Server：所有的显示和业务逻辑全部在客户端（胖客户端），服务端提供数据，典型的两层架构。（二）B/S架构Browse/Server：浏览器负责网页显示（瘦客户端），Web服务器负责业务逻辑，数据放在数据库服务器，典型的三层/多层架构。（三）混合架构使用Client（单独开发的客户端，而非通用的浏览器）替代B/S程序中的浏览器。如：使用Java桌面程序（JavaSE）或手机应用程序（AndroidApp）向Web服务器发送http请求。Web前端开发知识点四前端开发Web应用程序中，所有的程序逻辑都在Web服务器中，网页的交互功能极其有限，一般模式都是：点击链接，跳转到另一个网页。HTML中也可以增加程序逻辑，提升用户体验。如：浏览器中的插件（Flash）和HTML5的JavaScript。JavaScript在HTML中执行：可控制HTML中的所有的标记、内容；控制浏览器的动作；提交异步http请求（同步/异步）。（一）网站/Web项目开发工作流程（二）前端开发的工作内容前端开发工作向上与美工结合，向下与后端开发（JavaEE/PHP/ASP.NET等）结合，实现HTML网页布局/动画/交互逻辑，通过Ajax(异步HTTP请求)获取后端接口数据将数据以网页的方式呈现。Web技术在物联网行业中的应用知识点五Web技术在物联网行业中的应用应用程序的设计开发困难不同子系统之间平台异构不同传感器之间硬件、数据差别较大采集系统和数据库系统之间差别大物联网应用系统跨平台统一接口松耦合交互性好可扩展性强Web服务优势利用Web技术，搭建良好的系统架构，提高系统各方面的性能，解决物联网中的异构问题，最终构造满足业务需求的应用系统Web服务应用于物联网系统Web前端开发环境搭建知识点六快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilderX，H是HTML的首字母，Builder是开发者，X是HBuilder的新一代版本。我们也简称HX。HX是轻如编辑器、强如IDE的合体版本。HBuilderX（一）HBuilderX特点这里插入主标题高效极客操作更强大的多光标、智能双击；文字处理的效率大幅提升。专为vue打造提供更优秀的vue支持；大幅提升vue开发效率。轻巧、极速10M的绿色发行包；启动速度；文档打开速度、编码提示极速响应。markdown优先唯一新建文件默认是markdown的编辑器；可以直接粘贴表格、图片。清爽护眼界面清爽简洁，绿柔主题经过科学的脑疲劳测试；最适合人眼长期观看的主题界面。强大的语法提示语法提示精准、全面、细致；提供准确的代码提示和转到定义（Alt+鼠标左键）。（一）HBuilderX特点下载地址：https://www.dcloud.io/index.html。在浏览器搜索HBuilder，进入HBuilder官网下载最新版的HBuilder。HBuilder官网下载界面（二）HBuilderX下载与安装创建快捷方式解压安装包找到HBuilderX.exe，直接右击创建桌面快捷方式。选中HBuilderX的zip包，点击右键菜单，点击解压到当前文件夹。（特别注意：解压过程中，不要中断解压。）解压安装包创建桌面快捷方式（二）HBuilderX下载与安装依次点击“文件”、“新建”、“选择Web项目”（按下Ctrl+N,W可以触发快速新建）。（三）HBuilder项目创建第一步，新建Web项目依次点击“文件”、“新建”；选择“HTML文件”；选择“空白文件”；按下Ctrl+N,W可以触发快速新建；MacOS请使用Command+N，然后左键点击HTML文件。（三）HBuilder项目创建第二步，新建HTML页面在打开的new_file.html中输入H；然后按下“9”自动生成HTML的基本代码。（三）HBuilder项目创建第三步，添加HBuilder代码块HBuilder常用快捷键知识点四新建：ctrl+N关闭：ctrl+w全部关闭：ctrl+shift+w保存：ctrl+s全部保存：ctrl+shift+s刷新：F5属性：Alt+Enter编辑操作开启/关闭注释整行：Ctrl+/开启/关闭注释已选内容：Ctrl+Shift+/撤销：Ctrl+Z重做：Ctrl+Y文件操作（四）HBuilder常用快捷键运行：Ctrl+R搜索条（查找、替换）：Ctrl+F隐藏搜索条：Esc其他操作活动视图或编辑最大化：Ctrl+M放大字体：Ctrl+Shift+=减小字体：Ctrl+-其他操作（四）HBuilder常用快捷键

更多快捷键可参考：

/qq_36595013/article/details/80916629安装完成HBuilder之后如何创建快捷方式？如何创建项目和文件？思考问题本任务学习了Web技术概述。包括如下内容：