解惑页面中的相对路径和绝对路径

写在前面：
最近做一个前后端结合的项目时，突然发现自己被页面中使用的相对路径搞糊涂了（PS：其实已经不是第一次了。。。之前有一次屡清楚了，但发现又忘记了，瞧我者好记性O(∩_∩)O）。所以我要趁这次好好记一下！

前端开发中使用相对路径的地方无非就两处：

• html 文件中引入资源（js、css、img等）

• css 文件中引入背景图片background-image

那么，这些相对地址到底相对的是谁，谁，谁 ？？？
以前我曾经傻傻地以为：“相对路径在哪里写的就相对于谁！”，只能说还是太年轻。

我做了个简单的实验来验证。

实验设置

页面地址为：http://example.com/beta/test

html 文件中引入资源（js、css、img）时，有些使用的是相对路径，有些使用的是绝对路径：

<link rel="stylesheet" href="./index.css">
<script src="/index.js"></script>
<img src="../1.png" alt="图片">

css 文件中引入背景图片时，同样的，有些使用的是相对路径，有些使用的是绝对路径：

body{
    background: red;
    background-image: url('./2.png');
}
div{
    width: 200px;
    height: 200px;
    background-color: yellow;
    background-image: url('/3.png');
}

实验结果

最终查看浏览器发出的请求分别为：

1. http://example.com/beta/index... (html 中引入的 css )

2. http://example.com/index.js (html 中引入的 js )

3. http://example.com/1.png (html 中引入的图片 )

4. http://example.com/beta/2.png (css 中引入的图片)

5. http://example.com/3.png ( css 中引入的图片)

结果分析

从浏览器最终发出的请求可以看出，html 和css 中引用资源时，不管是相对路径还是绝对路径，两种使用场景下 相对的对象 是不同的。

1. html 中引入的资源（包括js、css、img）

   • 相对路径：相对的是 网页本身的 URL，即 http://example.com/beta/test

   • 绝对路径：相对的是 网页 URL 的根路径，即 http://example.com

2. css 中引入的资源

   • 相对路径：相对的是 css 文件本身的 URL，即 http://example.com/beta/index...

   • 绝对路径：相对的是 网页 URL 的根路径，即 http://example.com

结论：
html 中引入资源的相对路径与 网页的 URL 有关，而css中则与 css 资源本身 URL 有关。但使用绝对路径时，不管是在 html 中，还是css中，都只与 网页 URL的根路径有关。