3.1 超链接

超链接（hyperlink）是网页互相联系的桥梁，超链接可以看作一个“热点”，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置，以及Internet、本地硬盘或局域网上的其他文件，甚至跳转到声音、图像等多媒体文件。

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

3.1.1 超链接简介

1.超链接的分类

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

2.路径

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

（1）绝对路径

绝对路径是指包括服务器规范（网页一般使用http://）在内的完全路径。例如，http://www.adobe.com/support/dreamweaver/contents.html就是一个绝对路径。

必须使用绝对路径，才能链接到其他服务器上的文档。尽管对本地链接（即到同一站点内文档的链接）也可使用绝对路径链接，但不建议采用这种方式，因为如果将此站点移到其他域中，则所有本地绝对路径链接都将断开。对本地链接使用相对路径，也便于在本地站点内移动文件。

（2）根目录相对路径

根目录相对路径是指从站点根文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。站点根目录相对路径以一个正斜杠（/）开始，例如，/support/tips.htm是文件（tips.htm）的站点根目录相对路径，该文件位于站点根文件夹的support子文件夹中。

（3）文档目录相对路径

文档目录相对路径是指以当前文档所在位置为起点到被链接文档经过的路径，这种方式适合于创建本地链接。文档相对路径的基本思想是省略当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的部分。

3.1.2 超链接的应用

1.锚点标签<a>…</a>

锚点（anchor）标签由<a>定义，它在网页上建立超文本链接。通过单击一个词、句或图像，可从此处转到另一个链接资源（目标资源），这个目标资源有唯一的地址（URL）。具有以上特点的词、句或图像就称为热点。<a>标签的格式为：

href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL。target属性设定链接被单击后所要开始窗口的方式，可选值为：_blank，_parent，_self，_top。

2.指向其他页面的链接

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

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

格式为：

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

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

格式为：

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

格式为：

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

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

格式为：

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

【演练3-1】制作梦想橱柜页面之间的链接，当前页3-1.html中包含两个链接分别指向注册页和登录页，如图3-1所示。

代码如下：

3.指向书签的链接

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

（1）指向页面内书签的链接

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

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

【演练3-2】制作指向页面内书签的链接，在页面下方的“关于企业”文本前定义一个书签“about”，当单击页面顶部的“关于企业”链接时，将跳转到页面下方的关于企业位置处，如图3-2所示。

代码如下：

【说明】在验证本例效果时，可以把浏览器缩放到只显示页面上半部分信息的大小，然后单击顶部的“关于企业”链接，就可以看到页面自动定位到下方的“关于企业”位置处。

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

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

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

【演练3-3】制作指向其他页面书签的链接，在页面info.html的“关于企业”文本前定义一个书签“about”，当单击当前页面3-3.html中页面顶部的“关于企业”链接时，将跳转到页面info.html中“关于企业”位置处，如图3-3所示。

当前页面3-3.html的代码如下：

跳转页面info.html的代码如下：

4.指向下载文件的链接

如果链接到的文件不是HTML文件，则该文件将作为下载文件。指向下载文件的链接格式为：

例如，下载一个购物向导的压缩包文件guide.rar，可以建立如下链接：

5.指向电子邮件的链接

单击指向电子邮件的链接，将打开默认的电子邮件程序，如FoxMail、Outlook Express等，并自动填写邮件地址。指向电子邮件链接的格式为：

例如，E-mail地址是cat@163.com，可以建立如下链接：

3.1.3 案例——制作梦想橱柜服务指南页面

【演练3-4】制作梦想橱柜服务指南及下载的页面，本例文件包括3-4.html、2-5.html两个展示网页和guide.rar下载文件。在浏览器中显示的效果如图3-4和图3-5所示。

代码如下：

【说明】

①当把鼠标指针移到超链接上时，鼠标指针变为手形，单击“常见问题解答”链接则打开指定的网页2-5.html。如果在<a>标签中省略属性target，则在当前窗口中显示；当target="_blank"时，将在新的浏览器窗口中显示。

②在图3-5所示的网页中单击下载热点“梦想橱柜服务指南”，将打开“文件下载”对话框，将该文件下载到指定位置。