互联网全终端解决方案
020-37309704
HTML相对路径与绝对路径的区别及影响
2020-10-20 11:41 企业网站建设

对于一个HTML的初学者来说如何正确引用一个文件确实是经常遇见的一个问题。怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个网页中插入一张图片 如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。为了避免这些错误,正确地引用文件,我们需要学习一下HTML路径。

一、两者的含意

相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。HTML绝对路径(absolute path)指带域名的文件的完整路径。

绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

完整的描述文件位置的路径就是绝对路径,以web站点根目录为参考基础的目录路径。绝对路径名的指定是从树型目录结构顶部的根目录开始到某个目录或文件的路径,由一系列连续的目录组成,中间用斜线分隔,直到要指定的目录或文件,路径中的最后一个名称即为要指向的目录或文件。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

二、绝对路径与相对路径的区别

1.绝对路径

先说在本地计算机上,文件的绝对路径当然是指:文件在硬盘上真正存在的路径。

例如这个路径:D:/wamp/www/img/icon.jpg告诉我们icon.jpg文件是在D盘的wamp目录下的img子目录中。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

还有超链接文件位置,也属于绝对路径,例如http://www.img.net/img/icon.jpg 。

注意:有时候编好的页面,在自己的计算机上浏览一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了。因为静态HTML页面需要上传到网站,而在网站的应用中,通常我们使用"/"来表示根目录,/img/icon.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是要知道,这里所指的根目录并不是你的网站的根目录,而是你的网站所在的Web服务器的根目录。因为上传到Web服务器上时,可能整个网站并没有放在Web服务器的D盘, 有可能是F盘或H盘。即使放在Web服务器的D盘里,Web服务器的E盘里也不一定会存在“D:/wamp/www/img”这个目录,因此在浏览网页时是不会显示图片的。这也是应用绝对路径的风险。

2.相对路径

相对路径,顾名思义就是自己相对与目标位置。

假设 你要引入文件的页面名称为test.htm,它存在叫www的文件夹里(绝对路径D:/wamp/www/test.htm),那么引用同时存在www文件夹里的“icon.jpg”文件(绝对路径D:/wamp/www/icon.jpg),同一目录下相对路径icon.jpg;如果文件“icon.jpg”存在img文文件夹中(绝对路径D:/wamp/www/img/icon.jpg),那么相对路径img/icon.jpg。

相对路径可以避免上述根目录不同的问题。只要将网页文件及引用文件的相对位置与web服务器上文件相对位置保存一致,那么他们的相对路径也会一致。例如上面的例子,“test.htm” 文件里引用了“icon.jpg”图片,由于“icon.jpg”图片相对于“test.htm”来说,是在同一个目录的,那么只要这两个文件还是在同一个目录内,那么无论上传到Web服务器的哪个位置,在浏览器里都能正确地显示图片。

注意:相对路径使用“/”字符作为目录的分隔字符,而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“www”目录下的子目录,因此在“img”前不用再加上“/”字符。

在相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录,可以使用多个“../”。假设 “test.htm”文件所在目录为“D:/wamp/www/test.htm”,而“icon.jpg”图片所在目录为“D:/wamp/www”,那 么“icon.jpg”图片相对于“test.htm”文件来说,是在其所在目录的上级目录里,则引用图片的语句应该为:

假设 “test.htm”文件所在目录为“D:/wamp/www/test.htm”,而“icon.jpg”图片所在目录为“D:/wamp/www”,那 么“icon.jpg”图片相对于“test.htm”文件来说,是在其所在目录的上级目录里的子目录——“img”中,则引用图片的语句应该为:

三、绝对路径与相对路径对SEO的影响

绝对路径URL优点是:

1、如果有人抄袭、采集你的网站内容,抄袭者比较懒,连页面里面的链接一起原封不动地抄袭过去,绝对路径链接还会指向你的网站,增加网站外链及权重。

2、网站有RSS输出时,内容会被一些Feed聚合网站抓取显示。同样,页面里指向原网站的链接会被保留。

3、有助于预防和解决网址规范化问题,让蜘蛛更加确定我们网站的首选域。

假设我们希望被收录的URL是带www的版本,由于技术原因不能从http://jxbh.cn做301转向到http://www.jxbh.cn。所有页面中的链接使用绝对路径:http://www.jxbh.cn/website.html,http://www.jxbh.cn。链接绝对路径硬编码入html文件,这样就算有蜘蛛或用户偶然访问不带www的版本,如http://jxbh.cn/website.html,这个页面上的绝对路径链接还是会把蜘蛛和用户带回到www的URL版本,有助于搜索引擎蜘蛛识别到底哪个版本是规范化的。就算网页移动位置,里面的链接还是指向正确的URL。

绝对路径URL缺点是:

1、除非链接是动态插入的,不然不好再测试服务器上进行测试。因为里面的链接将直接指向真正域名的URL,而不是测试服务器上的URL。

2、除非链接是动态插入的,不然移动页面将比较困难。因为页面位置发生变化,其他页面连向本页面的链接却可能无法跟着变化,还指向原来的已经硬编码的绝对路径。

3、代码比较多。链接数量大时,多出来的字符可能使html文件变大不少。

相对路径正好相反。优点是:

1、移动内容比较容易,不用更新其他页面上的链接。

2、在测试服务器上进行测试也比较容易。

3、节省代码。

相对路径的缺点是:

1、页面移动位置,里面的链接可能也需要改动。

2、被抄袭和采集网站没有任何益处。不过很多采集软件其实是可以自动鉴别绝对路径和相对路径的,所以使用绝对路径有助于自己的链接也被抄到采集网站上,只有某些情况下是有效的。

3、搜索引擎解析URL时可能出错,不能正确读取页面上的链接URL。

如果不能做301转向,因而产生了严重的网址规范化问题时,使用绝对路径有助于解决网址规范化问题。如果文章被大量转载、抄袭,使用绝对路径可以带来一些外部链接。除此之外,使用相对路径比较简单。在正常情况下,相对路径不会对网站有什么副作用,绝对路径也不会有什么特殊好处。搜索引擎错误解析相对路径URL的可能性是非常低的。

相对路径与绝对路径没有绝对的答案,两者之间各有优缺点。