网站相对 绝对路径 html,解惑页面中的相对路径和绝对路径

写在前面：

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

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

html 文件中引入资源(js、css、img等)

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

那么，这些相对地址到底相对的是谁，谁，谁 ？？？

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

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

实验设置

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

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

body{

background: red;

background-image: url('./2.png');

}

div{

width: 200px;

height: 200px;

background-color: yellow;

background-image: url('/3.png');

}

实验结果

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

结果分析

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

html 中引入的资源(包括js、css、img)

css 中引入的资源

结论：

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