必威体育Betway必威体育官网
当前位置:首页 > IT技术

相对路径和绝对路径

时间:2019-08-03 10:13:21来源:IT技术作者:seo实验室小编阅读:87次「手机版」
 

相对路径

相对路径和绝对路径,往往都是初学者最困惑的知识点之一。在这一节,我们详细跟大家探讨一下这两者的区别和写法。

我们在C盘目录下建立一个网站,网站名称为“BookTest”,这个网站下的目录内容如下:

绿叶学习网

我们先温习上一节学到的<img>标签的语法:

<img src="图像源文件路径" alt="图片无法显示时的提示文字" title="鼠标经过图片时的提示文字"/>

在img标签中,要想正确在浏览器显示图像,我们必须给出图像的准确路径,即<img>标签的src属性。在接下来,我们用“网页1”和“网页2” 分别去引用images文件夹下的海贼王图片,从而多方面来认识相对路径和绝对路径的区别。

一、“网页1”引用海贼王图片

如果在“网页1”引用“海贼王”这张图片,则图片路径有两种写法:

  • 写法一:<img src="images/海贼王.jpg" alt="海贼王" />
  • 写法二:<img src="c:/BookTest/images/海贼王.jpg" alt="海贼王"/>

以上两种方法都能达到效果。为什么呢?这就是相对路径和绝对路径的问题。

1、相对路径

写法一采用了“相对路径”方法,所谓的相对路径,就是在同一个网站下,不同文件之间的的位置定位。我们分析一下,“网页1”和images文件夹位于网站BookTest根目录下,而海贼王图片位于images文件夹下,那么src应该是“images/海贼王.jpg”。

那有同学就会问,那下图2中,“网页1”如果要引用海贼王图片的相对路径怎么写呢?

相对路径

答案应该是:<img src="海贼王.jpg" alt="海贼王"/>。这个时候网页1与海贼王图片位于同一目录下。

2、绝对路径

对于写法二,采用的是“绝对路径”方法,所谓的绝对路径就是完整的路径。

二、“网页2”引用海贼王图片

绝对路径

我们再回到图1中的目录内容,如果在“网页2”引用“海贼王”这张图片,图片路径也有两种写法:

  • 写法一:<img src="../images/海贼王.jpg" alt="海贼王"/>
  • 写法二:<img src="c:/BookTest/images/海贼王.jpg" alt="海贼王"/>

1、相对路径

同样,写法一是相对路径写法,而写法二是绝对路径写法。我们分析一下,“网页2”位于test文件夹下,而海贼王图片位于images文件夹下。因此,相对于“网页2”,海贼王图片位于“网页2”上一级目录下的images文件夹下。因此,src的写法为“../images/海贼王.jpg” alt=”海贼王”。其中“../”表示上一级目录,大家要懂得这种写法。

现在就可以对相对路径写法进行总结了。相对路径的写法首先就是要分析当前网页的位置和图像的位置之间的关系,然后用一种方式把他们之间的相对关系表达出来。

2、绝对路径

写法二是“绝对路径”写法,跟“网页1”引用海贼王图片的写法一样。绝对路径,只要你的图片没有移动到别的地方,所有网页引用该图片的路径写法都是一样的。大家稍微想一下就懂了。

三、图片路径容易写错怎么办?

在一个网页引用图片,最烦人的一点就是往往容易把路径给写错,然后在浏览器图片没办法显示出来。那有什么简单方法防止出错呢?

在Visual Studio网页中,如果要在页面引用一张图片,我们只需要采取一个小技巧就可以让你的图片路径准确表达出来。

我们打开一个网页,然后用鼠标拖拽着图片到你网页代码处:

相对路径和绝对路径

当图片被拖拽到代码处之后, Visual Studio自动生成<img>标签代码:

visual studio拖拽生成相对路径

大家会惊奇地发现,系统自动生成了<img>标签代码,而且图片的路径src都自动生成了。这样我们以后引用图片都不需要自己手动写图片的src了。

系统自动生成的都是相对路径,对于一个网站来说,外部文件或图片的引用都是使用相对路径,几乎不用绝对路径,大家要非常清楚这一点。

疑问

1、为什么我使用绝对路径时,图片不能显示出来?

当我们使用绝对路径时,往往编辑器都不能把图片的路径解析出来,因此图片无法在网页中显示出来。在真正的网站开发中,对于图片或者引用文件的路径,我们100%都是使用相对路径的。因此,大家不必纠结绝对路径问题,只需要掌握相对路径的写法即可。

总结

1、相对路径和绝对路径:

(1)相对路径,就是在同一个网站下,不同文件之间的的位置定位。引用的文件是相对当前网页的位置而言的,根据这个相对位置得出相对路径。

(2)绝对路径,指的是完整的路径。

2、在visual studio中引用图片,都是采用拖拽方式自动生成代码;

3、对于一个网站而言,外部文件或图片的引用都是使用相对路径,几乎不用绝对路径。

相关阅读

Android Studio菜鸟开发————RelativeLayout相对布

相对布局是通过相对定位的方式让控件出现在布局任意位置; 在相对布局中如果不指定控件摆放的位置,那么控件都会被默认放在Relative

相对论中最难理解的时间膨胀效应,使用相对的观点才能真

有一句名言是这样讲的:时间就是金钱,而金钱是用来商品价值的,在通货膨胀如此严重的今天,时间膨胀是不是由通货膨胀引起的

相对路径与绝对路径的优缺点及作用

首先我们阐述一下什么是绝对路径,什么是相对路径?绝对地址就是指文件或目录真实存在的路径,简单来说就是整个路径全部都会写出来,中间

如何使用相对路径和绝对路径

学习绝对路径和相对路径的知识对SEO站长来说用处是非常大的,可以说是每个网站运营人员必备的技能。很多时候,我们网站需要修改图片

时间戳的使用:什么时候该用绝对值,什么时候该用相对值?

就像生物体一样,信息也会随着时间的推移而更新。今年有用的信息,过几年可能就没那么重要了。所以给你的内容加上时间戳是很重要的。

分享到:

栏目导航

推荐阅读

热门阅读