1. 首页
  2. 网站搭建
  3. HTML基础知识

相对路径和绝对路径的区别是什么?各自的优缺点对比

  相对路径绝对路径的区别是什么?各自的优缺点对比

  学习绝对路径和相对路径的知识对SEO站长来说用处是非常大的,可以说是每个网站运营人员必备的技能。很多时候,我们网站需要修改图片或者CSS等,都需要通过路径来查找文件所在位置,然后才能正确修改。下面是山西SEO教程自学网的一点经验心得,做一点总结和思考。

相对路径和绝对路径介绍

  1、绝对路径

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

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

  还有超链接文件位置,也属于绝对路径,例如http://www.seoshisha.com/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”文件来说,是在其所在目录的上级目录里,则引用图片的语句应该为:

<imgsrc="../icon.jpg"/>

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

<imgsrc="../img/icon.jpg"/>
相对路径图解

  3、虚拟路径

  将文件上传到远程服务器后,这些文件驻留在服务器本地目录树中的某一个文件夹中。例如,在运行MicrosoftIIS的服务器上,主页的路径可能如下所示:c:\Inetpub\wwwroot\accounts\users\jsmith\index2.htm此路径通常称为文件的物理路径。但是,用来打开文件的URL并不使用物理路径。它使用服务器名称或域名,后接虚拟路径(这里说一下虚拟目录:虚拟目录,是对Http访问而言的,用户在浏览网站或FPT时显示的目录结构。例如你设置了E:\Website为访问目录,那么E:\Website为虚拟目录的根目录;E:\Website\Image,就变成了\Image.)。所以接上面的例子,虚拟路径可以写成

<imgsrc="/img/icon.jpg"/>

  整理一下

  “./”代表当前目录等同于

<imgsrc="img/icon.jpg"/>

  “../”代表上一级目录

  “/”当前根目录,是相对目录;

<imgsrc="/img/icon.jpg"/>

  “~/”Web应用程序根目录。ASP.NET启用了Web应用程序根目录运算符(~),在服务器控件中指定路径时,可以使用该运算符。ASP.NET会将~运算符解析为当前应用程序的根目录。可以结合使用~运算符和文件夹来指定基于当前根目录的路径。

<asp:imagerunat="server"id="Image1"ImageUrl="~/Images/SampleImage.jpg"/>

   在该示例中,图像文件将从Web应用程序根目录下的Images文件夹中直接读取,无论该页面位于网站的什么位置。

相对路径和绝对路径的使用技巧及其优缺点对比

  1、如何使用绝对路径

  绝对路径指的是绝对位置,完整地描述了目标的所在地,所有目录层级关系是一目了然的。

  例如博主想要修改http://www.seoshisha.com/images/weixin.jpg这张图片,该图片链接是一个绝对路径,从图片路径可以看到,weixin.jpg图片是在空间的根目录下的images文件夹中,可直接前往根目录images文件夹中就可以找到该图片,然后下载下来进行修改再覆盖即可。

  绝对路径的优点:一般来说,绝对路径更加直观明了,如果自己的网页使用绝对路径,当有人copy我们的网页到自己网站,或者将网页保存到本地电脑中,里面的链接图片等都是连接到自己的网站。这就说明无论网页处在哪个位置,都能指向正确的URL。

  绝对路径的缺点:内容页面比较固定,修改一个绝对地址就改变一个,其他路径不会发生变化,工作效率上比相对路径要差,但对新手站长来说,掌握绝对地址可能更加适应。

相对路径和绝对路径

  2、如何使用相对路径

  相对路径指的是相对于当前文件的路径,相对路径通常用几个特殊符号来表示,下面来看看几种常见的表现形式及其代表的意义:

  “../”代表当前文件所在目录的上一级目录。“../../”代表当前文件所在目录的上上级目录。“../../../”可以依次类推。“/”代表根目录。“./”表示当前目录,HTML中,可以省略。

  例如上面举例的http://www.seoshisha.com/images/weixin.jpg图片链接,若用相对路径表示就是/images/weixin.jpg,前面要有个”/”,表示相对于站点根目录的路径。

  相对路径的优点:网页在本地进行测试时很方便,不需要域名就可以测试然后上线;节省代码,减少网页体积;还有就是文件搬移也比绝对地址来的快。

  相对路径的缺点:页面位置发生变化时,就会出现大量的死链接,链接很容易失效。

  总结:其实无论是绝对路径也好,相对路径也罢,对于搜索引擎SEO而言是没多大区别的,相对地址节省的那一点代码完全可以忽略不计。更多的一般是涉及工作方便的问题,如果网页小改的话可以用绝对路径。一般来说,网页使用相对路径比较不容易出错。SEO站长学习绝对路径和相对路径的知识是非常有帮助的,修改图片和CSS等都需要学会查找路径,掌握技巧之后修改网页就非常得心应手了。

  以上就是山西SEO教程自学网对相对路径和绝对路径的区别是什么?各自的优缺点对比的介绍,希望可以帮到你!

原创文章,作者:David,如若转载,请注明出处:http://www.seoshisha.com/jianzhan/html/xiangjueduilj.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

15317703291

在线咨询:点击这里给我发消息

邮件:2692003558@qq.com

 

QR code