【H5 前端开发笔记】第 04 期：HTML超文本标记语言 相对路径 和 绝对路径 详解

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

路径的知识点大家千万不要小看它，在后期的项目开发中，路径可能是你最大的问题和障碍! 所以一定要仔细掌握它!

相对路径 和 绝对路径

在我们操作HTML标签的时候, 例如(超级链接、图片等…) 就会遇见书写路径的情况!

而我们常见的路径就分为: 绝对路径 和相对路径 这两种情况

绝对路径

绝对路径 是指文件在硬盘上真正存在的路径, 你可以理解成一个真实存在的物理地址!

举例说明: test.jpg这个图片 是存放在硬盘的 D:\background\images\01目录下!

那么这个test.jpg的绝对路径就是:

D:\background\images\01\test.jpg

如果在HTML中使用绝对路径的方式来调取test.jpg这张图片,我们应该使用如下语句:

<img src="D:\background\images\01\test.jpg"/>

绝对路径的致命缺点

我们在实际开发中 很少会使用上面这种绝对路径!

原因: 是因为使用上面案例当中 这种绝对路径 通常会产生无法显示的情况!

比如说: 你在开放当中, 使用 D:\background\images\01\test.jpg 来指定这张图片,在你自己的电脑上 浏览器会正常显示!

但如果说上传到服务器、或者 说把你的这个项目文件拷贝到另外一台电脑上查看的时候,那么就可能不显示图片了!

其根本原因就在于: 你换了一台电脑 这个电脑不一定会有你所指定的D盘 , 当然即使你放在了这个电脑的D盘, 这个盘

也不一定就存在 D:\background\images\01 这个路径，因此图片最终不会显示出来, 这就是绝对路径的缺点!

相对路径

刚刚我们说了绝对路径，也知道了绝对路径的缺点，所以就产生了相对路径这个概念, 它可以有效避免绝对路径所产生的缺点!

相对路径: 就是相对于自己(当前正在开发的这个文件)的目标文件位置

举例说明: 我们先看一张简单的项目目录结构

如下

举个栗子

我们现在有一个index.html的页面,要引用test.jpg这个图片,

由于上图中的表示: “test.jpg”图片相对于“index.html”来说，是在同一个目录的!

只要这两个文件的相对位置没有变(也就是说还是在同一个目录内) , 那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片, 那么我们在index.html中调取该图片应该用如下方式 , 就可以显示出图片了

<img src="test.jpg"/>

./的使用

./ 代表的就是当前目录, 所以下面两者意义是一样的

<img src="test.jpg"/>   与   <img src="./test.jpg"/>  

例2 还是index.html页面文件,想引入test.jpg, 但是目前这个test.jpg在index.html的同级目录images目录下,

那么调取这张图片的时候应该如下方式:

<img src="images/test.jpg"/>

重点注意：相对路径使用“/”字符作为目录的分隔字符，

而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。

由于“images”目录是“网站根目录”下的子目录，因此在“images”前不用再加上“/”字符。

…/的使用

在相对路径里常使用“…/”来表示上一级目录。

也就是使用…/返回一级目录，返回几级使用几个…/

多个上一级目录，使用多个“…/” 例如: 当前目录往上两级: …/…/

例3

现在根目录下有一个file目录, 在file目录下有一个shop.html文件, 我们想要在shop.html页面中引入images下的test3.jpg 那么应该如下书写相对路径:

<img src="../images/jpg/test3.jpg"/>

所以 使用…/ 之前要知道的是当前的页面文件在什么地方最重要! 这样才好判断写多少个…/

/ 的使用

/ 它被称呼为: 相对虚拟目录 它是相对于当前文件所在的地方而决定根目录的!

所以 又有人把它 “/” 的意思定义为: 根目录, 这里的根目录的具体含义是分以下两种情况的!

1. 在非服务器上时:文件在那个盘就是相对那个盘而言的
2. 在服务器上时: 文件是相对www 或 htdocs根目录的

例4

下图中 img标签调用的1.jpg图片 路径为: /images/1.jpg 这里的情况就是在非服务器上的情况!

所以经过测试, 这里指向的就是C盘下的images目录下的1.jpg,

如果C盘下没有这个images目录和1.jpg文件的话 那么图片就无法显示

例5

如果我们把index.html所包含的整个站点拷贝一个服务器环境下, 这个时候就是 在服务器上时的情况 ,

我们这里使用的是apache服务环境 !

那么 “/” 代表的就是apache服务器中的htdocs根目录 也就是说images目录要在htdocs根目录下才能够被正常显示图片!

注意: 这里必须要使用服务器访问方式来 打开页面才行

如果是本地服务器 就是http://localhost:端口号/站点跟目录/页面.html

如图