解析相对路径和绝对路径(以图片为例)

1.区分

绝对路径: 带盘符的路径如:C:\Program Files(D盘,E盘都是属于盘符)

相对路径: 这个路径是以

当前文件所在的位置

为参考系

当前文件指的是写了路径的那个文件

在这里插入图片描述

那么如果图片标签需要设置为杰伦.jpg的话,那么图片路径应该为

杰伦.jpg

,引用代码如下所示:

<html>
	<head>
		<title>当文件与图片在同一个目录下时</title>
	</head>
	<body>
  		<img src="杰伦.jpg"/>
	</body>
</html>

在这里插入图片描述

那么如果图片标签需要设置为杰伦.jpg的话,那么图片路径应该为

…/杰伦.jpg

,引用代码如下所示

<html>
	<head>
		<title>当图片资源位于文件的上一级目录时</title>
	</head>
	<body>
  		<img src="../杰伦.jpg"/>
	</body>
</html>

在这里插入图片描述

那么如果图片标签需要设置为杰伦.jpg的话,那么图片路径应该为…/demo2/杰伦.jpg,引用代码如下所示

<html>
	<head>
		<title>当图片资源位于文件的上一级目录的子文件夹下面时</title>
	</head>
	<body>
  		<img src="../dem02/杰伦.jpg"/>
	</body>
</html>

在这里插入图片描述

那么如果图片标签需要设置为杰伦.jpg的话,那么图片路径应该为

work/杰伦.jpg

,引用代码如下所示

<html>
	<head>
		<title>当图片资源位于文件的所在目录的子文件夹下面时</title>
	</head>
	<body>
  		<img src="work/杰伦.jpg"/>
	</body>
</html>

相对路径是以文件所在的位置为参考系

a.若资源与文件在同一个目录下,那么路径=资源名

b.若资源在文件所在目录下的一个子文件里面,那么路径=子文件名/资源名

c.若资源在文件所在目录的上级时,那么路径=…/资源名

c.若资源在文件所在目录的上级目录下的一个子文件下面时,那么路径=…/子文件名字/资源名

d.如果返回上级目录要进入相邻的文件夹,必须再返回上一级即…/(返回上一级实际上是返回上一级的文件夹)，

e.进入下一级目录时.若资源在同级目录的子文件夹下面,那么直接文件夹/资源名即可

正常的话为./子文件夹/资源名

f ./返回上一级文件夹

…/返回上一级文件夹的上一级文件夹

当返回上一层文件夹时,发现

该文件夹与图片资源同目录

,那么需要

再向上返回一层