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/就可以了
<a href="https://www.baidu.com/">百度一下，你就知道</a>
https://img-blog.csdnimg.cn/20e63cbabcf24125ad35192a0fb1ad20.gif#pic_center
2、相对路径
相对路径，会根据你当前的位置而变化。好比你从天安门东和从天安门西去故宫的路线是不一样的
如果，你现在在天安门东地铁站，那么故宫对你来说，就是先出地铁站，然后向西走350米到达天安门广场，再向北行走350米到南门，最后再向北走800米就可以到故宫了。
以是，当你在天安门东地铁站时，故宫的相对路径就是：当前位置，出站，往西走 350米，往北走350米，再往北走800米
https://img-blog.csdnimg.cn/cf80379bbd3f4e36bf2ac74c6456e119.png#pic_center
但是如果你现在在天安门西的地铁站 如果你还按照天安门东的路线去故宫的话，那么你将会跑到南海游泳去了
https://img-blog.csdnimg.cn/9df9dcbbfd654089a60e8d52c8deeac7.png#pic_center
以是，当你在天安门西地铁站时，故宫的相对路径就是：当前位置，出站，往东走 500米，往北走350米，再往北走800米
2.1、相对路径示例
/ 开头：代表根目录； ./ 开头：代表当前地点的目录； …/ 开头：代表上一层目录。
当图像文件和项目文件位于同一文件夹：只需输入图像文件的名称即可，
https://img-blog.csdnimg.cn/5950c9c9d4ce41c094b25e1d5030d524.png#pic_center
此时我的项目文件和图像文件都在同一级，因此我们可以直接输入图像文件名称,也可以以 ./ 开头再输入图像文件名称
<img src="music.jpg" alt="图片加载异常！！！">
<img src="./music.jpg" alt="图片加载异常！！！">
当图像文件位于项目文件的下一级文件夹：输入文件夹名和文件名，之间用 / 隔开，
https://img-blog.csdnimg.cn/90e0698e9cb0435485a624f9b4638247.png#pic_center
此时我的项目文件与images文件处于同级，图像文件处于images文件的下一级，我们可以先以第一种方式 ./images 找到images文件夹，之间用 / 隔开，再输入图像文件的名称即可。
<img src="./images/music.jpg" alt="图片加载异常！！！">
当图像文件位于项目文件的上一级文件夹：在文件名之前参加 …/ ，如果是上两级，则需要使用…/…/ ，以此类推，
https://img-blog.csdnimg.cn/735f22a967d04d7e9d64250dd14fba66.png#pic_center
此时图像文件与HTML文件同级 都是我的项目文件的上一级，这时我们可以通过 **…/**让项目文件回到上一级‘HTML文件’，然后输入图像文件的名称即可。
<img src="../music.jpg" alt="图片加载异常！！！">
当图像文件位于文件根目录：在文件名之前参加 /
https://img-blog.csdnimg.cn/31d4cf3c6d844df1850e0fa8491be42a.png#pic_center
https://img-blog.csdnimg.cn/ac8ea9a35ca647428f786bd4d4ff3e66.png#pic_center
此时图像文件位于文件的根目录 我们通过**/**加上图像文件名即可
<img src="/music.jpg" alt="图片加载异常！！！">
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]