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

目录

导语引入 ：?

相对路径 ：?

相对路径? 包含哪些 ：

?同一级路径 ：?

?下一级路径 ：?

?上一级路径??：

---

导语引入 ：?

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

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

? ? 到的图片；? 那么，问题来了，当把 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 图片?

插入 ：?

? ? ? ? ? ?????????

? ? ? ? ? ??

? ? ? ? ? ? ?如此即可 ~！

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

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

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