前端 -- 基础 路径 -- 相对路径 详解

目录

[导语引入 :](#导语引入 :)

[相对路径 :](#相对路径 :)

[相对路径 包含哪些 :](#相对路径 包含哪些 :)

[同一级路径 :](#同一级路径 :)

[下一级路径 :](#下一级路径 :)

[上一级路径 :](#上一级路径 :)


导语引入 :

# 大家都清楚,在我们日常所见到的网页里,要涉及好多图片,要是把如此多的图片都和网页文件

放一起的话,那势必引起混乱,所以我们一般就是创建一个文件夹来专门存储这些网页所需要用

到的图片; 那么,问题来了,当把 HTML文件所需要用到的图片放到一个文件夹里存储的时候

那就要涉及一个 所谓 " 路径 " 的问题了~!!

因为 当 HTML 用到这个图片时,就需要按照一定的 " 路径 " 去找到这张图片来使用了 ~!!

**#**那么,HTML网页文件 按照什么样的 路径 方式,也是有讲究的,

路径分为两种 一种是 " 相对路径 " ,一种是 " 绝对路径 "

相对路径 :

# 即 以引用文件所在位置为参考基础,而建立出的目录路径

你要是看上示概念,能理解个屁~!!

简言之就是 : 图片相对于 HTML 页面的位置

当然了,你看完解释,只是有点儿好转,并未完全治愈 ,放心,接着往下看 :

结合着例子来理解。

相对路径 包含哪些 :

同一级, 下一级 , 上一级 三种

结合 " 图片相对于 HTML 页面 的位置 " 以示例来理解 相对路径

同一级路径 :

我们以这个 " 同一级路径 " 的这个HTML文件 和 11.png 这个图片举例

他们俩就是所谓的 同一级路径

就是现在 这个 " 同一级路径 " HTML 文件,想要给自己这个网页页面 插入这个 11.png 这个图片

然后你结合 ( 图片相对于 网页页面文件的位置 ) 你来理解 同一级路径

你看上示图,是不是就能看到 这个图片和这个网页页面是在同一目录下的 ~!!

说白就是 都在 T2 文件夹(目录文件夹)下的 根目录 ,是在同一级下的 ~!!

那这就是所谓的 同一级路径 ~!!!

下来我们看 同一级路径下的图片插入 :

结合前面 相对路径包含哪些的图片里后面的说明 来编写代码

===>>>

显然图片在 网页上显示成功 ~!!

下一级路径 :

# 同一级路径,应用是最简单的,但并不是最普遍的,因为我们前面也说了,一个网页文件所需

要的图片是多的数不清的, 你想想如果都把这些图片 和 网页文件都放在一起,放在同一级目

录下,那岂不是很 复杂,也不好找。

所以,一般我们就建立一个 文件夹 来专门存放 网页所需要的图片 ~!!

示例 :

我们新建了 一个专门用来存放图片的文件夹 images ,这个文件夹里有一个图片 22.png

我们现在就想让 下一级路径的这个HTML 文件插入 22.png 这个图片

那么,这就是我们所谓的 下一级路径

你可以在上示图中明显看到, 下一级路径 和 22.png 这个图片 就压根没在同一级目录里

因为 22.png 这个图片 还在 images 这个文件夹里面,你 下一级路径这个 HTML 文件要想

使用 22.png 这个图片的话 那就必须得先进入到 images 这个文件夹里,才可以使用到~!

直接看插入操作 :

===>>>

可以看到,我在编写的时候,采用了三种编写方式 ,结果都是可以的都是能够显示出图片的

你就按照 图片文件所在的文件夹名字/图片名字

上一级路径 :

# 和前面两个完全同理, 就是 图片在网页文件的上一级

# 实操 :

就是现在,我们也创建了一个 专门放置 HTML 文件的文件夹,名为HTML ,在这个文件夹

下有一个文件是 上一级路径 这个文件 。

上一级路径这个网页文件 想要 插入 11.png 这个图片

那 上一级路径这个网页 就必须得先回到 HTML这个文件夹,然后再使用 11.png 图片

插入 :

​​​​​​​

如此即可 ~!

就是如果要使用的 图片 在网页文件的上一级 ,那就用 ../图片名称

注意, ../ 就代表上一级的意思, 如果再上一级那就继续 ../ 那就是 ../../ 以此类推即可

如此,你再回到最初,理解那句 " 图片相对于网页文件 " 这句话 是不是就完全治愈了呢 ?

相关推荐
开航母的李大9 分钟前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu9 分钟前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端36 分钟前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao1 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫1 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z1 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu1 小时前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端1 小时前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue1 小时前
Vue ⑥-路由
前端·javascript·vue.js
whatever who cares1 小时前
React hook之useRef
前端·javascript·react.js