3.3 超链接元素a
16 超链接元素a
超链接（Hyperlink）按照标准叫法称为锚（Anchor），是使用﹤a﹥标签定义的。超链接可以是一个字、词组、句子或图像。当网页中包含超链接时，在所有浏览器中，链接的默认外观是：未被访问的链接带有下画线而且是蓝色的；已被访问的链接带有下画线而且是紫色的；活动链接带有下画线而且是红色的。把鼠标指针移动到网页中的某个超链接上时，鼠标指针变为一只小手，单击可以从当前网页跳转到其他位置，包括当前页的某个位置、Internet、本地硬盘或局域网上的其他网页或文件，包括跳转到声音、图像等多媒体文件。
1.a元素
锚由标签﹤a﹥定义，在网页上建立超文本链接。通过单击一个词、句或图像，可从此处转到另一个链接资源（目标资源），目标资源有唯一的地址（URL）。具有以上特点的词、句或图像就称为热点。a元素的格式为：
﹤a href="URL"target="打开窗口方式"﹥热点﹤/a﹥
a元素中的属性说明如下。
1）href：规定超链接指向页面的URL。如果要创建一个不链接到其他位置的空超链接，可用“＃”代替URL。超链接目标可以是站内目标，也可以是站外目标；站内目标可以用相对路径，也可以用绝对路径，站外目标则必须用绝对路径。
2）target：超链接被单击后会产生网页跳转动作，该属性指定打开目标页面的方式。其属性值如下。
●_self：默认值，指在超链接所在的窗口中打开目标页面。
●_blank：在新浏览器窗口中打开目标页面。
●_parent：将目标页面载入含有该超链接的父窗口中。
●_top：在当前的整个浏览器窗口中打开目标页面。
2.用图像作为超链接热点
图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。格式为：
﹤a href="URL"target="打开窗口方式"﹥﹤img src="图像文件名"/﹥﹤/a﹥
【例3-4】 文本超链接热点和图片超链接热点示例。本例文件3-4.html在浏览器中的显示效果如图3-5所示。
图3-5 文本超链接热点和图片超链接热点
3.指向其他页面的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法（注意，应该尽量采用相对路径）。
（1）链接到同一目录内的网页文件
格式为：
﹤a href="目标文件名.html"﹥热点文本﹤/a﹥
其中，“目标文件名”是超链接所指向的文件。
（2）链接到下一级目录中的网页文件
格式为：
﹤a href="子目录名/目标文件名.html"﹥热点文本﹤/a﹥
（3）链接到上一级目录中的网页文件
格式为：
﹤a href="../目标文件名.html"﹥热点文本﹤/a﹥
其中，“../”表示退到上一级目录中。
（4）链接到同级目录中的网页文件
格式为：
﹤a href="../子目录名/目标文件名.html"﹥热点文本﹤/a﹥
表示先退到上一级目录中，然后进入目标文件所在的目录。
【例3-5】 指向其他页面的超链接示例。当前页3-5.html中包含两个超链接，分别指向“友情链接”页3-3.html和“图像元素示例”页3-4.html，如图3-6所示，单击超链接热点将分别打开图3-3和图3-5所示。
图3-6 页面之间的超链接
4.指向书签的超链接
书签就是用﹤a﹥标签对网页元素做一个记号，其功能类似于用于固定船的锚，所以书签也称锚记或锚点。如果页面中有多个书签超链接，对不同目标元素要设置不同的书签名。书签名在﹤a﹥标签的name属性中定义，格式为：
﹤a name="记号名"﹥目标文本附近的字符串﹤/a﹥
（1）指向页面内书签的超链接
要在当前页面内实现书签超链接，需要定义两个标签：一个为超链接标签，另一个为书签标签。超链接标签的格式为：
﹤a href="＃记号名"﹥ 热点文本 ﹤/a﹥
即单击“热点文本”，将跳转到“记号名”开始的网页元素。
【例3-6】 制作指向页面内书签的超链接。在当前页3-6.html的上部单击“[什么是超文本？]”链接时，将跳转到页面下方的“什么是超文本？”位置处，如图3-7所示。
图3-7 指向页面内书签的超链接
在验证本例效果时，可以将浏览器窗口缩小到只显示页面上半部分内容的大小，然后单击上部的“[什么是超文本？]”超链接，就可以看到页面自动定位到下方的“什么是超文本？”位置处。
（2）指向其他页面书签的链接
要在其他页面内实现书签链接，需要定义两个标签：一个为当前页面的超链接标签，另一个为跳转页面的书签标签。当前页面的超链接标签的格式为：
﹤a href="目标文件名.html＃记号名"﹥热点文本﹤/a﹥
即单击“热点文本”，将跳转到目标页面“记号名”开始的网页元素。
5.指向下载文件的超链接
如果链接到的文件不是HTML文件，则该文件将作为下载文件。指向下载文件的超链接格式为：
﹤a href="下载文件名"﹥热点文本﹤/a﹥
例如，下载一个软件的压缩包文件softsetup.rar，可以建立如下超链接：
﹤a href="softsrtup.rar"﹥下载﹤/a﹥
6.指向电子邮件的超链接
单击指向电子邮件的超链接，将打开默认的电子邮件程序，如FoxMail、Outlook Express等，并自动填写邮件地址。指向电子邮件超链接的格式为：
﹤a href="mailto：E-mail地址"﹥热点文本﹤/a﹥
例如，E-mail地址是Jack@163.com，可以建立如下超链接：
信箱：﹤a href="mailto：Jack@163.com"﹥和我联系﹤/a﹥
7.JavaScript超链接
如果链接到JavaScript代码，单击超链接将执行该JavaScript代码，其格式为：
﹤a href="javascript：代码；"﹥热点文本﹤/a﹥
javascript表示URL的内容通过JavaScript执行。
例如，执行JavaScript代码“alert（'Hello World'）；”，可以建立如下超链接：
﹤a href="javascript：alert（'Hello World'）；"﹥单击显示消息框﹤/a﹥
8.空超链接
空超链接是指未指派目标地址的超链接。空超链接用于向页面上的对象或文本附加行为。例如，可向空超链接附加一个行为，以便在鼠标指针滑过该超链接时会交换图像或显示绝对定位的元素。
创建空超链接有下面两种方法。
（1）﹤a href="＃"﹥热点文本﹤/a﹥或﹤a href=""﹥热点文本﹤/a﹥
虽然这也是空超链接，但它其实有锚点＃top的意思，会产生回到顶部的效果。
（2）﹤a href="javascript：void（0）；"﹥热点文本﹤/a﹥
href="javascript：void（0）；"的含义是让超链接去执行一个JavaScript函数，而不是跳转到一个地址。void（0）表示一个空的方法，它不做任何操作，这样会防止超链接跳转到其他页面。这么做往往是为了保留超链接的样式，但不让超链接执行任何实际操作。