解析相对路径和绝对路径(以图片为例)
1.区分
绝对路径: 带盘符的路径如:C:\Program Files(D盘,E盘都是属于盘符)
相对路径: 这个路径是以当前文件所在的位置为参考系
当前文件指的是写了路径的那个文件
2.常见情况
a.当文件与图片在同一个文件夹下时,如下图所示:
那么如果图片标签需要设置为杰伦.jpg的话,那么图片路径应该为
杰伦.jpg,引用代码如下所示:
<html>
<head>
<title>当文件与图片在同一个目录下时</title>
</head>
<body>
<img src="杰伦.jpg"/>
</body>
</html>
b.当图片资源位于文件的上一级目录时,如下图所示:
那么如果图片标签需要设置为杰伦.jpg的话,那么图片路径应该为
…/杰伦.jpg,引用代码如下所示
<html>
<head>
<title>当图片资源位于文件的上一级目录时</title>
</head>
<body>
<img src="../杰伦.jpg"/>
</body>
</html>
c.当图片资源位于文件的上一级目录的子文件夹下面时,如下图所示:
那么如果图片标签需要设置为杰伦.jpg的话,那么图片路径应该为…/demo2/杰伦.jpg,引用代码如下所示
<html>
<head>
<title>当图片资源位于文件的上一级目录的子文件夹下面时</title>
</head>
<body>
<img src="../dem02/杰伦.jpg"/>
</body>
</html>
d.当图片资源位于文件的所在目录的子文件夹下面时,如下图所示:
那么如果图片标签需要设置为杰伦.jpg的话,那么图片路径应该为
work/杰伦.jpg,引用代码如下所示
<html>
<head>
<title>当图片资源位于文件的所在目录的子文件夹下面时</title>
</head>
<body>
<img src="work/杰伦.jpg"/>
</body>
</html>
3.总结
相对路径是以文件所在的位置为参考系
a.若资源与文件在同一个目录下,那么路径=资源名
b.若资源在文件所在目录下的一个子文件里面,那么路径=子文件名/资源名
c.若资源在文件所在目录的上级时,那么路径=…/资源名
c.若资源在文件所在目录的上级目录下的一个子文件下面时,那么路径=…/子文件名字/资源名
d.如果返回上级目录要进入相邻的文件夹,必须再返回上一级即…/(返回上一级实际上是返回上一级的文件夹)，
e.进入下一级目录时.若资源在同级目录的子文件夹下面,那么直接文件夹/资源名即可
正常的话为./子文件夹/资源名
f ./返回上一级文件夹
…/返回上一级文件夹的上一级文件夹
当返回上一层文件夹时,发现该文件夹与图片资源同目录,那么需要再向上返回一层
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
