前端中使用路径 / ./ ../ ../../ ../../../ 的含义 相对路径和绝对路径

转自:https://blog.csdn.net/cvper/article/details/79955412

第一个  /     这个斜杠代表的是根目录的意思,什么是根目录呢?

先看例子:F盘中有个文件夹vue_bamboos和一张图片 test-me.png

vue_bamboos下有一个文件夹 a ,  a文件夹中有一个文件b;

b文件夹下有一个index.html文件;

F---------------------------------------

vue_bamboos-------------------

a-------------------------

b------------------

index.html---

test-me.png---------------------

index.html:显示一张图片test-me.png, 这里我们使用就是根目录,也就是我们项目目录的上

一级,也就是 F 盘是我们的根目录;注意,我们的项目目录是vue_bamboos,但是

vue_bamboos不是根目录,它的上一级才是!!!

<body>
<img src="/test-me.png" alt="测试根目录">
</body>

第二个  ./    这个代表的是当前目录,也就是和我们的index.html 在同一级上;

假设我们的项目目录:

F-----------------------------------

vue_bamboos---------------

index.html-------------

test-me.png-----------

<body>
<img src="./test-me.png" alt="测试根目录">
<img src="test-me.png" alt="测试根目录">
</body>

也就是说我们可以这样写  ./test-me.png            或者省略  ./ 也是可以的 ,  直接写 test-me.png

第三个  ../            这个代表的意思是返回到上一级目录;

第四个  ../../         这个代表的是返回到上一级,再向上返回一级,返回了两级;

第五个  ../../../      这个比上面的多了一级,那么就是向上返回三级了;

。。。。。。。。

../         ../../         ../../../      这三个还是比较好理解的,因为使用的频率是挺高的,

但是   /    和   ./  就不是太常用了

相对路径和绝对路径:

(1)相对路径,就是在同一个网站下,不同文件之间的的位置定位。引用的文件是相对当前网页的位置而言的,根据这个相对位置得出相对路径。

(2)绝对路径,指的是完整的路径。

对于一个网站而言,外部文件或图片的引用都是使用相对路径,几乎不用绝对路径。

posted @ 2019-10-22 01:48  王二疯  阅读(3310)  评论(0编辑  收藏  举报