网页中超链接的路径

陈英+黄小花

摘要：该文围绕网页中超链接路径而展开，介绍了网页中的三种超链接路径：绝对路径、相对于站点根目录路径、相对于文档的路径。详细描述了三种超链接路径的特点、表示方法、实现超链接路径的原理和过程，分析总结了三种超链接的利弊和应用情况。

关键词：网页中超链接；超链接路径；绝对路径；相对路径

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2015）26-0016-02

The Path of Hyperlinks in Web Pages

CHENG Ying， HUANGXiao-hua

（Department of Information Engineering Jiangxi Vocational and Technical College of Communication， Nanchang 330013， China）

Abstract： This paper is based on the hyperlink path of the web page， and introduces three kinds of hyperlink path： absolute path， relative to the site root directory path， relative to the document path. The characteristics of three kinds of hyperlink paths， the principle and the process of realizing the hyperlink path are described in detail， and the advantages and disadvantages of the three kinds of hyperlink are analyzed and summarized.

Key words： hyperlink； hyperlink path； absolute path； relative path

互联网世界之所以四通八达，是因为有了超链接。超链接让相互独立的网页及网站组成了一个有机体。当用户将鼠标放在超链接对象上时，鼠标指针变成手形，单击鼠标左键即可快速地从当前页面跳转到一个目标位置，如果没有超链接将无法完成网页与网页之间、网站与网站之间的跳转。那么什么是超链接呢？

所谓的超链接是指通过单击鼠标即可从当前页面转到另一个位置的连接关系。当前页面叫做超链接的源，另一个位置叫做超链接的目标。这个链接的目标位置可以跟当前页面在同一个网站下，也可以是在不同网站下。链接的目标对象是多样的，可以是一个网页、一个文件（可执行文件、压缩文件等非网页文件）、一张图片、一个电子邮件、一个应用程序、甚至是一个空的链接等。

要创建超链接，需要确定超链接的源文件与目标文件之间的路径。一般情况下，做好超链接的网页在本地机器上可以正常浏览，而一旦放到服务器上去时，却出现浏览器无法打开链接目标文件的错误， 这种情况多半是因为使用了错误的链接路径而导致的。为了解决这个令人疼的问题，我们需要来正确理解网页中超链接路径。

正确设置超链接的路径是确保超链接有效的先决条件是。网页中超链接的路径有：绝对路径和相对路径两种。而相对路径又包含：相对于文档的路径和相对于站点根目录的路径两种表达方式。以下将详细介绍这三种超链接路径。

1 绝对路径

绝对路径指的是用一串完整的路径来表示文件所处的位置。例如我们要把下图中A.html这个网页文件用绝对路径表示出来，这个网页文件是在本机上，那么它的绝对路径是F：＼网页制作＼football＼A.html，通过这串绝对路径我们就知道A.html这个文件的路径是在F盘根目录下的“网页制作”文件夹下的“football”子文件夹中，计算机按照这串路径最终找到所需要的文件。绝对路径是描述文件位置最明显的一种方法，用户不需要知道其它任何信息，也不需要做任何的判断就可知道文件所处的位置，我们平时在“我的电脑”或“资源管理器”中看到的路径使用的就是绝对路径。

有时我们要访问的文件不是存放在本机上，而是放在远程服务器上，这时的绝对路径可用一串网址来表示。如我们要访问网易网的新闻首页index.html，它的绝对路径表示方法应该是：http：//www.163.com/news/index.html，其中http：//表示使用的协议名称为超文本传输协议，这串绝对路径表示index.html文件放在www.163.com这台远程服务器的根文件夹下的news文件夹中。

例如现在我们使用绝对路径做超链接：我们要将如图所示中的index.html页面超链接到A.html页面，使用F：＼网页制作＼football＼A.html即可表示A.html页面的绝对路径。

使用绝对路径做超链接，在被链接的文件移动了位置或是网站放到远程服务器上时，会出现找不到被链接文件的情况。如在本机上我们根据绝对路径F：＼网页制作＼football＼A.html可以正常找到A.html页面，但如果我们在制作过程中移动了A.html页面的位置（把该文件放到了其它的目录下），这时我们根据原来的绝对路径是无法定位到文件的。再如我们做好的网站发布到了服务器上，你的网站可能是放在服务器上的C盘或是D盘，或是AA目录下或是BB目录下，这时我们仍根据原来的绝对路径同样无法定位到文件。

所以在超链接时如果使用了绝对路径，我们应该谨慎。那么使用什么样的路径来表示超链接会比较可靠呢，我们可以使用相对路径。相对路径包括相对文档的路径和相对于站点根目录路径。

2 相对于站点根目录路径

相对于站点根目录路径是指以站点根文件夹为起点到被链接文档经由的路径，用“/”表示根目录。

假设当前站点根目录在F盘（不是在F：＼网页制作＼football文件夹下），现要从如上图所示的index.html页面超链接到A.html页面，我们用相对站点根目录路径/A.html来表示A.html的路径，即完整的绝对路径为F：/A.html。计算机在确定A.html文件位置时，是以当前站点根目录F盘为起点，由于A.html位于站点根目录下，所以直接用 A.html文件表示。再如，要从index.html页面超链接到如下图所示的me.html页面，我们用相对站点根目录路径/aboutme/me.html来表示me.html的路径。因为me.html文件位于站点根目录下的aboutme文件夹中，即完整路径为F：/abuotme/me.html。再如，要从me.html页面超链接到index.html页面，我们用相对站点根目录路径/index.html来表示index.html的路径，因为index.html文件直接位于站点文件夹中。总之，相对于站点根目录的路径的所有超链接都是从站点根目录开始。

使用相对于站点根目录路径做超链接也是有风险的。在本机上制作时要保证你的网站必须要位于站点根目录下，如我们刚刚举的例子中的网站就是直接放在站点根目录F盘下。如果你的网站不是直接放在站点根目录下，使用相对于站点根目录路径做超链接时会出现无法找到文件的错误。如你的站点是放在F：＼网页制作＼football文件夹下，A.html文件是位于“网页制作”文件夹中“football”子文件夹中，而用相对站点根目录的路径/A.html 表示的A.html是直接位于F盘下，此时是无论如何都无法找到A.html文件的。

相对于站点根目录路径另一种风险是在远程服务器上也可能会出现无法找到链接文件的错误。因为我们这里所说的站点根目录在你的网站没有发布前是相对于你本机来说的，当你把网站放到服务器上时，你的网站在服务器上的根目录不一定就是你本机上使用的根目录。这样当网站的根目录与服务器上所在根目录不同时，就会发生错误。 如我们刚刚列举的网站在你本机上是放在F盘下，当你发布到服务器上时，它的根目录可能是在D盘或是在E盘，或者不是放在服务器的根目录下，这样我们就无法找到链接的文件。

所以接下来我们可以通过使用相对文档的路径来解决这个问题。

3 相对文档的路径

相对文档的路径是以当前文档所在的位置为起点，沿着这个起点到被链接的目标文档所经过的路径。在使用文档相对路径来描述文件位置时可省去当前文档和被链接文档两个文件绝对路径中相同的部分，保留不同部分。

如上图所示A.html的绝对路径为F：＼网页制作＼football＼A.html

如上图所示index.html的绝对路径为F：＼网页制作＼football＼index.html

如要从index.html页面超链接到A.html页面，我们用相对路径来表示A.html所处的位置，只需在index.html页面的链接路径中输入A.html就可将该文件的路径表示出来。计算机在确定A.html文件位置时，是以当前文档index.html为起点，由于A.html和index.html在同一级下目录，所以沿着这个起点直接找到 A.html文件。再如，要从index.html页面超链接到如上图所示的me.html页面，我们用可用相对路径aboutme/me.html来表示me.html页面的位置，计算机在确定me.html文件位置时，是以当前文档index.html为起点，进入同一级目录aboutme下，再到me.htm页面。

如果起点文档和目标文档不在同一个目录下，我们可通过用“../ ”上一级目录，“../../”表示上上级的目录，以此类推。如要从me.html页面超链接到index.html页面，那么index.html页面的相对路径应该为../index.html，此处../表示从当前文档me.html开始到达上一层文件夹aboutme下，然后再到index.html文件。再如，要从如上图所示的C.html页面超链接到/index.html页面，那么index.html页面的相对文档路径应该为../../index.html，此处../../表示从当前文档C.html开始到达上一层文件夹gif后，再从gif到达上一层aboutme下，然后再到index.html文件。

使用相对文档的路径作超链接时，在被链接的文档移动了位置时，Dreamweaver会自动更新链接的路径。在网站被上传到服务器上时，也不会出现无法找到被链接文档的错误。因为在使用相对文档的路径时，两者路径中相同的部分并没有表示出来，他们的路径是相对于当前文档的位置，不论当前文档放在哪里，他们的相对关系没有变。

4 总结

绝对路径一般在创建外部超链接时使用，由于被链接的文档不在当前网站下，无法使用相对路径来表示，这时引用时只能用绝对路径。绝对路径的另一种使用情况是到某个指定网站的链接，这时输入的网址就是一个绝对路径。虽然也可以使用绝对路径链接同一网站内的文档，但应该尽量使用相对路径。

相对路径主要用于当前网站内部的超链接。相对文档的路径由于省略了路径中相同的部分，使得网站的移植更方便，不容易出错。一般来说，在制作内部链接时，我们应该尽量使用相对文档的路径，而不是相对于站点根目录路径。这是因为在本机上需确保站点必须位于根目录下，而且在远程服务器上站点根目录路径并不一定就是你在本机上的站点根目录，因此会导致链接出错，使用文档相对路径则没有这样的问题。

但在某些情况下，使用相对于站点根目录路径比使用相对文档的路径要方便。如我们制作好了一个关于版权信息的页面，这个页面为同时为多个不同目录下的网页所共用，由于这些网页所在目录不同，无法使用文档相对路径，此时，使用相站点根目录路径，让所有的链接都从站点根目录开始，则可以更方便快捷。

参考文献：

[1]梁芳.网页设计与制作[M].清华大学出版社，2010.

[2]涂敏.网页设计与制作[M].江西高校出版社，2004.

[3]互动百科：链接http：//www.baike.com/wiki/%E9%93%BE%E6%8E%A5

[4]百度百科：路径http：//baike.baidu.com/link？url=XQCBfdBuK_Uxctp3WI0RIT3reQ2U-wAfKR7vJSi3CS-2P-oprMqkBI9Y1_FMaVag