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

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

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

  • html 文件中引入资源(jscssimg等)

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

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

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

实验设置

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

html 文件中引入资源(jscssimg)时,有些使用的是相对路径,有些使用的是绝对路径:

<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 中引入的图片)

结果分析

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

  1. html 中引入的资源(包括jscssimg

  2. css 中引入的资源

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


WEB前端路上踩过的坑儿
作为一名刚入行的 WEB 前端,开发时总是会遭遇各种坑儿,一不小心就掉进坑里出不来了。。。为了不会再掉...

如果你问我:我最开心的事是什么?

4.9k 声望
1.2k 粉丝
0 条评论

如果你问我:我最开心的事是什么?

4.9k 声望
1.2k 粉丝
宣传栏