相对路径与绝对路径,在 Web 开发中我们会经常遇到,本文将尽可能详细的讲解相对路径与绝对路径的区别,并举例说明。


一、基本概念

  1. 相对路径(Relative Path): 相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。也就是指相对于当前位置的路径。
  2. 绝对路径(Absolute Path): 绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。HTML绝对路径指带域名的文件的完整路径。
  3. 区分: 假如你不知道当前路径,仍能根据路径找到文件,就是绝对路径,反之则是相对路径。相对路径当整加粗样式体移动时(文件中各部分相对位置不变),仍然有效,而绝对路径移动后就失效了。

二、使用方法

  1. 相对路径使用:

    1. 当前目录:
      当前目录的用 ./ 来表示。
      举例说明:

      • 路径:
        这里我们在index.html中引用图片1.png ,此时它们在同一个文件夹test1中。 这里我们在index.html中引用图片1.png
      • 代码:<img src="./1.png"/> 路径是 ./1.png。 注意,当前目录可以省略开头的./,即写成<img src="1.png"/>,也是可以的。
      • 效果:
        在这里插入图片描述
    2. 上级目录:

      上级目录的用../来表示。
      举例说明:

      • 路径:
        index在test1文件夹中,而我们要引用的图片在其上一级目录中。在这里插入图片描述
      • 代码:<img src="../1.png"/>路径是../1.png。
      • 效果:同上。

    3. 下级目录:

      下级目录直接写。
      举例说明:

      • 路径:
        如图,我们要引用的图片在目录test1中。![
      • 代码:<img src="test1/1.png"/>路径是test1/1.png。
      • 效果:同上。

  1. 绝对路径使用:
    如上面所展示的第三种情况,我们获得图片的绝对路径,为/Users/lianzhuotao/Desktop/test/test1/1.png。
    此时代码更改为<img src="/Users/lianzhuotao/Desktop/test/test1/1.png"/>
    效果和上面相同,可以正常显示。

三、区别

  1. 绝对路径
    优点: 若你使用绝对路径,如果有人抄袭你的网站内容,里面的链接还会指向你的网站,如果有人将你的网页保存到本地电脑中,里面的链接、图片、css、以及js仍然会连接到你的网站。并且如即使网页位置改变,里面的链接还是指向正确的URL。
    缺点: 内容页面比较固定,修改一个绝对地址就改变一个,其他路径不会发生变化,工作效率上比相对路径要差。在本机制作的时候不能使用绝对路径,因为链接应该指向真正的域名而不是测试机的。
  2. 相对路径
    优点: 内容移动方便,可以整个目录移动。方便进行本机测试。节省代码,减少网页体积。
    缺点: 页面位置发生变化时,就会出现大量的死链,链接很容易失效。
  3. 总之,一般来说,网页使用相对路径比较不容易出错。
    当我们使用绝对路径时,往往编辑器都不能把图片的路径解析出来,因此图片无法在网页中显示出来。在真正的网站开发中,对于图片或者引用文件的路径,我们100%都是使用相对路径的。因此,大家不必纠结绝对路径问题,只需要掌握相对路径的写法即可。[1]


参考:
[1]:http://www.lvyestudy.com/les_hj/hj_7.2.aspx
[2]:https://baijiahao.baidu.com/s?id=1600321393073248706&wfr=spider&for=pc
[3]:https://www.jianshu.com/p/c557a7ccc409

写在最后:

以上是我的学习记录,希望能给像我一样的新人一点帮助!

这是我的邮箱,欢迎交流学习。