html 的相对路径和绝对路径

整篇文章是以 src 标签进行演示。

文章目录

一、相对路径

1、同级目录查找

2、上一级目录查找

3、下一级目录查找

二、绝对路径

---

一、相对路径

👵相对路径：从当前所处的目录开始查找。

1、同级目录查找

写法：

1.1.直接写文件名；

或者

1.2.在文件名前面加 ./，代表同级（不写 ./ 默认就是同级）。

下图中，我的 index.html 页面和 小女孩.jpg 图片是在同一个目录；

 

①我的 src 图片路径可以直接写文件名：小女孩.jpg；

②./ 代表同级目录，所以也可以写成： ./小女孩.jpg； 

2、上一级目录查找

写法：../

下图中，我的 index.html 在 test 文件夹内，如果我要找到 小女孩.jpg 图片的话，就要先 ../ 退出 test 文件夹（回到上一级目录）；退出 test 文件夹后 index.html 就和 小女孩.jpg 图片同级了，然后就就可以直接找到同级的 小女孩.jpg 图片；

所以我的 src 图片路径要写成： ../小女孩.jpg 

提示：

如果是查找上两级目录就再加一个 ../，这样写：../../

如果是查找上三级目录就加三个 ../../../，这样写：../../../

以此类推......

3、下一级目录查找

写法：/

下图中，我的 小女孩.jpg 图片在 test 文件夹里面；我先找到跟 index.jpg 同级的 test 文件夹，通过 / 找到 test 文件夹下一级目录的 小女孩.jpg 图片；

①所以我的 src 图片路径要写成：test/小女孩.jpg

②./ 代表同级目录，所以也可以写成 ./test/小女孩.jpg；

二、绝对路径

👴绝对路径：可以是完整的网页路径，也可以是在完整的盘符路径。

如下：

这是我把图片放在网页上的绝对路径：

<img src="file:///C:/Users/wang'qing/Desktop/小女孩.jpg" />

这是我的图片放在某个盘符上的绝对路径：

<img src="C:\Users\wang'qing\Desktop\小女孩.jpg" />

一般不用。

👴❤👵

完。。。