《物联网web应用技术》课件项目二 HTML页面

上传人：y*** IP属地：山东上传时间：2026-07-05 格式：PPTX 页数：134 大小：4.31MB 积分：25 举报 版权申诉

已阅读5页，还剩129页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《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></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">

</head>

<body>

文档内容......

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

<head>

<metacharset="utf-8">

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

</head>

</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;">

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">

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:

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

《物联网web应用技术》课件项目二 HTML页面

文档简介

温馨提示

最新文档

评论

《物联网web应用技术》课件 项目二 HTML页面

文档简介

温馨提示

最新文档

评论

相关文档

《物联网web应用技术》课件项目二 HTML页面