2.8 网页超链接(Anchor)
HTML中的H就是Hypertext(超文本)的缩写,超文本链接语言的精髓就是链接,通过链接才可以把世界各地的网页链接到一起成为互联网。链接是网页中极为重要的部分,单击文档中的链接,即可跳转至相应的位置。正是因为有了链接,用户才可以在不同的网页中来回跳转,从而方便地查阅各种各样的知识,享受网络带来的无穷乐趣。
2.8.1 超链接的概念
通过超链接浏览不同的网页就是从一个文档跳转到另一个文档、从一个位置跳转到另一个位置、从一个网站跳转到另一个网站的过程,而这些过程都是通过链接来实现的。
超链接包含两部分内容:一是链接地址,即链接的目标,可以是某个网址或文件的路径,对应为<a>标签的href属性;二是链接文本或图像,单击该文本或图像,将跳转到href属性指定的链接地址,超链接的基本语法如下:
其中,href表示链接地址的路径。target指定链接在哪个窗口打开,常用的取值有_self(自身窗口)和_blank(新建窗口)。
超链接既可以是文本超链接,也可以是图像超链接。例如,示例2.13中两个链接分别表示文本超链接和图像超链接,单击这两个超链接均能在一个新的窗口中打开百度页面。代码如示例2.13所示。
示例2.13:
在浏览器中打开页面并单击超链接,显示效果如图2.16所示。
图2.16 超链接属性
根据链接地址是指向站外文件还是站内文件,链接地址又分为绝对路径和相对路径。
绝对路径:指向目标地址的完整描述,一般指向本站点外的文件。例如:
相对路径:相对于当前页面的路径,一般指向本站点内的文件,所以一般不需要完整的URL地址的形式。例如:
表示链接地址为当前页面所在路径的“login”目录下的“login.html”页面。假定当前页面所在的目录为“D:\root”,则链接地址对应的页面为“D:\root\login\ login.html”。
另外,站内使用相对路径时常用到两个特殊符号:“../”表示当前目录的上级目录,“../../”表示当前目录的上上级目录。
2.8.2 超链接的应用场合
在上网时,读者可能会发现,单击超链接时,有的链接到其他页面,有的链接到当前页面,还有的直接打开邮件。实际上根据超链接的应用场合,可以把链接分为3类。
(1)页面间链接:A页到B页,最常用,用于网站导航。
(2)锚链接:A页的甲位置到A页的乙位置,或A页的甲位置到B页的乙位置。
(3)功能性链接:在页面中调用其他程序功能,如电子邮件、QQ和MSN等。
1.页面间链接
页面间链接就是从一个页面链接到另外一个页面。如图2.17所示,http://www.itzpark.com/页面间超链接,分别指向新闻中心页面和校企合作页面。
图2.17 页面间链接样式
2.锚链接
常用于目标页内容很多,需定位到目标内容中的某个具体位置时。当单击某个超链接时,将跳转到对应的内容介绍处,这种方式就是前面说的从A页面的甲位置跳转到本页面中的乙位置,语法结构如下:
其中,name为<a>标签的属性,c4为标记名,其功能类似古时用于固定船的锚(或钩),所以也称为锚名。代码如示例2.14所示。
示例2.14:
在浏览器中预览网页,效果如图2.18所示。单击页面中的超链接,即可将“第4章”的内容跳转到页面顶部。
图2.18 锚链接
3.功能性链接
功能性链接比较特殊,当单击超链接时不是打开某个页面,而是启动本机自带的某个应用程序,如常见的电子邮件、QQ和MSN等。接下来以最常见的电子邮件超链接为例,当单击“联系我们”邮件超链接,将打开用户的电子邮件程序,并自动填写“收件人”文本框中的电子邮件地址。电子邮件链接的用法是:“mailto:电子邮件地址”,例如: