当前位置：网站首页>还弄不懂相对路径和绝对路径，这篇文章带你简单剖析

还弄不懂相对路径和绝对路径，这篇文章带你简单剖析

2022-04-22 17:57:00 【Baridhu】

1 路径的介绍

* 场景：页面需要加载图片，需要先找到对应的图片

* 类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到！

* 同理：页面需要找到图片，也是需要通过路径才能找到

* 路径可分为：
• 绝对路径（了解）
• 相对路径（常用）
在这里插入图片描述

2 绝对路径（了解）

* 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

* 例如：
• 盘符开头：D:\day01\images\1.jpg
*演示：

 <img src="D:\day01\images\1.jpg" alt="">

3 相对路径（常用）

* 概念普及：
• 当前文件：当前的html网页
• 目标文件：要找到的图片

* 相对路径：从当前文件开始出发找目标文件的过程

* 相对路径分类：
• 同级目录
• 下级目录
• 上级目录

3.1 相对路径-同级目录

* 同级目录：当前文件和目标文件在同一目录中
在这里插入图片描述
* 类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）

生活中：两个人独处一室，我想找你，直接喊名字即可！

* 代码步骤：直接写目标文件的名字即可

方法一：<img src="目标图片.gif">
方法二：<img src="./目标图片.gif">

* VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！

演示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="cat.gif" alt="">
    <img src="./cat.gif" alt="">
</body>
</html>

3.2 相对路径-下级目录

* 下级目录：目标文件在下级目录
在这里插入图片描述

<img src="images/目标图片.gif" alt="">

* 类似于：我在大厅，你累了去卧室休息了，我现在要找到你！

先知道你去了哪一个房间 → 房间名：卧室
进入这个房间 → 进入
此时又独处一室 → 直接喊你名字

* 代码步骤：

先知道在哪个文件夹里面 → 文件夹名字
进入这个文件夹 → /
此时看到目标文件直接喊她

* 上级目录：目标文件在上级目录中
在这里插入图片描述

<img src="../目标图片.gif">

* 类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！

先要出卧室，来到大厅 → 出去
此时又独处一室 → 直接喊你名字

* 代码步骤：

先出当前文件夹，到上一级目录 → ../（若再想往上一级则写： ../../）
此时看到目标文件直接喊她 → 直接写目标文件

3.3 路径小结

* 相对路径有哪三种情况：
• 同级目录：直接写：目标文件名字！
• 下级目录：直接写：文件夹名/目标文件名字！
• 上级目录：直接下：../目标文件名字！

* VSCode中路径的快捷操作？
• 同级和下级目录：./ 之后选择即可
• 上级目录：../ 之后选择即可

版权声明
本文为[Baridhu]所创，转载请带上原文链接，感谢
https://blog.csdn.net/Baridhu/article/details/124345595