2.7 超链接

HTML的主要优点在于能够轻而易举地实现互联网上的信息访问、资源共享。HTML可以链接到其他的网页、图像、多媒体、电子邮件地址、可下载的文件等。

2.7.1 超链接概述

1.超链接的定义

超链接（Hyperlink）是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

超链接是一个网站的精髓，它在本质上属于网页的一部分，通过超链接将各个网页链接在一起后，才能真正构成一个网站。超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，从而将网站建设成一个丰富多彩的多媒体世界。

当网页中包含超链接时，其外观形式为彩色（一般为蓝色）且带下画线的文字或图像。单击这些文本或图像，可跳转到相应位置。鼠标指针指向超链接时，将变成手形。

2.超链接的分类

根据目标文件的不同，可将超链接分为页面超链接、锚点超链接、电子邮件超链接等；根据单击对象的不同，可将超链接分为文字超链接、图像超链接、图像映射超链接等。

3.路径

创建超链接之前必须先了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。

（1）绝对路径

绝对路径是包括通信协议名、服务器名、路径及文件名的完全路径。如链接清华大学信息科学技术学院首页，绝对路径是http://www.sist.tsinghua.edu.cn/docinfo/index.jsp。如果站点之外的文档在本地计算机上，比如链接D盘book目录下的default.html文件，那么它的路径就是file:///D:/book/default.html。这种完整地描述文件位置的路径也是绝对路径。

（2）根目录相对路径

根目录相对路径的根是指本地站点文件夹（根目录），以“/”开头，路径是从当前站点的根目录开始计算。比如一个网页链接或引用站点根目录下images目录中的一个图像文件a.gif，用根目录相对路径表示就是/images/a.gif。

（3）文档目录相对路径

文档目录相对路径是指当前文档所在的文件夹，也就是以当前文档所在的文件夹为基础开始计算路径。文档目录相对路径适合用于创建网站内部链接。它是以当前文件所在的路径为起点，进行相对文件的查找。

2.7.2 超链接的应用

1.创建锚点

锚点与超链接的文字可以在同一个页面，也可以在不同的页面。在实现锚点超链接之前，需要先创建锚点，通过创建的锚点才能对页面的内容进行引导与跳转。创建锚点的语法格式如下。

其中，锚点的名称可以是数字或英文字母，也可以是两者混合。在同一页面中可以有多个锚点，但锚点名称不能相同。创建超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL。

target属性用于设置超链接被单击后所要开始打开窗口的方式，有以下4种方式。

_blank：在新窗口中打开被链接文档。

_self：默认。在相同的框架中打开被链接文档。

_parent：在父框架集中打开被链接文档。

_top：在整个窗口中打开被链接文档。

2.在不同页面中使用锚点

在不同页面中使用锚点，就是在当前页面与其他相关页面之间创建超链接。根据目标文件与当前文件的目录关系，有4种写法。注意，超链接应该尽量采用相对路径。

（1）链接到同一目录内的网页文件

格式如下。

其中，“目标文件名”是超链接所指向的文件。

（2）链接到下一级目录中的网页文件

格式如下。

（3）链接到上一级目录中的网页文件

格式如下。

其中，“../”表示退到上一级目录中。

（4）链接到同级目录中的网页文件

格式如下。

表示先退到上一级目录中，再进入目标文件所在的目录。

3.书签超链接

在浏览页面时，如果页面篇幅很长，需要不断地拖动滚动条，给浏览带来不便。为了使浏览者既可以从头阅读到尾，又可以很快找到自己感兴趣的特定内容进行部分阅读，这个时候就可以通过书签超链接来实现。当浏览者单击页面上的某一“标签”，就能自动跳到网页相应的位置进行阅读，给浏览者带来方便。

书签就是用<a>标签对网页元素做一个记号，其功能类似于用于固定船的锚。如果页面中有多个书签超链接，对不同目标元素要设置不同的书签名。书签名在<a>标签的name属性中定义，格式如下。

（1）页面内的书签超链接

要在当前页面内实现书签超链接，需要定义两个标签：一个为超链接标签，另一个为书签标签。超链接标签的格式如下。

即单击“热点文本”，将跳转到“记号名”开始的网页元素。

（2）其他页面的书签超链接

书签超链接还可以在不同页面间进行链接。当单击书签超链接标题，页面会根据超链接中的href属性所指定的地址，将网页跳转到目标地址中书签名称所表示的内容。要在其他页面内实现书签超链接，需要定义两个标签：一个为当前页面的超链接标签，另一个为跳转页面的书签标签。当前页面的超链接标签的格式如下。

即单击“热点文本”，将跳转到目标页面“记号名”开始的网页元素。

4.下载文件超链接

当需要在网站中提供资料下载功能时，就需要为资料文件提供下载链接。如果超链接指向的不是一个网页文件，而是其他文件，如zip、rar、mp3、exe文件等，单击超链接时就会下载相应的文件。格式如下。

例如，下载一个包装指南的压缩包文件guide.rar，可以创建如下超链接。

5.电子邮件超链接

网页中的电子邮件地址超链接，可以使网页浏览者将有关信息以电子邮件的形式发送给电子邮件的接收者。通常情况下，接收者的电子邮件地址位于网页页面的底部。当用户单击电子邮件超链接，系统会自动启动默认的电子邮件软件，打开一个邮件窗口。格式如下。

例如，E-mail地址是angel@love.com，可以创建如下超链接。

2.7.3 案例——制作爱心包装下载专区页面

【例2-19】 制作爱心包装下载专区页面。本例文件2-19.html和2-19-doc.html在浏览器中的显示效果如图2-21、2-22所示。

页面2-19.html的代码如下。

页面2-19-doc.html的代码如下。

【说明】在下载专区页面中，将鼠标指针移动到下载文档的超链接时，鼠标指针变为手形，单击文档标题超链接，则打开指定的网页2-19-doc.html。如果在<a>标签中省略属性target，则在当前窗口中显示；当target="_blank"时，将在新的浏览器窗口中显示。