2.4 超链接标签

超链接标签在网站中应用最为广泛，超链接是一个网站的灵魂，在网站中用户可以通过单击菜单、文字、图片等跳转到其他页面中，或者可以从一个页面的某个位置跳转到其他位置，或者打开一个文件或一个应用程序等，这些都属于超链接的功能。

网页中的超链接按照链接路径的不同，可以分为三种类型：内部链接、锚点链接和外部链接。按照使用对象不同，网页中的链接又可以分为文本超链接、图片超链接、E-mail链接、锚点链接、多媒体文件链接、空连接等。

在网页中，一般文字上的超链接都是蓝色，文字下面有一条下划线。当移动鼠标指针到该超链接上时，指针会变成一只手的形状，单击后可以跳到其他页面。

2.4.1 创建超链接

链接有两个主要的部分：目标和标签。使用目标（destination）可以指定访问者单击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图片，下载文件等。不过，最常见的是连接到其他网页的链接，其次是连接到其他网页特定位置（称为锚，anchor）的链接。目标是通过编写URL定义的，通常只能在浏览器的状态栏中看到。链接的第二个部分是标签（label），即访问者在浏览器中看到的部分。激活标签就可以到达链接的目标。例如，航空公司网站上可能有这样的链接标签：预订航班。标签可以是文本、图片或二者兼有。浏览器通常会将标签文本默认显示为带下划线的蓝色文字。通过后续要学习的CSS可以很容易地改变这一样式。

使用＜a＞标签可以实现网页超链接，基本语法结构如下：

＜ahref=URL＞网页元素＜/a＞

其中href属性指定超链接所要链接的地址。表2-6给出了a标签的常用属性。

表2-6 ＜a＞标签的常用属性及描述

其中，target属性有多个值可以供选择，值_blank表示在新浏览器窗口中打开被链接文档；值_parent表示在父框架集中打开被链接文档；值_self为默认值，表示在当前页面窗口中打开被链接的文档，并取代当前页面文档；值_top表示在整个窗口中打开被链接文档；framename表示在指定名称的框架中打开被链接文档。

【例2-8】创建超链接，代码如下：

在本段代码中创建了一个超文本链接，href属性指定链接到本页面的同一目录的index.html页面；title属性为全局属性，规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text），因此当鼠标放在文本“回首页”上时会显示提示信息“茗茶馆主页”。

在浏览器中预览，显示效果如图2-8所示。

图2-8 超链接显示效果

上例中“首页”文本链接是在本页面的基础上需要有一个index.html的首页面，并且本页面和index.html页面需要在同一目录下，如果不在同一目录可以通过路径来具体指定，路径的表示方法在2.3.3中已经做了介绍，在此不再赘述。下面实例中将使用图片作为超链接，百度链接中需要写出完整的域名，否则会出现链接错误的提示。

2.4.2 创建图片链接

【例2-9】创建图片链接，代码如下：

在浏览器中预览，效果如图2-9所示。

图2-9 图片链接显示效果

本例中是创建了一个图片链接，需要准备图片素材，并存储在指定目录中，使用img元素在页面中添加图片，使用a元素创建了图片链接，本例中＜a＞标签增加了target属性，该属性指定了在何处打开链接的页面，_blank值表示在新窗口中打开百度页面。

2.4.3 创建电子邮件链接

【例2-10】创建电子邮件链接，代码如下：

在浏览器中预览效果如图2-10所示。本例是创建了一个电子邮件链接，其中href="mailto：someone@163.com？cc=someoneelse@163.com&bcc=someoneelse2@163.com&subject=hello%20w orld&body=这是一封测试邮件！"指定了邮件的收件人mailto、抄送cc、暗送bcc、邮件主题subject和邮件正文body。

单击链接后自动打开应用Outlook，如图2-11所示。

图2-10 电子邮件链接显示效果

图2-11 Outlook显示效果

用户可以在应用中继续编辑邮件，也可以直接发送。接下来介绍如何创建下载链接。

2.4.4 创建下载链接

【例2-11】创建下载链接，代码如下：

在浏览器中预览，效果如图2-12所示。

在超链接上单击鼠标右键，选择另存为，显示效果如图2-13所示。

图2-12 下载链接显示效果

图2-13 保存下载文件

在本例中，需要将提供给用户下载的文件存储在服务器上，并在属性href中指定文件的正确的位置，本例HTML范例页面位于ch2文件夹下。而两首歌曲存储在了ch5文件夹下，因此，超链接路径为href="../ch5/TryEverything.mp3"，其中“..”表示返回上一级目录。另外需要注意提供正确的文件名和扩展名。

2.4.5 链接到同一页面的不同位置

【例2-12】链接到同一页面的不同位置，代码如下：

在浏览器中预览，显示效果如图2-14、图2-15所示。

图2-14 锚点链接显示效果

图2-15 指向同一页面不同位置