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

转载 作者microkof(http://www.jianshu.com/u/eec05fd43014)

我们在HTML/CSS/JS代码中经常会写一些文件的相对路径和绝对路径，绝对路径还好说，相对路径到底他妈的相对的谁呢？恐怕很多人都不敢说完全弄清楚了。尤其是现在的开发过程，有开发环境、测试环境、部署环境，每个环境的相对路径可能又有区别。今天我就全面做测试，测试到底他妈的都是相对谁。
基础知识
../
、./
、/
、只写文件名，这四种情况分别代表什么？
../
代表父级目录，连写的话，比如../../
表示往上追溯两级目录
./
代表当前目录，连写的话无意义
/
代表网站根目录，就是服务器www目录
只写文件名，跟./
效果一样

HTML文件代码中的相对路径
测试起来很简单，找一个路径比较深的网页，然后控制台输入document.write('<a href="../a/b/c.html">link</a>')

结论：HTML代码中的相对路径就是以本HTML文件所在目录开始计算。
CSS文件代码中的相对路径
CSS文件中写相对路径的情况主要是设背景图和引入字体文件，我们试试：
HTML文件内容：
<link rel="stylesheet" type="text/css" href="../../page2/page22/2.css"><p class="a">fsfsfdsfsdfsgsd3gdfhf</p>

CSS文件内容：
@font-face { font-family: 'a'; src: url('../Lost in Wild.ttf');}.a { font-family: 'a';}

预览可以看到，p元素成功应用了字体。
结论：CSS文件内如果写相对路径，是基于CSS文件本身的，跟谁引入了这个CSS无关。
JS文件代码中的相对路径
HTML文件，路径是/page1/page11/1.html：
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="../../page2/page22/2.js"></script>

JS文件，路径是/page2/page22/2.js：
$.get('../2.html', function(data) { console.log(data);});

现在是2.html放在JS文件的上一级目录（也就是page2），跟HTML文件的page1目录无关。经测试，JS文件内写的'../2.html'
是无效的。然后我改成'../../2.html'
，就生效了。
结论：JS文件内的相对路径，也是从HTML文件所在位置开始计算的。
总结
HTML文件和JS文件中的相对路径，都是从HTML文件所在位置开始计算的。
CSS文件中的相对路径，是从CSS文件所在位置开始计算的。

怎么理解这种设定？
当初创世者怎么考虑的，咱们不去探讨，只是感受一下这种设定的好处：
JS因这种设定，就可以实现浏览器的跨域限制；JS文件是为HTML服务的，以HTML为核心更科学，而且除了ajax，JS文件很少再与其他文件产生关联；CSS文件内的img和字库，是为CSS服务的，当然应该相对于CSS文件所在位置进行计算。