什么是相对路径？相对路径的具体写法和用法

什么是相对路径？

相对路径是指以当前文件资源所在的目录为参照基础，链接到目标文件资源(或文件夹)的路径。

假设，我们在一个A文件（比如a.html）中，链接另一个B文件(比如b.html)，也可以说是，当前文件A引用目标文件B，那么，相对路径就是以当前文件A所在的目录为参照基础，建立连接到目标文件B的路径；

改变当前文件A或目标文件B的目录，也就是说，把A或B放到不同的文件夹中，A和B的相对路径也会不同，所以，改变A或B的目录，它们之间的相对路径也会跟着发生变化！

相对路径特殊符号

在表示相对路径中，单点表示当前目录，双点表示上一级目录，反斜杠“/”表示分隔目录；

相对路径特殊符号有以下几种表示意义：

◆以“./”开头，代表当前目录和文件目录在同一个目录里，“./”也可以省略不写！

◆以"../"开头：向上走一级，代表目标文件在当前文件所在的上一级目录；

◆以"../../"开头：向上走两级，代表父级的父级目录，也就是上上级目录，再说明白点，就是上一级目录的上一级目录

◆以"/”开头，代表根目录

相对路径使用示例

假设，我们有一个网页文件index.html和一个图片文件tupian.png，其中，以index.html文件为当前目录作为参照基础，图片tupian.png文件为目标文件，那么，他们之间的相对路径有以下几种写法：

1、在同级目录里

如上图所示，当前文件index.html和目标文件tupian.png都在D:/website/web/里，

如果要在index.html文件中用相对路径引用tupian.png文件，其相对路径以"./"开头：

./tupian.png  //表示在同级目录里

也可以省略单点和反斜杠，也就是直接写目标文件的文件名tupian.png即可：

tupian.png

2、在上级目录或上上级目录里

如上图所示，目标文件tupian.png在当前文件index.html的上一级目录website里，在index.html文件中，用相对路径引用tupian.png文件，其相对路径以"../"开头，向上走一级，再找目标文件：

../tupian.png  //表示在上级目录里

而另一个目标文件img.png直接是在D盘根目录里，也就是在当前文件index.html上上级目录，即上一级目录的上一级目录，其相对路径以"../../"开头，向上走两级，再找目标文件：

../../tupian.png  //表示在上上级目录里

如果是上上上级目录，就向上走三级，用三个“../../../”，如有更多上级目录，则如此类推！

3、在下级目录里

如上图所示，目标文件tupian.png在当前文件index.html的下一级目录abc文件夹里，在index.html文件中，用相对路径引用下级目录的tupian.png文件，其相对路径以"./"开头，先写同级目录文件夹名，再写目标文件的文件名：

./abc/tupian.png  //表示在下级目录里

4、在根目录里

如果目标文件tupian.png在D盘符的根目录里，其绝对路径就是D:\tupian.png，用相对路径表示就是：

/tupian.png   //用一个反斜杠表示在根目录里

只要目标文件tupian.png在D盘的根目录下，无论当前文件index.html在D盘的什么位置都无关紧要，系统会自动地从当前D盘符的根目录开始查找tupian.png文件。

以上是本地盘符根目录的表示方法，另一种是域名根目录的表示方法，其实，两者表示方法是一样的。

比如，这个绝对路径：https://liudaima.com/tupian.png ，它的相对路径也是：

/tupian.png   //用一个反斜杠表示在根目录里

相对路径优缺点

1、优点：只要保持当前文件和目标文件的相对位置不变，它们之间的相对路径也不会改变，就算移动了整个目录，也可以保证相对路径是有效的！

比如，只要保持当前文件index.html和目标文件tupian.png在同一个目录中，不管你把他们一起移动到哪个文件夹或目录，也不管是什么盘符（C盘、D盘、E盘等），只要它们同在一目录下，那么，在index.html文件中引用tupian.png的相对路径（./tupian.png）始终是有效的。但这也是容易被人采集或抄袭的原因。

2、缺点：只要当前文件移动到其他不同的目录中，其相对路径也会随之发生变化，那么，之前未改变目录的相对路径也会失效；