版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《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添加有序列
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 护理服务流程优化与效率提升
- 2025年智慧社区隔音材料智能控制方案
- 护理竞赛护理文书记录与沟通
- 2025年元宇宙社交系统DevOps流程设计
- 2026秋小学数学二升三年级暑假专项提升训练20天（购物乘法应用题专题）
- 学校危化品管理制度(四篇)
- 钟的图形推理题目及答案
- 中位数类似题的题目及答案
- 老年医院笔试题及答案
- 阳离子修饰黄精多糖脂质立方液晶纳米粒对免疫调节的机制及应用研究
- 大学英语四级考试高频词汇1500（打印版）
- 汽车驾驶员高级工知识试题及答案
- 介绍马来西亚版图
- 2025年消防文员招聘试卷及答案
- C63-TBC1D24基因相关癫痫的临床表型及头颅影像学特点研究
- 2025机修工劳动合同样本
- 智慧树知道网课《动物生理学（华南农业大学）》课后章节测试答案
- 2024八年级道德与法治上册知识点
- 2025 年小升初济南市初一新生分班考试数学试卷（带答案解析）-（人教版）
- 技改大修工程项目管理手册与实践经验分享
- 【初中数学】学霸笔记手写版
评论
0/150
提交评论