你真的知道绝对路径和相对路径吗？

相对路径_相对路径_相对路径

大家好我是子辰，今天我们聊聊绝对路径和相对路径，这是一个很基础但很重要的知识，很多同学可能还没有完全理解清楚。

绝对路径和相对路径是什么呢？它们有什么区别呢？它们又该如何使用呢？让我们一起来探讨一下吧。

首先，我们要明白，我们聊的是网络中的路径，而不是操作系统中的路径。

因为我们做前端开发绝大部分打交道的路径都是网络中的路径，比如 img 的 src ，link 的 href ，都是需要进行网络通信的。

网络中的路径其实就是 URL 地址，它由协议名、域名、端口、path 和 query 等部分组成。例如：:80/admin/index?id=1

那么，绝对路径和相对路径又是什么呢？简单来说，绝对路径就像一个完整的地址，无论你从哪里出发，都能找到目标；相对路径就像一个方向指示牌，需要根据你所在的位置来确定前进方向。

我们来看一个例子：

相对路径_相对路径_相对路径

我们页面上有一个 a 元素，找到这个 a 元素的 href 属性，发现它的值和我们书写的源代码不一样，我们书写的源代码是 ./b.html 但是得到的结果却是一个完整的 URL 地址，这是为什么呢？

因为像 a 元素、img 元素以及 ajax这些里边写的路径，像 ./b.html 这种写法是没有办法直接请求的，因为要去请求一个地址的话必须要是一个完整的 URL 地址，学过 http 同学这一点肯定都知道，所以当你还没有把路径写完整的时候，浏览器会帮你把路径补全，然后得到一个完整的 URL 地址。

那么这个 URL 地址其实就是绝对路径。

绝对路径

绝对路径也有简写，因为写一个完整的 URL 地址可能比较麻烦，而且将来可维护性也会有一些问题，所以我们有两种方式来简写：

第一种省略协议名：就是说 :5500/b.html 可以简写为 //127.0.0.1:5500/b.html 省略协议的部分。

一旦省略掉协议的时候，得到的结果浏览器还是会转换为完整的路径。

浏览器会把协议给你加上，那么这个协议哪来的呢？其实它会用当前页面的协议，跟当前页面的协议保持一致，这一点特别的有用。

比如你在本地开发的环境里是 http，在生产环境里是 https，那么在代码中将协议写死就不合适了，所以我们就可以利用省略协议名的方式来写。

这样子保证生产环境和开发环境都可以正常的运行，这是第一种省略办法。第二种同时省略协议名、域名、端口，也就是说这个路径可以写成这个样子：

相对路径_相对路径_相对路径

注意这是个绝对路径，前边的协议名、域名、端口都省略了，这种情况下协议名、域名、端口都会沿用当前页面的，如果说你请求的资源就是当前站点，那么你可以省略掉前面这三个部分。

协议名、域名、端口都属于绝对路径，绝对的意思表达的是这个路径与当前资源的 path 没有任何关系，比如：我们当前页面的路径是 :5500/index.html，那么绝对路径和 :5500 是有关系的，而和 /index.html path 没有任何关系，无论 path 怎么变化，/b.html 生成出来的 URL 地址都是唯一的，这就是绝对的含义。

相对路径

说完了绝对路径，我们再说相对路径，很多同学静态页面写多了，始终觉得这个相对路径是相对于文件夹的，那子辰问你一个问题：

这两个地址都指向同一个页面，那你说这个页面在哪个文件夹？它是在根目录下文件名叫 admin，还是在 admin 这个文件夹下，文件名叫 index.html？

URL 地址跟文件夹和文件结构本身就没有必然的联系，相对路径是相对于当前页面 path 这一部分的，我们来看看怎么相对的：

比如我们有一个页面地址，页面中有一个 ajax 请求，无论是相对路径还是绝对路径最终都必须有一个完整的 URL 地址，不然无法请求，相对路径只是方便我们书写而已，那么现在这种情况如何生成 URL 地址呢？

首先协议、域名、端口直接拿过来，ajax 请求是 ./ 开头，就意味着 path 部分最后一个 / 之前的部分 /admin/，于是这个就得到了这样的地址，这个 ./ 是可以省略的，结果还是一样的，不过子辰不是很建议省略。

除了 ./ 之外，还有 ../，这个表示 path 部分倒数第二个 / 之前的部分，如果请求的是 ../ 那么地址就是。

这才叫相对路径，相对的是 path。

使用的抉择

那么我们平时书写的时候到底写绝对路径还是相对路径呢？

如果说你的资源跟当前页面的资源相对位置，不太会发生变化的时候就写相对路径：

就比如上图即使页面的文件夹变化但是相对路径不会变，就是用相对路径。