我们在HTML/CSS/JS代码中经常会写一些文件的相对路径和绝对路径，绝对路径还好说，相对路径到底他妈的相对的谁呢？恐怕很多人都不敢说完全弄清楚了。尤其是现在的开发过程，有开发环境、测试环境、部署环境，每个环境的相对路径可能又有区别。今天我就全面做测试，测试到底他妈的都是相对谁。

基础知识

../、./、/、只写文件名，这四种情况分别代表什么？

../ 代表父级目录，连写的话，比如../../表示往上追溯两级目录
./ 代表当前目录，连写的话无意义
/ 代表网站根目录，就是服务器www目录
只写文件名，跟./效果一样

HTML文件代码中的相对路径

测试步骤：

在服务器建立/a/b/c/d目录。把1.html放到d里面，内容是：<a href="../x/y/z.html">link</a>

访问http://localhost/a/b/c/d/1.html，右击link，看属性，得到http://localhost/a/b/c/x/y/z.html，说明，../x/y/z.html的../是基于1.html的位置向上追溯了一层。

结论：HTML代码中的相对路径就是以本HTML文件所在目录开始计算，无论引入的文件是js还是css还是图片还是其他任何类型。

如果是在HTML文件内书写“行内js”和“行内css”，里面的相对路径当然也是相对于HTML文件的，毕竟没有别的参照物。

CSS文件代码中的相对路径

CSS文件中写相对路径的情况主要是设背景图和引入字体文件，测试步骤：

准备一个字体文件，可以随便下载一个，比如李旭科书法。

准备目录/a/b/c/d，1.css放在a目录，字体放在b目录，1.html依然在d目录。

1.html文件内容：

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/a/1.css">
<p class="a">李旭科书法</p>

1.css文件内容，'./b/lxksf.ttf'表示从a目录开始找b目录，然后发现这个ttf文件：

@font-face {
    font-family: 'a';
    src: url('../b/lxksf.ttf');
}
.a {
    font-family: 'a';
}

还是访问http://localhost/a/b/c/d/1.html，可以看到，p元素成功应用了字体。

image.png

结论：CSS文件内如果写相对路径，是基于CSS文件本身的，跟谁引入了这个CSS无关。

JS文件代码中的相对路径

测试思路是，让1.html ajax 2.html。

还是构建/a/b/c/d/目录，1.html放到d里，2.html放到c里，1.js放到a里。

1.html内容：

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="../../../1.js"></script>

2.html内容：

<strong>测试成功</strong>

1.js内容：

$.get('../2.html', function(data) {
    console.log(data);
});

然后还是访问http://localhost/a/b/c/d/1.html，在控制台可以看到，成功了：

image.png

结论：JS文件内的相对路径，也是从HTML文件所在位置开始计算的，跟js文件在哪无关。

总结

HTML文件和JS文件中出现的相对路径，都是从HTML文件所在位置开始计算的。
CSS文件中出现的相对路径，是从CSS文件所在位置开始计算的。

怎么理解这种设定？

当初创世者怎么考虑的，咱们不去探讨，只是感受一下这种设定的好处：

JS因为有了这种设定，就可以实现浏览器的同源限制。
JS文件是为HTML服务的，以HTML为核心更科学，而且除了ajax场合，JS文件里很少写相对路径。
而CSS文件，它大多是资源引用，比如引用img和字库和svg等，这些文件是为CSS服务的，它们跟css配合形成了一个整体，所以，当然应该相对于CSS文件所在位置进行计算。假如相对于HTML文件位置做计算，那就真乱套了。

谈谈HTML/CSS/JS代码中的文件相对路径