生活中两个人，我要去找你，需要通过一定的路径才能找到！同理：页面需要找到图片，也是需要通过路径才能找到。html标签路径分为两种，绝对路径和相对路径 ，我们先来介绍绝对路径，比较简单。 相对路径是大家常用的， 本文会详细介绍。
• 绝对路径
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：
• 盘符开头：D:\day01\images\1.jpg
• 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（绝对路径）
相对路径（常用）
概念普及：
• 当前文件：当前的html网页
• 目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：
• 同级目录
• 下级目录
• 上级目录
同级目录：当前文件和目标文件在同一目录中
类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）
• 生活中：两个人独处一室，我想找你，直接喊名字即可！
代码步骤：
直接写目标文件的名字即可
VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！
相对路径-下级目录
下级目录：目标文件在下级目录中
类似于：我在大厅，你累了去卧室休息了，我现在要找到你！
1. 先知道你去了哪一个房间 → 房间名：卧室
2. 进入这个房间 → 进入
3. 此时又独处一室 → 直接喊你名字
Ø 代码步骤：
1. 先知道在哪个文件夹里面 → 文件夹名字
2. 进入这个文件夹 → /
3. 此时看到目标文件直接喊她 → 直接写目标文件名字
Ø VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！
相对路径-上级目录
上级目录：目标文件在上级目录中
类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！
1. 先要出卧室，来到大厅 → 出去
2. 此时又独处一室 → 直接喊你名字
Ø 代码步骤：
1. 先出当前文件夹，到上一级目录 → ../
2. 此时看到目标文件直接喊她 → 直接写目标文件
Ø VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可！
总结：
相对路径的三种情况：
• 同级目录：直接写：目标文件名字！
• 下级目录：直接写：文件夹名/目标文件名字！
• 上级目录：直接下：../目标文件名字！
VSCode中路径的快捷操作？
• 同级和下级目录：./ 之后选择即可
• 上级目录：../ 之后选择即可
声明：该文观点仅代表作者本人，《前端技术分享网》系信息发布平台，前端技术分享网仅提供信息存储空间服务。发布者：果壳日志，转载请注明出处：https://www.xin12123.com/n/338.html
