HTML前端——绝对路径与相对路径（超详细剖析）

相对路径与绝对路径剖析

媒介

实际工作中，通常会创建一个文件夹专门用于存放图像文件，这时在页面中插入图像，就需要接纳路径的方式来指定图像文件的位置。
要想精确地使用路径，就必须先搞清晰两个概念：相对路径与绝对路径。
一、概念

1、绝对路径

（1）绝对路径以 Web 站点根目录为参考根本的目录路径。之以是称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
（2）分为两种情况：物理绝对路径、网络绝对路径
物理绝对路径：指电脑磁盘的真实位置（一般带有真实盘符）如：“D:/HTML/HTML学习/03Day/01路径剖析.html” (通常工作中不会使用此方式)
网络绝对路径：指网络中的完整的地址，例：“https://www.52cto.cn/”（前端面试宝藏网站）
2、相对路径

以引用文件之网页地点位置为参考根本，而创建出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

• 图像文件和 HTML 文件位于同一文件夹：只需输入图像文件的名称即可，如： < img src=“logo.gif” /> 。
  
• 图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，之间用 / 隔开，如： < img src=“img/logo.gif” /> 。
  
• 图像文件位于 HTML 文件的上一级文件夹：在文件名之前参加 …/ ，如果是上两级，则需要使用…/…/ ，以此类推，如： < img src=“…/logo.gif” /> 。
  
• 图像文件位于网站根目录：在文件名之前参加 / ，如： < img src=“/logo.png” /> 。
  

   / 开头：代表根目录； ./ 开头：代表当前地点的目录； …/ 开头：代表上一层目录。
  二、明白

1、绝对路径

绝对路径，就像一个门牌号，确定不变。
好比故宫的地址：北京市东城区景山前街 4 号。无论你在那里，故宫就在那里，不会因为你去了美国，故宫就搬到了纽约市。
那么故宫的绝对路径就是：北京市东城区景山前街 4 号。
1.1、绝对路径示例

以此类比，如果你想要访问百度，那么直接在超链接的地址链接那里输入百度的路径https://www.baidu.com/就可以了

1. <a href="https://www.baidu.com/">百度一下，你就知道</a>

复制代码

2、相对路径

相对路径，会根据你当前的位置而变化。好比你从天安门东和从天安门西去故宫的路线是不一样的
如果，你现在在天安门东地铁站，那么故宫对你来说，就是先出地铁站，然后向西走350米到达天安门广场，再向北行走350米到南门，最后再向北走800米就可以到故宫了。
以是，当你在天安门东地铁站时，故宫的相对路径就是：当前位置，出站，往西走 350米，往北走350米，再往北走800米

但是如果你现在在天安门西的地铁站 如果你还按照天安门东的路线去故宫的话，那么你将会跑到南海游泳去了

以是，当你在天安门西地铁站时，故宫的相对路径就是：当前位置，出站，往东走 500米，往北走350米，再往北走800米
2.1、相对路径示例

   / 开头：代表根目录； ./ 开头：代表当前地点的目录； …/ 开头：代表上一层目录。
  当图像文件和项目文件位于同一文件夹：只需输入图像文件的名称即可，

此时我的项目文件和图像文件都在同一级，因此我们可以直接输入图像文件名称,也可以以 ./ 开头再输入图像文件名称

1.         <img src="music.jpg" alt="图片加载异常！！！">
2.     <img src="./music.jpg" alt="图片加载异常！！！">

复制代码

当图像文件位于项目文件的下一级文件夹：输入文件夹名和文件名，之间用 / 隔开，

此时我的项目文件与images文件处于同级，图像文件处于images文件的下一级，我们可以先以第一种方式 ./images 找到images文件夹，之间用 / 隔开，再输入图像文件的名称即可。

1. <img src="./images/music.jpg" alt="图片加载异常！！！">

复制代码

当图像文件位于项目文件的上一级文件夹：在文件名之前参加 …/ ，如果是上两级，则需要使用…/…/ ，以此类推，

此时图像文件与HTML文件同级 都是我的项目文件的上一级，这时我们可以通过 **…/**让项目文件回到上一级‘HTML文件’，然后输入图像文件的名称即可。

1.     <img src="../music.jpg" alt="图片加载异常！！！">

复制代码

当图像文件位于文件根目录：在文件名之前参加 /

此时图像文件位于文件的根目录 我们通过**/**加上图像文件名即可

1.    <img src="/music.jpg" alt="图片加载异常！！！">

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。