【前端】【笔记】浅谈个人对于相对路径与绝对路径在前端开发中的应用与理解

概念：举个例子，就好比你现在身处于上海，你跟出租车司机说，我要去人民公园，司机肯定不会把你拉到外省市的人民公园，但是如果你跟外地的网友聊天，你说我要去人民公园，他肯定会疑惑，你要去的是哪里的人民公园，你答，我要去的是上海市黄浦区的人民公园，人家就会明白你要去的具体位置，后者就可以理解为绝对路径，而前者，可以类比为相对路径。

有了这个概念，在前端开发中，我们再说两个需要知道的名词，当前文件、目标文件。

当前文件：代码所在的网页文件（html文件）

目标文件：需要引入/关联到当前文件的文件（图片、视频、压缩包、html文件等）

一、绝对路径

1.网络绝对路径：目标文件在万维网上的地址。

比如，https://img-home.csdnimg.cn/images/20201124032511.png

2.本地绝对路径：目标文件在计算机本地的地址。

比如，D:\Photo\photo1.jpg

二、相对路径

目标文件在当前文件的同级、下级或者上级。

随手画了一张图，方便下面举例子理解。

共有abcdef六个文件。

①目标文件在当前文件的同级或者下级：

Ⅰ.在a.html中引入b.jpg，那么

./b.jpg

b.jpg(./可以省略)

Ⅱ.在c.html中关联a.html，那么

./AA/a.html

AA/a.html(./可以省略)

Ⅲ.在f.html中关联a.html，那么

./A/AA/a.html

A/AA/a.html(./可以省略)

②目标文件在当前文件的上级：

Ⅰ.在d.html中关联c.html，那么

../c.html(开头../不可以省略)

Ⅱ.在d.html中关联f.html，那么

../../../f.html(开头../不可以省略)