欢迎评论和指正,希望我的学习经验可以帮助到你。
绝对路径:目标文件在硬盘上的真实路径(最精确路径)
举个栗子:找到文件,右键点击后打开属性,可以看到我把喜欢的封面'cover1.jpg'储存在了路径_C:Users80975OneDriveDesktopcover_
那么_C:Users80975OneDriveDesktopcovercover1.jpg _就是绝对路径
所以在html的图片引用中可以写
<!-- 用 / 或 都可以 --><img src="C:Users80975OneDriveDesktopcovercover1.jpg" alt="cover1">
相对路径:相对于当前文件位置的路径
举个栗子:我不想用绝对路径,那么在html中要怎么写才能引用cover1.jpg呢?
这里要介绍一个等级概念,目录的上级(父级),同级,下级(子级)。从这里开始,我们管文件夹叫目录(directory)
下级(子目录):在web目录下,可以看到有一个用chrome打开的文件,我把它叫做test.html,那么test.html就叫做web目录的下级。
上级:web是test.html的上级目录
同级:web和cover1.jpg在同目录中,成为同级那么我们来实战练习一下,test.html如何才能引用cover1.jpg呢?
实战演练引用格式
1.引用上级文件: ../cover1.jpg
2.引用同级文件: cover1.jpg
3.引用下级文件: cover/cover1.jpg
4.引用上上级文件: ../../cover1.jpg
<!-- 1.引用上级文件,为图片中例子 --><img src="../cover1.jpg" alt="cover1"><!-- 2.引用同级文件 --><img src="cover1.jpg" alt="cover1"><!-- 3.引用下级文件 --><img src="cover/cover1.jpg" alt="cover1"><!-- 4.引用上上级文件 --><img src="../../cover1.jpg" alt="cover1">
相对路径:位置灵活,写法简单,只要在同盘中就可引用查找
绝对路径:用的较少,因为目录一定,除非引用文件从来不移动,否则你每次都要改。不适合上传web。
练习一下
以下哪些是相对路径(多选)
.../cover1.jpg../cover/cover1.jpgcover1.jpg
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
正确答案:以上全是
_