什么是相对路径?相对路径的具体写法和用法
什么是相对路径?
相对路径是指以当前文件资源所在的目录为参照基础,链接到目标文件资源(或文件夹)的路径。
假设,我们在一个A文件(比如a.html)中,链接另一个B文件(比如b.html),也可以说是,当前文件A引用目标文件B,那么,相对路径就是以当前文件A所在的目录为参照基础,建立连接到目标文件B的路径;
改变当前文件A或目标文件B的目录,也就是说,把A或B放到不同的文件夹中,A和B的相对路径也会不同,所以,改变A或B的目录,它们之间的相对路径也会跟着发生变化!
相对路径特殊符号
在表示相对路径中,单点表示当前目录,双点表示上一级目录,反斜杠“/”表示分隔目录;
相对路径特殊符号有以下几种表示意义:
◆以“./”开头,代表当前目录和文件目录在同一个目录里,“./”也可以省略不写!
◆以"../"开头:向上走一级,代表目标文件在当前文件所在的上一级目录;
◆以"../../"开头:向上走两级,代表父级的父级目录,也就是上上级目录,再说明白点,就是上一级目录的上一级目录
◆以"/”开头,代表根目录
相对路径使用示例
假设,我们有一个网页文件index.html和一个图片文件tupian.png,其中,以index.html文件为当前目录作为参照基础,图片tupian.png文件为目标文件,那么,他们之间的相对路径有以下几种写法:
1、在同级目录里
如上图所示,当前文件index.html和目标文件tupian.png都在D:/website/web/里,
如果要在index.html文件中用相对路径引用tupian.png文件,其相对路径以"./"开头:
./tupian.png //表示在同级目录里
也可以省略单点和反斜杠,也就是直接写目标文件的文件名tupian.png即可:
tupian.png
2、在上级目录或上上级目录里
如上图所示,目标文件tupian.png在当前文件index.html的上一级目录website里,在index.html文件中,用相对路径引用tupian.png文件,其相对路径以"../"开头,向上走一级,再找目标文件:
../tupian.png //表示在上级目录里
而另一个目标文件img.png直接是在D盘根目录里,也就是在当前文件index.html上上级目录,即上一级目录的上一级目录,其相对路径以"../../"开头,向上走两级,再找目标文件:
../../tupian.png //表示在上上级目录里
如果是上上上级目录,就向上走三级,用三个“../../../”,如有更多上级目录,则如此类推!
3、在下级目录里
如上图所示,目标文件tupian.png在当前文件index.html的下一级目录abc文件夹里,在index.html文件中,用相对路径引用下级目录的tupian.png文件,其相对路径以"./"开头,先写同级目录文件夹名,再写目标文件的文件名:
./abc/tupian.png //表示在下级目录里
4、在根目录里
如果目标文件tupian.png在D盘符的根目录里,其绝对路径就是D:\tupian.png,用相对路径表示就是:
/tupian.png //用一个反斜杠表示在根目录里
只要目标文件tupian.png在D盘的根目录下,无论当前文件index.html在D盘的什么位置都无关紧要,系统会自动地从当前D盘符的根目录开始查找tupian.png文件。
以上是本地盘符根目录的表示方法,另一种是域名根目录的表示方法,其实,两者表示方法是一样的。
比如,这个绝对路径:https://liudaima.com/tupian.png ,它的相对路径也是:
/tupian.png //用一个反斜杠表示在根目录里
相对路径优缺点
1、优点:只要保持当前文件和目标文件的相对位置不变,它们之间的相对路径也不会改变,就算移动了整个目录,也可以保证相对路径是有效的!
比如,只要保持当前文件index.html和目标文件tupian.png在同一个目录中,不管你把他们一起移动到哪个文件夹或目录,也不管是什么盘符(C盘、D盘、E盘等),只要它们同在一目录下,那么,在index.html文件中引用tupian.png的相对路径(./tupian.png)始终是有效的。但这也是容易被人采集或抄袭的原因。
2、缺点:只要当前文件移动到其他不同的目录中,其相对路径也会随之发生变化,那么,之前未改变目录的相对路径也会失效;
原文地址:https://www.cnblogs.com/jgg54335/p/14787211.html
- 高并发场景下的httpClient优化使用
- socket.io 相关:Example: A simple chat server(官方 实例)
- django整理(四)配置setting文件(CSS,JS,images,templates)路径
- idea 远程调试 tomcat web应用
- Java 中冷门的 synthetic 关键字原理解读
- Spring 数据库连接(Connection)绑定线程(Thread)的实现
- Golang语言实现AzDG可逆加密算法实例
- python django整理(五)配置favicon.ico,解决警告Not Found: /favicon.ico
- SpringMVC + Mybatis bug调试 SQL正确,查数据库却返回NULL
- 原生javascript实现图片轮播效果代码
- Spring AOP中 args和arg-names的区别
- Golong 语言开发 go-websocket-sample 测试值得拥有
- Java面试系列23-spring(2)-配置数据库驱动、依赖、Mapping等
- 【Golang语言社区】 Go语言中使用 Protobuf
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android控件AppWidgetProvider使用方法详解
- R语言使用链梯法Chain Ladder和泊松定律模拟和预测未来赔款数据
- Android ViewPager实现左右滑动的实例
- R语言通过伽玛与对数正态分布假设下的广义线性模型对大额索赔进行评估预测
- R语言中回归模型预测的不同类型置信区间应用比较分析
- 第06期:Prometheus 存储
- 新特性解读 | 数组范围遍历功能
- 技术分享 | MySQL 内存管理初探
- 新特性解读 | 窗口函数的适用场景
- Android自定义View 仿QQ侧滑菜单的实现代码
- Android view随触碰滑动效果
- TextView使用SpannableString设置复合文本 SpannableString实现TextView的链接效果
- FragmentTabHost使用方法详解
- Android编程实现仿优酷圆盘旋转菜单效果的方法详解【附demo源码下载】
- Android绘制圆形百分比加载圈效果