《物联网web应用技术》课件 项目二 任务二家庭设备信息界面_第1页
《物联网web应用技术》课件 项目二 任务二家庭设备信息界面_第2页
《物联网web应用技术》课件 项目二 任务二家庭设备信息界面_第3页
《物联网web应用技术》课件 项目二 任务二家庭设备信息界面_第4页
《物联网web应用技术》课件 项目二 任务二家庭设备信息界面_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

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

文档简介

《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自我介绍

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

温馨提示

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

最新文档

评论

0/150

提交评论