《物联网web应用技术》全套课件 田美艳项目1-5 物联网与web技术 -Web开发框架

《web应用技术》课程核心知识：HTML基础、CSS网页布局、JavaScript事件处理、使用JavaScript设计脚本化CSS、BootstrapWeb开发框架等知识。课程介绍：以能力为本位、以职业实践为主线、以项目课程为主体。培养技能目标：HTML页面设计、CSS样式布局、JavaScript代码编程、HTMLDOM、Web开发框架使用、Web图表设计各环节的技能要素。课程简介课时分配基础篇

Web网页的内容和布局解析物联网Web应用技术1989年3月，蒂姆·伯纳斯·李（TimBernersLee）编写了第一份万维网项目开发计划。网络从一个不起眼的开始，在短短三十年内彻底改变了世界。篇章引入章节任务2022年3月1日黄冈教育谷《Web应用技术》物联网Web应用技术项目一物联网与web技术任务一

物联网概述任务引入世界各国和地区对物联网给予高度关注，中国政府也积极谋划布局物联网发展，2009年8月，总理温家宝在无锡考察时做出关于“建立感知中国中心”的重要指示精神。2011年11月《物联网“十二五”发展规划》，2013年2月《关于推进物联网有序健康发展的指导意见》，明确了物联网发展的方向和重点，提出了发展目标、主要任务和保障措施。任务描述:物联网的概念；物联网体系架构；行业应用。任务教学目标：了解物联网的概念；掌握物联网体系架构；了解物联网行业应用。任务概要教学内容物联网概念物联网体系架构常见物联网行业应用政府支持措施一二三四物联网概念知识点一物联网是指通过信息传感设备，按约定的协议，将任何物体与网络相连接，物体通过信息传播媒介进行信息交换和通信，以实现智能化识别、定位、跟踪、监管等功能。物联网物联网概念2009中国移动2009年8月24日，中国移动总裁王建宙在台湾公开演讲中，也提到了物联网这个概念。物联网概念中国工业运行2009年夏季报告会工信部总工程师朱宏任在中国工业运行2009年夏季报告会上表示，物联网是个新概念，是指各类传感器和现有的“互联网”相互衔接的一种新技术《ITU互联网报告2005:物联网》2005年11月27日，在突尼斯举行的信息社会峰会上，国际电信联盟(ITU)发布了《ITU互联网报告2005:物联网》，正式提出了物联网的概念1999年中国启动传感网研究我国的技术研发水平处于世界前列，具有重大影响力物联网的体系架构知识点二（一）三层架构应用层是物联网和用户的接口，它与行业需求结合，实现物联网的智能应用。Web应用技术是应用层的一项技术。网络层由各种网络，包括互联网、广电网、网络管理系统和云计算平台等组成，是整个物联网的中枢，负责传递和处理感知层获取的信息。感知层由各种传感器构成，包括温湿度传感器、二维码标签、RFID标签和读写器、摄像头、红外线、GPS等感知终端。感知层是物联网识别物体、采集信息的来源。感知层网络层应用层（二）四层架构常见物联网应用知识点三常见物联网应用政府支持措施知识点四政府支持措施推动典型示范，带动发展制订发展规划全面布局突破关键核心技术利用物联网校企联盟“三角平台”发挥优势政府启动专项资金加强国际国内标准，保障发展政府支持措施Web应用技术物联网体系架构中的那个层次？思考问题本任务学习了物联网的概述。包括如下内容：1.物联网的概念；2.物联网体系架构；3.行业应用。任务小结1.查阅资料至少3个列举身边的物联网应用案例。作业谢谢！THANKS!黄冈教育谷2022年3月1日《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技术概述。包括如下内容：1.Web的概念和发展2.Web开发体系架构；3.Web在物联网行业中的应用；4.Web前端开发环境的搭建。任务小结1.使用HBuilder软件创建HTML项目，运行后页面显示”我是20级电子信息x班，张xx。”。作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目二HTML页面任务一认识HTMLWeb技术概念和发展Web开发体系架构回顾HBuilder的下载安装使用HBuilder新建HTML项目任务引入Web页面也就是通常所说的网页。Web站点如何创建呢？HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。HTML可以创建Web站点。任务描述:了解HTML的发展。了解HTML的网页结构。任务教学目标：会创建HTML文件；完成第一个web页面编写。任务概要教学内容HTML介绍HTML标签HTML结构HTML页面编写一二三四HTML发展知识点一“超文本”是指页面内可以包含图片、链接、音乐、程序等非文字元素。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建网页的标准标记语言，标准通用标记语言下的一个应用。可以使用HTML来建立WEB站点，HTML运行在浏览器上，由浏览器来解析。HTML（一）HTML定义HTML1993.6HTML1.0作为互联网工程工作小组（IETF）工作草案发布1995.11HTML2.01997.12HTML4.0W3C推荐标准1997.1HTML3.2W3C推荐标准（二）HTML发展2014.10HTML5

由万维网联盟宣布，该标准规范终于制定完成1999.12HTML4.01在4.0的基础上做了微小改进，W3C推荐标准<!DOCTYPE>声明有助于浏览器中正确显示网页。正确声明HTML的版本，浏览器就能正确显示网页内容。doctype声明是不区分大小写的，以下方式均可：通用声明HTML5

<!DOCTYPEhtml>HTML4.01<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">XHTML1.0<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE>声明（三）HTML版本声明<!DOCTYPEhtml><!DOCTYPEHTML><!doctypehtml><!DoctypeHtml>HTML标签知识点二HTML标签是由尖括号包围的关键词，比如<html>；HTML标签通常是成对出现的，比如<b>和</b>；标签对中的第一个标签是开始标签，第二个标签带斜杠表示该标记说明结束，是结束标签；开始和结束标签也被称为开放标签和闭合标签。标记语言是一套标记标签（markuptag），HTML使用标记标签来描述网页，HTML标记标签通常被称为HTML标签（HTMLtag）。HTML标签（一）HTML标签定义（二）HTML标签列表HTML结构知识点三（一）HTML结构一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。HTML的结构包括：“头”部分（Head）“头”部提供关于网页的信息“主体”部分（Body）“主体”部分提供网页的具体内容，（一）HTML结构<html>说明该文件是用HTML来描述的。<html>是文件的开头，而</html>则表示该文件的结尾。它们是HTML文件的始标记和尾标记。（一）HTML结构1.标签<html><head>、</head>分别表示头部信息的开始和结尾。包含页面的标题、序言、说明等内容，它不作为内容来显示，但影响网页显示的效果。头部标题标签用于定义网页的标题，显示在网页窗口的标题栏中，可被浏览器用作书签和收藏清单。（一）HTML结构2.头部标签<head>网页中显示的实际内容均包含在<body>、</body>这2个正文标签之间。正文标签又称为实体标签。只有<body>区域（白色部分）才会在浏览器中显示。（一）HTML结构3.正文标签<body>HTML页面编写知识点四<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>菜鸟教程()</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body></html>（一）程序实例1.代码及运行效果（一）程序实例2.代码分析<!DOCTYPEhtml>声明为HTML5文档<html>元素是HTML页面的根元素<head>元素包含了文档的元（meta）数据，如<metacharset="utf-8">定义网页编码格式为utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落注：在浏览器的页面上使用键盘上的F12按键开启调试模式，就可以看到组成标签。如何声明HTML版本号？HTML文件有哪些部分组成？思考问题本任务学习了HTML基本知识。包括如下内容：1.HTML介绍：定义、发展历程、版本声明；2.HTML标签；3.HTML结构：html、head、body。任务小结1.使用HBuilder软件创建HTML页面.

页面标题:xxx自我介绍

页面内容：

第一行(大标题)：xxx自我介绍

第二行之下：我是20级电子信息x班，张xx。。。。。。作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目二HTML页面任务二家庭设备信息界面HTML版本HTML标签、结构回顾3.图片的大小如何设置?1.HTML页面背景颜色如何设置？2.页面分割线如何设置?4.标题、文字如何设置?任务引入任务描述:HTML的标题和段落；HTML的图像显示；HTML的颜色配置。任务教学目标：掌握HTML的文本标签；掌握HTML的图像显示；掌握HTML的颜色配置；家庭设备信息界面的设计与程序编写。任务概要教学内容HTML标题HTML段落HTML图像显示HTML颜色配置一二三四家庭设备信息界面设计五HTML标题知识点一<h1>用作主标题（最重要的），其后是<h2>（次重要的），再其次是<h3>，以此类推。。在HTML文档中，标题（Heading）很重要。通过<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题，6种级别的标题表示文档的6级目录层级关系。HTML标题（一）HTML标题（一）HTML标题HTML段落知识点二（一）HTML段落HTML可以将文档分割为若干段落。段落是通过<p>标签定义的，</p>为段落结束符。浏览器会自动地在段落的前后添加空行。<body>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p></body>（二）HTML折行不产生一个新段落的情况下进行换行（新行）使用<br>标签；<br>元素是一个空的HTML元素。关闭标签没有意义，因此没有结束标签。<body><p>这个<br>段落<br>演示了分行的效果</p></body>（三）HTML文本格式化标签HTML格式化标签<b>("bold")粗体<i>("italic")斜体<strong>加重语气<em>着重文字HTML文件中对文本进行格式化加粗文本斜体文本电脑自动输出通常标签<strong>替换加粗标签<b>来使用，<em>替换<i>标签使用。HTML图像显示知识点三图像由<img>标签定义。<img>是空标签，它只包含属性，并且没有闭合标签。源属性（src）在页面上显示图像，需要使用源属性（src）。源属性的值是图像的URL地址。图像标签（<img>）（一）HTML图像<imgsrc="url"alt="text">URL指存储图像的位置。如果名为“test.jpg”的图像位于的images目录中，那么其URL为/images/test.jpg。1.图像标签（<img>）和源属性（src）alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，将显示这个替代性的文本。<imgsrc="test.jpg"alt="Test">在浏览器无法载入图像时，将显示Test文本。属性（alt）（一）HTML图像2.Alt属性height（高度）与width（宽度）属性用于设置图像的高度与宽度。<imgsrc="test.jpg"alt="Test"width="200"height="200">图像高度200，宽度200。高度、宽度（一）HTML图像3.图像的高度和宽度HTML颜色配置知识点四HTML颜色由红色、绿色、蓝色混合而成。十六进制表示#FF0000RGB（）表示rgb(255,0,0)每种颜色值是0-255（十六进制：0-FF）（一）颜色值数年以前，当大多数计算机仅支持256种颜色的时候。能够正确地显示所有的颜色，一系列216种Web安全色作为Web标准被建议使用。微软和Mac操作系统使用了40种不同的保留的固定系统颜色（双方大约各使用20种）（二）安全色家庭设备信息界面设计知识点五（一）添加家庭设备信息界面信息1.设置界面颜色、标题、分割线<body> <bodybgcolor="antiquewhite"> <h2>HTML页面</h2> <hr/> <h3align="center">家庭设备信息</h3></body>将页面背景颜色设置为浅粉色添加二级标题“HTML页面”加入分割线添加三级标题“家庭设备信息”（一）添加家庭设备信息界面信息2.显示页面图片<body>。。。。。<imgsrc="../img/anfang.png"alt="安防"title="安防"width="50px"align="middle"/><imgsrc="../img/guangzhao.png"alt="光照"title="光照"width="100px"align="middle"/><imgsrc="../img/kongqizhiliang.png"alt="空气质量"title="空气质量"width="150px"align="middle"/><imgsrc="../img/wendu.png"alt="温度"title="温度"width="200px"align="middle"/></body>添加图片显示设置语句，设置路径图片标题图片宽度对齐方式（一）添加家庭设备信息界面信息3.添加标题段落标签<body>。。。。。 <p> <!--分行--> <br/> <small>安防</small>    <!-- 空格--> <b>光照</b>     <strong>空气质量</strong>     <big>温度</big>     </p></body>添加标题段落标签，设置小字体加粗字体加重字体大字体（二）运行结果还有其他背景色方法吗？如何设置图片大小？思考问题本任务学习了HTML页面编写。包括如下内容：1.HTML标题设置；2.HTML段落；3.HTML图像插入显示；4.HTML背景颜色设置。任务小结1.个人介绍HTML页面.

页面标题:xxx自我介绍

页面内容：

第一行(大标题)：xxx自我介绍

第二行之下：我是20级电子信息x班，张xx。。。。。。

添加照片；

设置页面背景颜色，设置页面文本文字的字体。作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目二HTML页面任务三家庭照明控制界面HTML标题设置HTML段落HTML图像插入显示HTML背景颜色设置回顾3.HTML页面如何显示列表信息?1.HTML页面如何划分区域？2.HTML如何实现页面跳转?4.如何在HTML页面添加按钮?任务引入任务描述:家庭照明控制界面的设计与程序编写任务教学目标：掌握HTML的链接跳转。掌握HTML的头部信息。掌握HTML的列表。掌握HTML的框架使用。任务概要教学内容添加HTML链接HTML头部信息HTML列表HTML框架分析一二三四家庭照明控制界面设计五添加HTML链接知识点一超链接可以是一个字、一个词或者一组词，也可以是一幅图像，点击这些内容可以跳转到新的文档或者当前文档中的某个部分。当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。HTML使用超级链接与网络上的另一个文档相连。可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。HTML超链接（一）HTML超链接（二）HTML链接语法HTML在标签<a>中使用href属性来描述链接的地址。<ahref="url">链接文本</a>href属性描述了链接的目标<body>

。。。。

<ahref="/">访问百度</a></body>提示:“链接文本”

不必一定是文本。图片或其他

HTML元素都可以成为链接。（三）HTML链接-target属性使用target属性，你可以定义被链接的文档在何处显示。target="_blank"新窗口打开文档<body>

。。。。

<ahref="/"target="_blank">访问百度</a></body>（四）HTML链接-id属性id属性可用于创建在一个HTML文档书签标记。书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。<aid="tips">物联网web应用</a>在HTML文档中插入ID：访问“物联网web应用”：<ahref="#tips">访问有用的提示部分</a><ahref="https://:8848/new_file.html#tips">访问有用的提示部分</a>从本页面访问从另一个页面访问HTML头部分析知识点二HTML头部HTMLhead<title><base><style><meta><script><link>bodyHTML头部信息包含如下几个元素：（一）HTML<title>元素<title>标签定义了文档的标题，在HTML/XHTML文档中是必须的。<title>元素功能:定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8">

<title>文档标题</title>

</head>

<body>

文档内容

</body></html>title（二）HTML<base>元素<base>标签为页面上所有相对URL规定基准URL；设置<base>标签后，设置图片或链接地址时设置相对地址即可。

<head>

<metacharset="utf-8">

<title>文档标题</title>

<basehref="/live/"target="_blank">

</head>

<body> <p><ahref="cctv1">CCTV1</a></p> <p><ahref="cctv2">CCTV2</a></p>

</body>注意这里我们设置了链接的相对地址。能正常跳转是因为我们在head部分设置了base标签，该标签指定了页面上所有链接的默认URL，所以该链接的访问地址为"/live/cctv1"（三）HTML<link>元素<link>标签定义了文档与外部资源之间的关系。<link>标签通常用于链接到样式表。<head> <linkrel="stylesheet"type="text/css"href="mystyle.css"></head>（四）HTML<style>元素<style>标签定义HTML文档的样式信息。在<style>元素中，可以规定在浏览器中如何呈现HTML文档。每个HTML文档能包含多个<style>标签。<head> <styletype="text/css"> body{background-color:yellow} p{color:blue} </style></head>（五）HTML<meta>元素<meta>标签描述一些基本的元数据，元数据不显示在页面上，但会被浏览器解析。<meta>元素通常用于指定网页的描述、关键词、文件的最后修改时间、作者和其他元数据。元数据可用于浏览器（显示内容或重新加载页面）、搜索引擎（关键词）或其他Web服务。<meta>一般放置于<head>区域。<metaname="keywords"content="HTML,CSS,XML,XHTML,JavaScript"><metaname="description"content="Test"><metaname="author"content="User"><metahttp-equiv="refresh"content="30">为搜索引擎定义关键字为网页定义描述内容定义网页作者每30秒钟刷新当前页面（六）HTML<script>元素<script>标签用于加载脚本文件，如：JavaScript。以后的章节中会详细描述HTML列表知识点三HTML列表HTML列表无序列表有序列表自定义列表（一）HTML无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用<ul>标签<body> <ul> <li>Wifi</li> <li>Bt</li> </ul></body>（二）HTML有序列表有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签，每个列表项始于<li>标签，列表项使用数字来标记。<body> <ol> <li>Wifi</li> <li>Bt</li> </ol></body>（三）HTML自定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。<body> <dl> <dt>Wifi</dt> <dd>-wifi</dd> <dt>Bt</dt> <dd>-蓝牙</dd> </dl></body>HTML框架知识点四HTML框架使用框架，可以在同一个浏览器窗口中显示多个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：开发人员必须同时跟踪更多的HTML文档；很难打印整张页面。（一）框架结构标签<frameset>框架结构标签（<frameset>）<frameset>可定义一个框架集。用来组织多个窗口（框架）。每个frameset定义了一系列行或列rows/columns的值规定了每行或每列占据屏幕的面积。<frame>标签<frame>标签定义frameset中一个特定窗口（框架）。frameset中的每个框架都可以设置不同的属性，比如border、scrolling、noresize等等注意：不能与<frameset></frameset>标签一起使用<body></body>标签。

为不支持框架的浏览器添加一个<noframes>标签，请务必将此标签放置在<body></body>标签中。<html><framesetcols="25%,50%,25%"> <framesrc="frame_a.htm"/> <framesrc="frame_b.htm"/> <framesrc="frame_c.htm"/></frameset></html>（二）<frame>标签属性（三）垂直框架本例演示：如何使用三份不同的文档制作一个垂直框架。<html><framesetcols="25%,50%,25%"><framesrc="/example/html/frame_a.html"><framesrc="/example/html/frame_b.html"><framesrc="/example/html/frame_c.html"></frameset></html>（四）水平框架本例演示：如何使用三份不同的文档制作一个水平框架。<html><framesetrows="25%,50%,25%"> <framesrc="/example/html/frame_a.html"> <framesrc="/example/html/frame_b.html"> <framesrc="/example/html/frame_c.html"></frameset></html>（五）混合框架本例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。<html><framesetrows="50%,50%"><framesrc="/example/html/frame_a.html"><framesetcols="25%,75%"> <framesrc="/example/html/frame_b.html"> <framesrc="/example/html/frame_c.html"></frameset></frameset></html>（六）混合框架本例演示noresize属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。<html><framesetcols="50%,*,25%"><framesrc="/example/html/frame_a.html"noresize="noresize"/><framesrc="/example/html/frame_b.html"/><framesrc="/example/html/frame_c.html"/></frameset></html>（六）内联框架<iframe>iframe元素会创建包含另外一个文档的内联框架（即行内框架）<iframesrc="URL"></iframe>iframe语法:该URL指向不同的网页。iframe-设置高度与宽度<iframeloading="lazy"src="demo_iframe.htm"width="200"height="200"></iframe><iframesrc="demo_iframe.htm"frameborder="0"></iframe>iframe-移除边框（六）内联框架<iframe>本例演示如何创建内联框架（HTML页中的框架）<html><body> <iframesrc=frame_a.html></iframe></body></html>（六）内联框架<iframe>-使用iframe来显示目标链接页面使用iframe来显示目标链接页面目标链接的属性必须使用iframe的属性，如下实例：<body><iframesrc="frame_a.html"name="iframe_a"></iframe><p><ahref=""target="iframe_a">了不起的核工业</a></p></body>家庭照明控制界面设计知识点五（一）添加家庭照明控制界面信息1.添加HTML框架集及框架<!DOCTYPEhtml><html><framesetrows="12%,88%"><framesrc="head.html"/><framesetcols="20%,80%"> <framesrc="left.html"/> <framesrc="right_1.html"name="right"/></frameset></frameset></html>将界面划分为三部分：将界面划分为占比12%和88%的上下两部分上半部分显示页面“head.html”下半部分分成占比20%和80%的左右两部分设置左边显示页面“left.html”右边显示页面“right_1.html”（一）添加家庭设备信息界面信息2.添加头部页面<bodybgcolor="#ffff88"> <h2align="center">家庭照明控制</h2></body>创建“head.html”页面设置页面背景颜色为#ffff88添加二级标题“家庭智能照明”（一）添加家庭设备信息界面信息3.设计左侧页面及页面链接<bodybgcolor="paleturquoise">系统菜单<ul> <li><ahref="right_1.html"target="right">照明设备</a></li> <li> <ahref="right_2.html"target="right">照明状态</a> </li></ul></body>创建“left.html”页面设置页面背景颜色为paleturquoise添加无序列表（一）添加家庭设备信息界面信息4.设计右侧照明设备控制页面<bodybgcolor="aliceblue"> <ol> <li>光照:600lux</li> <li>照明灯: <button>打开</button><!--第一种按钮--> </li> <li><ahref="#">查看详情</a></li> </ol>

。。。。。。</body>创建“right_1.html”页面设置页面背景颜色为aliceblue添加有序列表、添加无序列表、自定义列表（一）添加家庭设备信息界面信息5.设计右侧照明状态信息页面<bodybgcolor="antiquewhite"> <h3>房间1照明状态</h3> <imgsrc="img/lamp_close.png"width="100px"/> <hr/> <h3>房间2照明状态</h3> <imgsrc="img/lamp_open.png"width="100px"/> <hr/> <h3>房间3照明状态</h3> <imgsrc="img/lamp_open.png"width="100px"/></body>创建“right_2.html”页面设置页面背景颜色为antiquewhite添加房间标题和照明状态如何设置框架的高度和宽度？如何使用iframe来显示目标链接页面？思考问题本任务学习了HTML页面布局。包括如下内容：1.HTML连接；2.HTML列表；3.HTML框架。任务小结1.

个人介绍HTML页面.

页面标题:xxx自我介绍

页面内容：

第一行(大标题)：xxx自我介绍

第二行之下：我是20级电子信息x班，张xx。。。。。。

添加照片；

设置页面背景颜色，设置页面文本文字的字体。

使用框架布局页面分区，使用连接连接显示多个页面。

使用列表添加自我介绍内容

使用iframe来显示本人QQ空间的个人风采页面作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目二HTML页面任务四家庭温湿度采集界面HTML链接HTML头部信息HTML列表HTML框架回顾3.如何创建复选框?1.HTML页面如何绘制表格？2.如何下拉列表?4.如何输入文字?任务引入任务描述:家庭温湿度采集界面设计与程序编写任务教学目标：掌握HTML的表格。掌握HTML的布局。掌握HTML的表单。任务概要教学内容HTML表格HTML布局HTML表单和输入家庭温湿度采集界面设计一二三四HTML表格知识点一字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。HTML表格（一）绘制HTML表格（一）绘制HTML表格表格实例<tableborder="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>（二）设置HTML表格边框属性如果不定义边框属性，表格将不显示边框。可使用边框属性设置<tableborder="1">来显示边框。<tableborder="1"><tr><td>Row1,cell1</td><td>Row1,cell2</td></tr></table>（三）设置HTML表格表头表格的表头使用<th>标签进行定义。大多数浏览器会把表头显示为粗体居中的文本<tableborder="1"> <tr> <th>Header1</th> <th>Header2</th> </tr> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>HTML布局知识点二HTML布局大多数网站可以使用<div>或者<table>元素来创建多列。使用CSS对元素进行定位，或者为页面创建背景以及色彩丰富的外观。（一）<div>元素div元素是用于分组HTML元素的块级元素。<body>

<divid="container"style="width:500px">

<divid="header"style="background-color:#FFA400;">

<h1style="margin-bottom:0;">网页标题</h1></div>

<divid="menu"style="background-color:#FFD600;height:200px;width:100px;float:left;">

<b>MENU</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<divid="content"style="background-color:#EEEE00;height:200px;width:400px;float:left;">

内容</div>

<divid="footer"style="background-color:#FFA511;clear:both;text-align:center;">

©</div>

</div></body>（二）<table>表格布局<table>标签是创建布局的一种简单的方式。<body>

<tablewidth="500"border="0">

<tr><tdcolspan="2"style="background-color:#FFA511;">

<h1>网页标题</h1></td></tr><tr><tdstyle="background-color:#FFD711;width:100px;">

<b>MENU</b><br>

HTML<br>

CSS<br>

JavaScript</td><tdstyle="background-color:#eeee00;height:200px;width:400px;">内容</td></tr><tr><tdcolspan="2"style="background-color:#FFA511;text-align:center;">©</td>

</tr>

</table></body>HTML表单和输入知识点三HTML表单HTML表单用于收集不同类型的用户输入。（一）设置HTML表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域（textarea）下拉列表单选框（radio-buttons）复选框（checkboxes）等等表单使用表单标签<form>来设置；输入标签（<input>）输入元素；输入内容类型由类型属性（type）定义。<form>...input元素...</form>（二）文本域（TextFields）文本域通过<inputtype="text">标签来设定；当用户要在表单中键入字母、数字等内容时，使用文本域。在大多数浏览器中，文本域的默认宽度是20个字符<form> 设备信息:<inputtype="text"name="info"><br> 设备名称:<inputtype="text"name="name"></form>（三）密码字段密码字段通过标签<inputtype="password">来定义；密码字段字符不会明文显示，而是以星号或圆点替代<form> 密码:<inputtype="password"name="pwd"></form>（四）单选按钮（RadioButtons）<inputtype="radio">标签定义了表单单选框选项。<form> <inputtype="radio"name="sensor"value="tem">温度<br> <inputtype="radio"name="sensor"value="hum">湿度</form>（五）复选框（Checkboxes）<inputtype="checkbox">定义了复选框.用户需要从若干给定的选择中选取一个或若干选项。<form> <inputtype="checkbox"name="sensor"value="tem">温度传感器<br> <inputtype="checkbox"name="sensor"value="light">光线传感器</form>（六）提交按钮（SubmitButton）<inputtype="submit">定义了提交按钮；当用户单击确认按钮时，表单的内容会被传送到另一个文件，对输入数据进行相关的处理。表单的动作属性定义了目的文件的文件名。<formname="sub"action="#"method="post"> 传感器ID:<inputtype="text"name="sensorid"> <inputtype="submit"value="提交"></form>家庭温湿度采集界面实训知识点四（一）添加HTML页面布局<!--布局--><divid="container"style="width:800px;"> <divid="header"style="background-color:lightgrey;"> </div> <divid="menu"style="background-color:blanchedalmond; height:500px;width:200px;float:left;"> </div> <divid="content"style="background-color:mediumaquamarine; height:500px;width:600px;float:left;"> </div> <!--底部--> <divid="footer"style="background-color:coral;text-align:center;"> </div></div>添加布局，宽度设置为800px在页面布局中添加标题在页面布局中添加菜单在页面布局中添加内容栏在页面布局中添加底部栏（二）温湿度采集页面代码设计1.设置标题和菜单<!--标题--> <divid="header"style="background-color:lightgrey;"> <h2style="margin-bottom:0;">温湿度采集</h2> </div>设置布局标题（二）温湿度采集页面代码设计1.设置标题和菜单<!--菜单--><divid="menu"style="background-color:blanchedalmond;height:500px;width:200px;float:left;"> <b>MENU</b><br/> <ahref="list.html">温湿度采集</a><br/> <ahref="add.html">温湿度添加</a><br/></div>设置布局菜单布局菜单部分添加“温湿度采集”、“温湿度添加”2个菜单项；分别链接到页面list.html和add.html。（二）温湿度采集页面代码设计2.在布局内容栏添加表格布局内容栏部分添加表格表格中包含：传感器名称、传感器类型、状态、类型。<divid="content"style="background-color:mediumaquamarine;height:500px;width:600px;float:left;"><h3id="sys_sta">温湿度采集</h3><!--表格--><tableborder="1"width="400"><!--表头thead--><thead> <tr> <th>传感器名称</th> <th>传感器类型</th> <thcolspan="2">状态或值</th> </tr></thead><!--表格体tbody--><tbody>

</tbody> </table> </div>（二）温湿度采集页面代码设计3.设置布局底部栏底部栏部分添加“©demo”<!--底部--><divid="footer"style="background-color:coral;text-align:center;"> ©demo</div>（三）温湿度添加页面代码设计1.内容栏部分添加表单<!--表单--><form> <h3id="sys_set">温湿度添加</h3> <table>

<table>

</form>如何使用div或table进行页面布局？如何使用表单获取输入信息？思考问题本任务学习了HTML页面布局。包括如下内容：1.HTML表格；2.HTML布局；3.HTML表单。任务小结1.

个人介绍HTML页面.

页面标题:xxx自我介绍

页面内容：

使用div和table进行页面布局；

添加菜单项，链接2个以上个人信息页面；

使用表格和表单添加信息、获取输入信息；个人介绍内容自由选择。作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目三CSS样式任务一光强调节界面样式HTML表格HTML布局HTML表单回顾3.如何设置标题的CSS样式?1.如何使用CSS设置页面背景颜色？2.如何使用CSS设置图片样式?任务引入任务描述:光强调节界面设计与程序编写任务教学目标：掌握CSS的语法；掌握CSS的选择器使用；掌握CSS的样式表的创建及引用。任务概要教学内容CSS介绍CSS样式表光强调节界面样式设计实训一二三CSS介绍知识点一CSS可以静态地修饰网页；可以配合各种脚本语言动态地对网页各元素进行格式化。只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。CSS是指层叠样式表（英文全称：CascadingStyleSheets），通常又称为“风格样式表（StyleSheet）”。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。HTMLCSS（一）CSS（二）CSS语法CSS规则由两个主要的部分构成：选择器和声明（一条或多条声明）选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性（property）是设置的样式属性（styleattribute）；每个属性有一个值，属性和值被冒号分开。CSS声明总是以分号“;”结束，声明总以大括号“{}”括起来：（二）CSS语法CSS实例：

p{color:red;text-align:center;}/*这是个注释*/p{color:red;text-align:center;/*这是另一个注释*/font-family:arial;}每行只描述一个属性，可读性更强CSS注释以“/*”开始,以“*/”结束，（三）CSS选择器在HTML元素中设置CSS样式，需要在元素中设置“id”和“class”选择器。。#demo1{text-align:center;color:blue;}1.Id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。Id选择器（三）CSS选择器.center{text-align:center;}2.class选择器class选择器用于描述一组元素的样式，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示。class选择器拥有center类的HTML元素均为居中p.center{text-align:center;}class指定特定的HTML元素所有的p元素使用class="center"让该元素的文本居中CSS样式表知识点二CSS样式表CSS样式表的方法有三种：外部样式表（Externalstylesheet）内部样式表（Internalstylesheet）内联样式（Inlinestyle）（一）外部样式表当样式需要应用于很多页面时，通常选择外部样式表。在使用外部样式表时，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表，<link>标签在（文档的）头部。<head> <linkrel="stylesheet"type="text/css"href="mystyle.css"></head>样式表应该以.css扩展名进行保存。文件不能包含任何的html标签。hr{color:blue;}p{margin-left:20px;}body{background-color:grey;}（二）内部样式表当单个文档需要特殊的样式时，一般使用内部样式表。使用<style>标签在文档头部定义内部样式表。<head><style>hr{color:blue;}p{margin-left:20px;}body{background-color:grey;}</style></head>（三）内联样式表将样式和内容在一起描述时，一般使用内联样式。当样式仅需要在一个元素上应用一次时，通常可选择此方法。使用内联样式，需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。<pstyle="color:blue;">这是一个段落。</p>例如，改变段落的颜色和左外边距：（四）多重样式表当某些属性在不同的样式表中被同样的选择器定义，属性值将从更具体的样式表中被继承过来。h3{color:red;text-align:left;font-size:8pt;}例如，外部样式表、内部样式表都拥有针对h3选择器属性：h3{text-align:right;font-size:20pt;}color:red;text-align:right;font-size:20pt;/*对h3选择器的三个属性*//*对h3选择器的两个属性*/页面拥有内部样式表，同时与外部样式表链接，

h3得到的样式是：继承于外部样式表继承于内部样式表继承于内部样式表（五）多重样式表优先级多重样式优先级如下：内联样式（Inlinestyle）>内部样式（Internalstylesheet）>外部样式（Externalstylesheet）>浏览器默认样式。<head>

<!--外部样式style.css--><linkrel="stylesheet"type="text/css"href="style.css"/>

<!--设置：h3{color:blue;}--><styletype="text/css">/*内部样式*/h3{color:green;}</style></head><body><h3>测试！</h3></body>注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。光强度调节界面设计知识点三（一）在head中添加样式

/*选择全部元素*/ *{ padding:0; margin:0; }1.设置全部元素内外边距（一）在head中添加样式/*class选择器*/ .container{ width:600px; color:white; background-color:lightpink; margin:20pxauto; padding:15px; line-height:50px; text-align:center; }2.设置class选择器container元素样式添加样式设置cont