怎么区分相对路径和绝对路径（图解）

---

前言

在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。

---

1. 相对路径：当前资源与目标资源的相对位置关系

大家先了解一下几个概念：

• 当前目录： 以 ". / " 或者 省略 开头
• 上一级目录：以" . . / " 开头

1. 网页1.html 的当前目录是web文件夹，上一级目录就是test文件夹。
2. bg1.jpg 的当前目录就是img文件夹，上一级目录就是test文件夹。
3. 网页2.html 的当前目录是test文件夹，上一级目录就不讨论了。
4. bg2.jpg 的当前目录是test文件夹。

案例：

情况1

在网页1.html 中引入 bg1.jpg 图片

src = "../img/bg1.jpg"

情况2

在网页1.html 中引入 bg2.jpg 图片

src = "../bg2.jpg"

情况3

在网页2.html 中引入 bg1.jpg 图片

src = "./img/bg1.jpg"  或者  src = "img/bg1.jpg"

情况4

在网页2.html 中引入 bg2.jpg 图片

src = "./bg2.jpg"  或者  src = "bg2.jpg"

关键原理

• 怎么找到目标资源？先在当前目录下能找到吗？找不到就去上一级目录能找到吗？

比如在情况1中，在 网页1.html 中的当前目录 html 文件中找不到 bg1.jpg 图片，那么就去上一级目录 test 文件中找，在 test 的子目录img中可以找到。所以 src = " . ./img/bg1.jpg "

2. 绝对路径：是指文件在硬盘上真正存在的路径

例：

1. E:\web\test\img\bg1.jpg
2. 以http开头的链接都是绝对路径

缺点

在网页编程时，很少会使用绝对路径，如果使用“E:\web\test\img\bg1.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘， 有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\web\test\img\bg1.jpg”这个目录，因此在浏 览网页时是不会显示图片的。相对路径就可以解决这个问题。