相对路径和绝对路径

IT教程 2年前 (2020) https://www.55wd.com
1,275

相对路径

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

我们在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>标签代码:

相对路径和绝对路径

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

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

疑问

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

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

总结

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

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

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

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

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

关于相对路径详解

前端引用路径的解析 1、客户端路径(客户端目录) href、src、url里的相对地址、完整地址是被浏览器解析的,称为客户端路径。下面仅

文章回顾

大家看了本文相对路径和绝对路径的精彩教程资源内容,是不是对相对路径和绝对路径了解更多,真心希望相对路径和绝对路径能帮助到你, 小编会一直给你带来更多教程资源文章信息。

版权声明:fc94a7db7764f593 发表于 2020-07-13 7:48:28。

本文由第三方用户分享仅代表作者观点,不代表本网站立场,秉承互联网开放分享的精神,目的在于传递更多信息,加强各行业互通交流,但对内容不作任何保证或承诺,请读者自行参考斟酌。网站发布的信息(包含但不限于版式、图片、字体、文章等素材)由第三方用户分享,版权归原作者所有,本站不承担任何相关的版权纠纷等相关责任。如您认为本篇内容侵犯了您的权益,请与我们联系,我们会及时处理。

豌豆资源网专注分享全网综合资源网站大全,致力于超实用的内容资源搜索。

转载请注明:
本文标题:相对路径和绝对路径
本文地址:https://www.55wd.com/s109395/