700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 中相对路径与绝对路径的写法_相对路径和绝对路径?简洁易懂解释+实例

中相对路径与绝对路径的写法_相对路径和绝对路径?简洁易懂解释+实例

时间:2019-07-01 06:12:01

相关推荐

中相对路径与绝对路径的写法_相对路径和绝对路径?简洁易懂解释+实例

欢迎评论和指正,希望我的学习经验可以帮助到你。

绝对路径:目标文件在硬盘上的真实路径(最精确路径)

举个栗子:找到文件,右键点击后打开属性,可以看到我把喜欢的封面'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

|

|

|

|

|

|

|

|

|

|

|

|

|

|

|

|

|

|

|

|

|

正确答案:以上全是

_

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。