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中路径的快捷操作？
• 同级和下级目录：./ 之后选择即可
• 上级目录：../ 之后选择即可
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/199731.html
