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

目录

导语引入 ： 

相对路径 ： 

相对路径  包含哪些 ：

 同一级路径 ： 

 下一级路径 ： 

 上一级路径  ：

---

导语引入 ： 

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

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

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

插入 ： 

            ​​​​​​​

            

             如此即可 ~！

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

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

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