第 3 章 页面设计 1 HTML 设计概述 3. 3.1 HTML 简介 1. HTML(HyperTextMarkupLanguage,超文本标记 语言)是一种用来制作超文本文档的简单标记语言,是网页 制作的基本语言。用HTML 编写的超文本文档称为 HTML 文档,它能独立于各种操作系统平台(如UNIX 、 Windows等)。HTML 语言的作用就是对网页的内容、格 式及网页中的超链接进行描述,然后由网页浏览器读取网 站上的HTML 文档,再根据此类文档中的描述组织并显示 相应的Web页面。 1.HTML 思想 设想这样一种场景:在做实验时,实验器材对应的传 感器或接口都会标有名字。有的标签名字写着控制类传感 器、采集类传感器、安防类传感器,有的标有K1 、D2 等字 样。当做实验需要明白怎么接线或者获取数据时,里面贴 的标签最能简单地描述它的标签。一个红色的LED 灯上 面标有D11 钢印,一行黑色的跳线的钢印上面标有传感器 的相关序号等。其他与物联网相关的实验器材也采用类似 的做法。编写HTML 与这个过程是很相似的。不同的是, 编写HTML 并非向传感器和接口上贴标签,而是为网页内 容打上能够描述它们的标签,无须自己创建标签名称,因为 HTML 已经完成了这一工作,它有一套预先定义好的元 素。p元素用于段落,r元素用于缩略词,i元素用于列 abbl 表项目。后面还会进一步介绍这些元素以及很多其他元 素。注意,钢印标签上的用词是D11,而不是“红色的LED 灯”。类似地,HTML 元素描述的是内容,而非看起来是什 么样的。CSS 才控制内容的外观(如字体、颜色、阴影等)。 因此,不管最后让段落显示为绿色还是橙色,它们都是p元 基于Web技术的物联网应用开发 28 素,这才是HTML唯一关心的。在学习本书和创建网页时,应该始终牢记这一思想。下面 介绍的基本网页就是这样做的。 2.基本的HTML 页面 首先介绍HTML文件的基本结构。 HTML文件是纯文本文件,可以用所有的文本编辑器进行编辑,如记事本等;也可以 使用可视化编辑器,如Frontpage、Dreamweaver等。 在HTML中,由<>和</>括起来的文本称为标签。其中,<>表示开始标签, </>表示结束标签,开始标签和结束标签配对使用,它们之间的部分是该标签的作用域, 如<html></html>等。HTML就是以这些标签来控制内容的显示方式。 例3-1 HTML文件结构示例。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于Web 技术的物联网应用开发</title> </head> <body> .< /body> </html> 上述所示代码是创建一个HTML文件的最基本结构,所有HTML文件都要包含这 些基本结构部分。其中: <html></html>表示该文档是HTML文档。 <head></head>表明文档的头部信息,一般包括标题和主题信息,该部分信息不会 出现在页面正文中。也可以在其中嵌入其他标签,表示诸如文件标题、编码方式等属性。 <title</title>表示该文档的标题,标签间的文本显示在浏览器的标题栏中。 <body></body>是网页的主体信息,可以包括各种字符、表格、图像及各种嵌入对 象等信息。 3.HTML编辑器 HTML 文件可以使用操作系统自带的文本编辑器进行编辑,也可以使用专业的 HTML编辑器进行编辑。下面推荐几款常用的编辑器。 Notepad++:https://notepad-plus-plus.org/。 SublimeText:http://www.sublimetext.com/。 VSCode:https://code.visualstudio.com/。 以上软件可以从相应官网中下载对应的软件,按步骤安装即可。 下面演示如何使用Notepad++工具来创建HTML文件,其他工具操作步骤类似。 Notepad++是Windows操作系统下的文本编辑器(软件版权许可证:GPL),有完整的 中文接口并且支持多国语言编写的功能(UTF-8技术)。 第 3 章 HTML页面设计 29 步骤1:新建HTML 文件,如图3-1所示。 图3-1 编写HTML 代码 在Notepad++ 安装完成后,选择“文件”→“新建”命令,在新建的文件中输入以下 代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于Web 技术的物联网开发应用</title> </head> <body> <h1>HTML 开发基础</h1> <p>HTML 是一种用于创建网页的标准标记语言。</p> </body> </html> 步骤2:另存为HTML文件。 选择“文件”→“另存为”命令,文件名为html_test.html。当保存HTML文件时,既可 以使用.htm 为扩展名,也可以使用.html为扩展名,两者没有区别。 步骤3:在浏览器中运行这个HTML文件。 启动系统的浏览器,然后选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双 击创建的HTML文件。运行显示结果如图3-2所示。 4.HTML基础 1)标签的组成 标签的组成:元素(element)、属性(attribute)和值(value)。 元素就像描述网页不同部分的小标签一样:这是一个标题,那是一个段落,而那一组 链接是一个导航。有的元素有一个或多个属性,属性用来进一步描述元素。HTML元素 基于Web技术的物联网应用开发 30 图3-2 显示效果 指的是从开始标签(starttag)到结束标签(endtag)的所有代码。按照惯例,元素的名称都 用小写字母。不过HTML5对此未做要求,也可以使用大写字母,只是现在很少有人用大 写字母编写代码了,因此,除非无法抗拒,否则不推荐使用大写字母。 (1)<p> 元素:示例如下。 <p>段落标签。</p> 说明:这个<p> 元素定义了HTML文档中的一个段落。这个元素拥有一个开始标 签<p>和一个结束标签</p>。元素内容是:段落标签。 (2)<h1>元素:示例如下。 <h1>标题一标签</h1> 说明:这个h1 元素定义了HTML 文档中的标题。这个元素拥有一个开始标签 <h1>和一个结束标签</h1>。元素内容是:标题一标签。 (3)<body> 元素:示例如下。 <body> <h1>标题一标签</h1> <p>段落标签。</p> </body> 说明:<body> 元素定义了HTML 文档的主体。这个元素拥有一个开始标签 <body>和一个结束标签</body>。元素内容是:两个HTML 元素(h1、p元素)。 (4)空元素(emptyelement或voidelement):既不包含文本也不包含其他元素。空 元素看起来像是开始标签和结束标签的结合,由左尖括号开头,然后是元素的名和可能包 含的属性,然后是一个可选的空格和一个可选的斜杠,最后是必有的右尖括号。如图3-3 所示,空元素(如这里显示的img元素)并不包含任何文本内容(alt属性中的文字是元素的 一部分,并非显示在网页中的内容)。空元素只有一个标签,同时作为元素的开始标签和结 第 3 章 HTML页面设计 31 束标签使用。 图3-3 空标签 (5)父元素和子元素:如果一个元素包含另一个元素,它就是被包含元素的父元素,而 被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代。这种类似 家谱的结构是HTML 代码的关键特性,它有助于在元素上添加样式和应用JavaScript行 为。值得注意的是,当元素中包含其他元素时,每个元素都必须嵌套正确,即子元素必须完 全地包含在父元素中。使用结束标签时,前面必须有跟它成对的开始标签。换句话说,先 开始元素1(body元素),再开始元素2(h1元素),就要先结束元素2(h1元素),再结束元 素1(body元素)。例如: <body> <h1>这是一个基于Web 技术的物联网应用开发网页</h1> </body> 在上面这段HTML代码中,body元素是h1的父元素;反过来,h1是body元素的子 元素(也是后代)。 注意:嵌套格式正确。 2)属性和值 HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。它总是以 名称/值对的形式出现,如name="value",并且总是在HTML元素的开始标签中规定。 如图3-4所示,这是一个label元素(关联文本标签与表单字段),它有一个简单的属 性—值对。属性总是位于元素的开始标签内,属性的值通常放在一对双引号中。 图3-4 属性和值 HTML属性可以相关参考手册。表3-1列出了适用于大多数的HTML元素的属性。 表3-1 HTML元素的属性 序号属性描 述 1 class 为HTML元素定义一个或多个类名(classname)(类名从样式文件引入) 2 id 定义元素的唯一id 3 style 规定元素的行内样式(inlinestyle) 4 title 描述了元素的额外信息(作为工具条使用) 基于Web技术的物联网应用开发 32 3)HTML书写规范 在HTML中,按照格式标签分为两类:①大部分标签是成对出现的,需要开始标签和 结束标签;②有一些标签不需要成对出现,单独出现一次就可以,这类标签通常不控制显 示形态,如<br>表示换行。 标签是不区分大小写的。 3.1.2 HTML文本设置 文本是网页中最基本且最重要的元素之一,在网页上输入、缩辑、格式化文本元素是制 作网页的基本操作。文本主要作用在于帮助网页浏览者快速地了解网页的内容,是网页内 容的基础,是网页中必不可少的元素。常用的文本标签分为标题标签、段落标签、格式标签 三类。 1.HTML文本内容 元素中包含的文本可能是网页上最基本的成分。如果用过文字处理软件,那么就一定 输入过文本。但是,HTML页面中的文本与文字处理软件中通常的文本有一些重要的差 异。首先,浏览器呈现HTML 时,会把文本中的多个空格或制表符压缩成单个空格,把回 车符和换行符转换成单个空格,或者将它们一起忽略。例如,以下HTML文本。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于Web 技术的物联网应用开发</title> </head> <body> <p>我是一个基于Web 技术的物联网应用开发的 段落</p> </body> </html> 显示效果如图3-5所示。 图3-5 HTML 文本内容 第 3 章 HTML页面设计 33 <!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件,如 果能够正确声明HTML的版本,浏览器就能正确显示网页内容。DOCTYPE声明是不区 分字母大小写的,以下方式均可。 <!DOCTYPE html> <!DOCTYPE HTML> <!Doctype Html> <!doctype html> 对于中文编码,目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时就 需要在文件头部将字符声明为UTF-8。 <meta charset="UTF-8"> 2.HTML标题 在HTML 文档中,标题很重要。通过<hi>…</hi>标签配对使用设置HTML网 页内容标签。标题标签共分为6种,分别表示不同字号的标题,i可以取值为1~6。同时, 在< hi>中可以使用属性<align>来设置标题对齐方式,如果没有设置<align>属性,默 认对齐方式是left(左对齐)。例如,以下HMTL标题标签。 <h1>智能家居</h1> <h2>电器控制功能模块</h2> <h3>环境监测功能模块</h3> 显示效果如图3-6所示。 标题标签hi描述如表3-2所示。 图3-6 标题标签 表3-2 标题标签hi描述 序号标题标签描 述 1 <h1align="对齐方式">…</h1> 表示一级标题 2 <h2></h2> 表示二级标题 3 <h3></h3> 表示三级标题 4 <h4></h4> 表示四级标题 5 <h5></h5> 表示五级标题 6 <h6></h6> 表示六级标题 3.HTML段落 1)分段标签<p> 段落是通过<p> 标签定义的。<p>用来标记段落的开始,用</p>标记段落的结 束。例如: 基于Web技术的物联网应用开发 34 <body> <p>智能家居。</p> <p>电器控制功能模块。</p> <p>环境监测功能模块。</p> </body> 图3-7 段落标签 显示效果如图3-7所示。 注意:浏览器会自动地在段落的前后添加空行(</p> 是块 级元素,后面的章节将会介绍)。 2)换行标签<br> 如果希望在不产生一个新段落的情况下进行换行(新行),可 以使用<br/> 标签。例如: <p>安全防护功能的提供者是智能家居系统中的安全防护系统< br> 安全防护系统是智能家居系 统的重要组成部分<br>该系统为智能家居系统提供家居防护安全服务。</p> 使用空的段落标记<p></p>插入一个空行是一个坏习惯。可以用<br>标签代替 它,显示效果如图3-8所示。 图3-8 换行标签 3)注释标签 在HTML文档中用来表示注释的标签是<!--注释内容-->。 例3-2 注释标签示例。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于Web 技术的物联网应用开发</title> </head> <body> <!--该行为注释,具有解释性--> <p>我是一个基于Web 技术的物联网应用开发的段落</p> </body> </html> 4)水平分割线标签<hr> <hr>标签是水平线标签,用于段落和段落之间的分割,使文档结构清晰明了,且文字 第 3 章 HTML页面设计 35 的编排更加整齐。加入一个<hr>标签,就加入了一条默认的水平线。例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于Web 技术的物联网应用开发</title> </head> <body> <p>我是一个基于Web 技术的物联网应用开发的段落</p> <hr> <p>我是一个基于Web 技术的物联网应用开发的段落</p> </body> </html> 显示效果如图3-9所示。 图3-9 水平分割线标签 4.格式标签 1)常用的格式标签 在HTML文档中,通常要通过格式标签来设定文本显示格式,常用的格式标签如表3-3 所示。 表3-3 常用的格式标签 序 号标 签描 述 1 <b> 定义粗体文本 2 <big> 定义大号字 3 <em> 定义着重文字 4 <i> 定义斜体字 5 <small> 定义小号字 6 <strong> 定义加重语气 7 <sub> 定义下标字 8 <sup> 定义上标字 9 <ins> 定义插入字 基于Web技术的物联网应用开发 36 续表 序 号标 签描 述 10 <del> 定义删除字 11 <s> 不赞成使用,可使用<del>代替 12 <strike> 不赞成使用,可使用<del>代替 13 <u> 不赞成使用,可使用样式(style)代替 2)特殊字符标签 特殊字符标签如表3-4所示。 表3-4 特殊字符标签 序号特殊字符HTML标签序号特殊字符HTML标签 1 " " 4 > > 2 & & 5 空格 3 < < 3.1.3 HTML图像处理 1.HTML图像 1)HTML图像由<img>标签定义 <img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图 像,就需要使用源属性(src)。src是指source。源属性的值是图像的URL 地址。 定义图像语法格式: <img src="url" /> 例3-3 定义HTML图像。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>基于Web 技术的物联网应用开发</title> </head> <body> <p> 一幅开灯图像: <img src="light-on.png" width="128" height="128" /> </p> <p> 一幅关灯图像: 第 3 章 HTML页面设计 37 <img src="light-off.png" width="50" height="50" /> </p> </body> </html> 页面显示效果如图3-10所示。 图3-10 图像标签 这个图像的URL 只包含文件名,没有路径,因此代表该图像位于与此网页相同的文 件夹。此文本中插入了两张图片,文件名分别为light-on.png和light-off.png,同时设置了 图片显示的宽度(width)和高度(height)。图3-10中的例子显示了最简单的图像路径形 式,即只有文件名。不过,在实践中为了保持良好的文件组织结构,通常将图像保存在单独 的文件夹中。img标签的src属性中的URL也应该反映这一路径。假设图3-10中的页面 所在的文件夹还包含一个名为images的文件夹,且图像位于images文件夹中,则显示该 图的HTML应为<imgsrc="images\light-off.png"/>。后面将介绍文件路径问题。 2)添加HTML图像属性(alt) 使用alt属性,可以为图像添加一段描述性文本,当图像出于某种原因不显示的时候, 就将这段文字显示出来。屏幕阅读器可以朗读这些文本,帮助视障访问者理解图像的内 容。一般来说,替代文本是考虑图像未能正常加载的情况下需要呈现的文字。 添加图像属性语法格式: <img src="01.jpg" alt="我是一个灯的图片"> 例如: <img src="images\light-on.png" alt="我是一个灯的图片"> 页面显示效果如图3-11所示。 图3-11 图像属性 基于Web技术的物联网应用开发 38 3)设置HTML图像的高度(height)和宽度(width) (1)设置图像width属性。 设置图像宽度,默认情况下修改图像宽度,也会按比例修改图像的高度。这里的宽度 单位是像素。其语法格式为: <img src="图像文件地址"width="图像宽度"> (2)设置图像height属性。 设置图像高度,默认情况下修改图像高度,也会按比例修改图像的宽度。这里的高度 单位是像素。其语法格式为: <img src="图像文件地址"height="图像高度"> 3.1.4 HTML颜色设置 1.HTML颜色 颜色由红色、绿色、蓝色混合而成。HTML颜色由一个十六进制符号来定义,这个符 号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制#00)。最大值 是255(十六进制#FF)。 表3-5给出了由红绿蓝三种颜色混合而成的具体效果。 表3-5 HTML颜色表 颜 色十六进制值HTMLRGB混合颜色表示 #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255) 提示:仅有16种基本颜色名被W3C 的HTML4.0 标准支持,它们是aqua、black、 blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow, 如图3-12所示。 1)通过指定RGB的量构建颜色 可以通过指定红、绿、蓝(这也是RGB名称的由来)的量来构建自己的颜色,也可以使 用百分数、0~255的数字来指定这三种颜色的值。例如,如果创建一种深紫色,可以使用 颜色名列表 彩表3-5 第 3章 HTML页面设计 图3-12 16种基本颜色关键字 彩图3-12 89份红、127份蓝、0份绿。这个颜色可以写成rgb(89,0,127 )。 2)用十六进制数表示颜色 十六进制数是颜色设置最常用的方法,如图3-13所示。将这些数字转化为十六进制, 然后将它们合并到一起,再在前面加一个#,如#59007F 。 图3-13 用十六进制数表示颜色 图3-13CSS中定义颜色最常用的方式是用十六进制数指定颜色所包含的红、绿、蓝的 量,对于#59007F,十六进制的59 、00 、7F分别等于十进制的89 、0、127,如图3-14所示。 7F和7f都是允许的写法。 如果一个十六进制颜色是由三对重复的数字组成的,可以去掉重复数字。例如, # f3344,可缩写为#f34 。 表示颜色的另一种方式是用0~255的数字指示RGB值。首先定义红色,然后定义绿 色,最后定义蓝色。此外,也可以将每个值表示为百分数,不过很少用到这种做法,可能因 为Photoshop等图像编辑器通常用数字表示RGB值。如果想使用百分数,可以将图3-14 颜色写成rgb(35%,0%,50%),因为89是255的35%,127是255的50% 。 基于Web技术的物联网应用开发 40 图3-14 颜色表示 3.2 HTML列表与框架 3.2.1 HTML链接 1.HTML链接 链接是网络的命脉。没有链接,每个页面只能独立存在,同其他所有页面完全地分开。 链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接连接而 成,超级链接(简称超链接或链接)完成了页面之间的跳转。图片也可以进行超级链接。 1)给文字添加链接 超级链接的标签是<a>…</a>,给文字添加超级链接类似于其他修饰标签。添加 了链接后的文字有其特殊的样式,以和其他文字区分,当鼠标指针移动到网页中的某个链 接时,指针箭头会变成一只小手状。默认情况下,一个未访问过的链接显示为蓝色字体并 带有下画线。访问过的链接显示为紫色并带有下画线。单击链接时,链接显示为红色并带 有下画线。 超级链接即跳转到另一个页面,<a>…</a>标签有一个href属性负责指定新页面 的地址。href指定的地址一般使用相对地址。 例3-4 超级链接的设置。 <!DOCTYPE html> <html> <head> <title>超级链接的设置</title> </head> <body> <a href="http://www.baidu.com">百度</a></body> </html> 网页显示效果如图3-15所示。 单击“百度”链接,跳转后的界面如图3-16所示。 从图3-15中看到超级链接的默认样式,当单击页面中的链接,页面将跳转到同一目录 HTML页面设计 第3章 图3-15 超级链接的设置 图3-16 链接跳转界面 下的百度界面(htp:biu.om )。当单击浏览器的“后退”按钮,回到超级链接 //www.adcHTML页面时,文字链接的颜色变成了紫色,告诉浏览者此链接已经被访问过。 2)修改链接的窗口打开方式 默认情况下,超级链接打开新页面的方式是自我覆盖。根据浏览者的不同需要,可以 指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置。 使用target属性可以定义被链接的文档在何处显示,它的常用值如下。 ●_blank:在新窗口打开。 ●_parent:在上一级窗口打开,常在分帧的框架页面中使用。 ●_self:在同一个窗口打开,默认值。 ● top:在浏览器的整个窗口打开,将会忽略所有的框架结构。 链接添加提示文字 很多情况下,超级链接的文字不足以描述所要链接的内容,超级链接标签提供了title 3)给(_) 属性,能方便地为浏览者给出提示。title属性的值即为提示内容,当浏览者的光标停留在 超级链接上时,提示内容才会出现,这样不会影响页面排版的整洁。 例3- 5 给超级链接添加提示文字。 基于Web技术的物联网应用开发 42 <!DOCTYPE html> <html> <head> <title>超级链接的设置</title> </head> <body> <a href=""http://www.baidu.com"" target="_blank" title="这是一段页面提示文 字,单击本链接将会跳转到百度界面。">进入列表的设置页面</a></body> </html> 网页显示效果如图3-17所示。 图3-17 为链接添加提示文字 4)什么是锚 很多网页文章的内容比较多,导致页面很长,浏览者需要不断地拖动浏览器的滚动条 才能找到需要的内容。超级链接的锚功能可以解决这个问题,锚(anchor)引自于船上的 锚,锚被抛下后,船就不容易飘走、迷路。实际上锚就是用于在单个页面内不同位置的跳 转,有的地方也称为书签。 超级链接标签的name属性用于定义锚的名称,一个页面可以定义多个锚,通过超级 链接的href属性值名称跳转到对应的锚。 例3-6 设置锚的位置。 <!DOCTYPE html> <html> <head> <title>基于Web 技术的物联网应用开发</title> </head> <body> <a name="top">回到顶部</a> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> 第 3 章 HTML页面设计 43 <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <p>什么是物联网? 介绍物联网相关技术</p> <a href="#top">回到顶部</a> </body> </html> 图3-18 设置锚的位置 当浏览者单击超级链接时,页面将自动滚动到 href属性值名称的锚的位置。页面显示效果如图3-18 所示。注 意:定义锚的标签<aname=""></a>内不 一定需要具体内容,只是做一个定位。 2.图像超链接 人们经常会遇到以图片作为超链接的方式,而且 有时会在同一张图片上有不同的链接,这种链接区域 称为热区。图像的超链接也是通过<a>标签协助完 成的,设置链接的图片会出现蓝色边框,这个边框颜色 也可以在<body>标签中设定。 给一个图像设置超链接的方法和文本链接类似, 其语法格式为: <a href="链接地址" ><img src="图像的地址"></a> 例3-7 图像超链接。 <html> <body> <p> 将图片作为链接: <a href="http://www.126.com/"> <img border="0" src="fire.png" /> </a> </p> </body> </html> 基于Web技术的物联网应用开发 44 显示效果如图3-19所示。 图3-19 图片链接 单击图片后,自动跳转到http://www.126.com/电子邮箱页面。 3.文件路径 如果在引用文件时(如加入超链接或者插入图片等)使用了错误的文件路径,那么就会 导致引用失效(无法浏览链接文件或者无法显示插入的图片等)。 HTML有两种路径的写法:相对路径和绝对路径。 1)相对路径 (1)同一个目录的文件引用。 如果源文件和引用文件在同一个目录里,直接写引用文件名即可。 现在建立一个源文件info.html,在info.html里要引用index.html文件作为超链接。 假设info.html路径是C:\1\2\3\4\info.html。 假设index.html路径是C:\1\2\3\4\index.html。 在info.html加入index.html超链接的代码应该写为: <a href="index.html">相对目录</a> (2)表示上级目录。 ../表示源文件所在目录的上一级目录,..\..\表示源文件所在目录的上上级目录,以此 类推。假 设info.html路径是C:\1\2\3\4\info.html。 假设index.html路径是C:\1\2\3\index.html。 在info.html加入index.html超链接的代码为: <a href="..\index.html">index.html</a> 假设info.html路径是C:\1\2\3\4\info.html。 假设index.html路径是C:\1\2\index.html。 在info.html加入index.html超链接的代码应该写为: <a href="..\..\index.html">index.html</a> 第 3 章 HTML页面设计 45 假设info.html路径是C:\1\2\3\4\info.html。 假设index.html路径是C:\1\2\3\5\index.html。 在info.html加入index.html超链接的代码应该写为: <a href="..\5\index.html">index.html</a> (3)表示下级目录。 引用下级目录的文件,直接写下级目录文件的路径即可。 假设info.html路径是C:\1\2\3\4\info.html。 假设index.html路径是C:\1\2\3\4\5\index.html。 在info.html加入index.html超链接的代码应该写为: <a href="5\index.html">index.html</a> 假设info.html路径是C:\1\2\3\4\info.html。 假设index.html路径是C:\1\2\3\4\5\6\index.html。 在info.html加入index.html超链接的代码应该写为: <a href="5\6\index.html">index.html</a> 2)绝对路径 HTML绝对路径(absolutepath)指带域名的文件的完整路径。 绝对路径就是主页上的文件或目录在硬盘上的真正路径。使用绝对路径作为链接路 径比较清晰,但是也存在一定的缺陷,如果把文件夹改名或者移动以后,那么所有的链接都 要失败,这样就必须对所有的HTML文件的链接重新编写,这样会带来很多麻烦。 例如,有个页面index.htm,该页面的绝对路径为D:\html\index.htm,页面中有一个 图片位置为D:\html\img\buy.ipg,如果在这台计算机上可以很顺利地通过页面访问这个 图片,但是如果将这些文件移动到其他位置进行发布,并没有放到D盘中,那么就会因为这 个路径的指定而找不到该图片。 引用外部.css或.js文件的路径问题将在CSS以及JavaScript中介绍。 3.2.2 HTML头部信息 <head>与</head>之间的区域就是头部信息。根据前面所讲,HTML基本结构由 顶部、头部和主体(<body>…</body>)组成。帮助浏览器理解页面的信息都包含在 <head> 标签中。 例3-8 设置HTML头部信息。 <!DOCTYPE html> <html> <head> 基于Web技术的物联网应用开发 46 <meta charset="utf-8" /> <title>网页标题</title> </head> <body> <!--这里是网页内容--> </body> </html> 在这个最简单的例子里,<head>标签里只包含<meta> 和<title> 两个标签。其 中,<meta> 标签有一个charset属性,告诉浏览器这个页面使用的是UTF-8编码。而 <title> 标签中的文本会在页面显示时作为整个页面的标题出现在浏览器窗口顶部的标 题栏中。上面模板中页面的标题是“网页标题”。 页面显示如图3-20所示。 图3-20 网页标题显示 关于<title>,说明如下。 索引擎会给<title>标签中的文字内容赋予很高的权重,而且这些文字也会作为网页 标题出现在搜索结果列表中。为此,千万不要让那些“欢迎光临我的网页!”之类的废话占 据你的<title>标签。一定要让这些文字简洁、明确,而且包含目标读者在搜索你的网页 内容时会使用的关键词。 <head>标签里面还会包含一些其他属性,具体属性将在后面章节中介绍。 3.2.3 HTML列表 HTML包含专门用于创建项目列表的元素。可以创建普通列表、编号列表、符号列表 图3-21 三种列表 以及描述列表,可以在一个列表中嵌套另外一个或多个列表。所有 的列表都是由父元素和子元素构成的。父元素用于指定要创建的列 表的类型,子元素用于指定要创建的列表项目类型。下面列出了三 种列表类型以及组成它们的元素。 (1)有序列表:ol为父元素,li为列表项。 (2)无序列表:ul为父元素,li为列表项。 (3)描述列表:dl为父元素,dt和dd分别代表dl中的术语和描 述。描述列表在HTML5之前称为定义列表。 在这些类型中,无序列表是网页上最为常见的列表类型。三种 列表效果如图3-21所示。 1.有序列表 有序列表(orderedlist)每个列表项前都标有数字,表示顺序。排 序列表由<ol>开始,每个列表项由<li>开始。如果列表项的顺序对于列表来说非常关