绝对路径与相对路径
发布在前端基础2014年11月26日view:9393
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

绝对路径很好理解,就是不管文件现在在哪个目录下,都是以根目录开始写路径,是从根目录开始的完整的路径。比如说hansong.me/web/index.html这种形式。

相对路径顾名思义就是自己相对于目标的位置,省略当前的目录,直接写后面的路径。其中“../”表示上一级目录,“../../”表示上上级的目录,“/”表示同级目录。一般,在前端编程中,我们都使用相对路径。

概念性的东西说起来总是那么地让人蛋疼而且又不方便理解,绝对路径很简单就不多说了,下面通过举例的方式重点说说相对路径。

例子:

假如现在电脑里面有下面这两个文件:

c:/website/web/my_pages/index.html (绝对路径表示)

c:/website/web/my_images/picture.jpg (绝对路径表示)

现在,我们想要在index.html这个文件中引入picture.jpg这个图片,要怎么引用呢?

错误的引用:my_images/picture.jpg || 正确的引用../my_images/picture.jpg

我们先来看看正确的引用。让我们尝试着模拟计算机查找文件的思路来解释。其中【../】代表着去到index.html这个文件的上一层,也就是my_pages的所在目录。接着【my_images/】代表着我们上面说到的my_pages所在的目录里面查找my_images这个文件夹并进入。接着【picture.jpg】代表着我们上面进入的my_images文件夹下查找到picture.jpg。下面再用图解来模拟一下。

【../】—–>>>>>进入index.html的上一层;我们现在所在的位置为my_pages的所在层,即web文件夹下。

【my_images/】—–>>>>>进入my_images文件夹下;我们在上面所说的my_pages的所在层(web文件夹下)找到my_images文件夹,并进入;现在我们的位置在my_images文件夹下。

【picture.jpg】—–>>>>>找到picture.jpg了;我们在上面所说的my_images文件夹下找到picture.jpg文件并引用。

合起来的从index.html中引用picture.jpg的相对路径就是:【../my_images/picture.jpg】。

现在我们回过头看哪个错误的表示:【my_images/picture.jpg 】是不是说明index.html不用回到上一层,就直接在自己的所在层查找my_images文件夹(也就是index.html与my_images在同一层目录下)。然后再在my_images文件夹下面找到picture.jpg并引用。我们把这个错误的相对路径还原成绝对路径就成了下面这样:

c:/website/web/my_pages/index.html

c:/website/web/my_pages/my_images/picture.jpg (index.html与my_images在同一层目录)。

by:小王

评论
发表评论
4年前

/ 表示根目录,是绝对路径。 ./ 才是当前目录。 举例来说 www.html-js.com 任意上面一个 a 标签 href="/", 点击后必然跳转到根目录 -- 首页。

WRITTEN BY
韩松Stone
It's time for reading and thinking.没事不要找我,有事更不要找我。
TA的新浪微博
PUBLISHED IN
前端基础

建立这个专栏的目的有三:

1、基础不牢,以文字的形式沉淀基本技能;
2、留下足迹,给将来的求职面试丰富内容;
3、贡献社区,为新手的入门学习提供帮助;

毕竟,自己走过的弯路,不想他人再走,希望在提升自己的同时,能给他人也带去哪怕一丁点的帮助;

祝好,
小王致!

我的收藏