![精通HTML+CSS网页开发与制作](https://wfqqreader-1252317822.image.myqcloud.com/cover/895/26793895/b_26793895.jpg)
2.8 网页超链接(Anchor)
HTML中的H就是Hypertext(超文本)的缩写,超文本链接语言的精髓就是链接,通过链接才可以把世界各地的网页链接到一起成为互联网。链接是网页中极为重要的部分,单击文档中的链接,即可跳转至相应的位置。正是因为有了链接,用户才可以在不同的网页中来回跳转,从而方便地查阅各种各样的知识,享受网络带来的无穷乐趣。
2.8.1 超链接的概念
通过超链接浏览不同的网页就是从一个文档跳转到另一个文档、从一个位置跳转到另一个位置、从一个网站跳转到另一个网站的过程,而这些过程都是通过链接来实现的。
超链接包含两部分内容:一是链接地址,即链接的目标,可以是某个网址或文件的路径,对应为<a>标签的href属性;二是链接文本或图像,单击该文本或图像,将跳转到href属性指定的链接地址,超链接的基本语法如下:
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-T32_33405.jpg?sign=1738895323-KbpLqHsOhvCmLRzeL6xv0jPHJN5Uqomn-0-da3e9f40d89413d943d1336d84df5f30)
其中,href表示链接地址的路径。target指定链接在哪个窗口打开,常用的取值有_self(自身窗口)和_blank(新建窗口)。
超链接既可以是文本超链接,也可以是图像超链接。例如,示例2.13中两个链接分别表示文本超链接和图像超链接,单击这两个超链接均能在一个新的窗口中打开百度页面。代码如示例2.13所示。
示例2.13:
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-T32_19620.jpg?sign=1738895323-k5yYja2ETK5H0rDs79FGap8FbthrQi6P-0-fc2229bf9026660e873d01e7672285eb)
在浏览器中打开页面并单击超链接,显示效果如图2.16所示。
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-P32_12997.jpg?sign=1738895323-Ovw1aFIfF2H5twTp4jbVnBCRWIPSHHL4-0-b4210efc984332201cfd7d891c9d2da8)
图2.16 超链接属性
根据链接地址是指向站外文件还是站内文件,链接地址又分为绝对路径和相对路径。
绝对路径:指向目标地址的完整描述,一般指向本站点外的文件。例如:
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-T32_33406.jpg?sign=1738895323-GR0kCBJXyxqiRck8lHKJ3pytX1DYFn1K-0-ca5ff97f2a706b590b9f5f14f2f71361)
相对路径:相对于当前页面的路径,一般指向本站点内的文件,所以一般不需要完整的URL地址的形式。例如:
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-T32_33407.jpg?sign=1738895323-MPSgEe3J0z6y7YxlPIPbhIji5zvpGifr-0-a644a1942d1c213a340f078cec155a85)
表示链接地址为当前页面所在路径的“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/页面间超链接,分别指向新闻中心页面和校企合作页面。
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-P33_13037.jpg?sign=1738895323-x7RltjsLZCE76Ccm4LGyBNzHm8Ib80CG-0-66b0f05575366e12d3d4d1f884377815)
图2.17 页面间链接样式
2.锚链接
常用于目标页内容很多,需定位到目标内容中的某个具体位置时。当单击某个超链接时,将跳转到对应的内容介绍处,这种方式就是前面说的从A页面的甲位置跳转到本页面中的乙位置,语法结构如下:
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-T33_19621.jpg?sign=1738895323-k3PU7ILEfdeA9sSvuHa0fjJ4BHV3VOQV-0-5898e0658e99807f898d8bc950a2e07a)
其中,name为<a>标签的属性,c4为标记名,其功能类似古时用于固定船的锚(或钩),所以也称为锚名。代码如示例2.14所示。
示例2.14:
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-T33_19622.jpg?sign=1738895323-NubEQvYqYh8pLmklISV6I4zoLwyfHl7B-0-569b95f7f457e1dc809bc23a95de3221)
在浏览器中预览网页,效果如图2.18所示。单击页面中的超链接,即可将“第4章”的内容跳转到页面顶部。
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-P34_33500.jpg?sign=1738895323-Q2bar4XqglwV4D57NFpa9MuuynpVg9b2-0-5c2c09b56686f489468eef73e17262ad)
图2.18 锚链接
3.功能性链接
功能性链接比较特殊,当单击超链接时不是打开某个页面,而是启动本机自带的某个应用程序,如常见的电子邮件、QQ和MSN等。接下来以最常见的电子邮件超链接为例,当单击“联系我们”邮件超链接,将打开用户的电子邮件程序,并自动填写“收件人”文本框中的电子邮件地址。电子邮件链接的用法是:“mailto:电子邮件地址”,例如:
![](https://epubservercos.yuewen.com/449AF5/15253390305248006/epubprivate/OEBPS/Images/Figure-T34_33513.jpg?sign=1738895323-wUH4YLJWdMImhZxlYgAXX75WOQjJfdpT-0-aca8cca0235e161277aa89dacbb5c58e)