html路径有几种?html绝对路径和相对路径详解

生活中两个人,我要去找你,需要通过一定的路径才能找到!同理:页面需要找到图片,也是需要通过路径才能找到。html标签路径分为两种,绝对路径和相对路径 ,我们先来介绍绝对路径,比较简单。   相对路径是大家常用的, 本文会详细介绍。

• 绝对路径

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

例如:
• 盘符开头:D:\day01\images\1.jpg
• 完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif(绝对路径)

相对路径(常用)

概念普及:
• 当前文件:当前的html网页
• 目标文件:要找到的图片
相对路径:从当前文件开始出发找目标文件的过程
相对路径分类:
• 同级目录
• 下级目录
• 上级目录

 

同级目录:当前文件和目标文件在同一目录中

html路径有几种?html绝对路径和相对路径详解

类似于:我(当前文件)和你(目标文件)都在大厅(一个文件夹中)
• 生活中:两个人独处一室,我想找你,直接喊名字即可!

代码步骤:

直接写目标文件的名字即可

html路径有几种?html绝对路径和相对路径详解

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

 

相对路径-下级目录

下级目录:目标文件在下级目录中

html路径有几种?html绝对路径和相对路径详解

html路径有几种?html绝对路径和相对路径详解

类似于:我在大厅,你累了去卧室休息了,我现在要找到你!
1. 先知道你去了哪一个房间 → 房间名:卧室
2. 进入这个房间 → 进入
3. 此时又独处一室 → 直接喊你名字
Ø 代码步骤:
1. 先知道在哪个文件夹里面 → 文件夹名字
2. 进入这个文件夹 → /
3. 此时看到目标文件直接喊她 → 直接写目标文件名字
Ø VS Code快捷操作:直接敲./后,会自动提示当前目录下有哪些文件夹,直接一层层选择即可!

 

相对路径-上级目录

上级目录:目标文件在上级目录中

html路径有几种?html绝对路径和相对路径详解

html路径有几种?html绝对路径和相对路径详解

类似于:乾坤大挪移,我在卧室,你还在大厅,我现在要找到你!
1. 先要出卧室,来到大厅 → 出去
2. 此时又独处一室 → 直接喊你名字
Ø 代码步骤:
1. 先出当前文件夹,到上一级目录 → ../
2. 此时看到目标文件直接喊她 → 直接写目标文件
Ø VS Code快捷操作:直接敲../后,会自动提示上级目录下有文件,直接选择即可!

总结:

相对路径的三种情况:
• 同级目录:直接写:目标文件名字!
• 下级目录:直接写:文件夹名/目标文件名字!
• 上级目录:直接下:../目标文件名字!
VSCode中路径的快捷操作?
• 同级和下级目录:./ 之后选择即可
• 上级目录:../ 之后选择即可

主题测试文章,只做测试使用。发布者:果壳日志,转转请注明出处:https://www.xin12123.com/n/338.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年 11月 2日 下午10:09
下一篇 2022年 11月 3日 下午12:08

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信