文件的路径

注：本篇文章内容是参考其他博主写的，因此内容可能会有些删减，需要的可以查看原文，原文链接如下：
参考1：https://blog.csdn.net/qq_34107571/article/details/82834825
参考2：https://blog.csdn.net/hgd613/article/details/8041662

相对路径和绝对路径

我们在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、绝对路径

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

大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以 http://www.pckings.net/img/photo.jpg来确定文件位置的方式也是绝对路径。

二、“网页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”引用海贼王图片的写法一样。绝对路径，只要你的图片没有移动到别的地方，所有网页引用该图片的路径写法都是一样的。大家稍微想一下就懂了。



总结

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

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

（2）绝对路径，指的是完整的路径。

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

练习1

比如说你的C盘ABC文件夹下有两个文件file1和file2如果让文件file1说出文件file2的位置(也就是路径),那么它有两种表示方法:

第一种：C:\ABC\file2 这就是绝对路径,指明file2文件在C盘ABC文件下,从最大的目录C盘开始表示出来.

第二种：file2 这就是相对路径,因为file1文件和file2文件都在C:\ABC下,所以它们的路径前面"C:\ABC"都是一样,就不用表示出来了.

练习2

  注意以下所有例子中都是index.htm文件中联接有一张图片photo.jpg。

  例：
  c:/website/web/index.htm
  c:/website/img/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢？
  错误写法：img/photo.jpg
  这种写法是不正确的，在此例中，对于index.htm文件来说img/photo.jpg所代表的绝对路径是：c:/website/web/img/photo.jpg，显然不符合要求。
  正确写法：使用../img/photo.jpg的相对路径来定位文件

练习3

  例：
  c:/website/web/xz/index.htm
  c:/website/img/images/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢？
  错误写法：../img/images/photo.jpg
  这种写法是不正确的，在此例中对于index.htm文件来说../img/images/photo.jpg所代表的绝对路径是：c:/website/web/img/images/photo.jpg。
  正确写法：可以使用../../img/images/photo.jpg的相对路径来定位文件

练习4

  例：
  c:/website/web/xz/index.htm
  c:/website/web/img/photo.jpg
  在此例中index.htm中联接的photo.jpg应该怎样表示呢？
  错误写法：../../img/photo.jpg
  这种写法是不正确的，在此例中对于index.htm文件来说../../img/photo.jpg所代表的绝对路径是：c:/website/img/photo.jpg。
  正确写法：可以使用../img/photo.jpg的相对路径来定位文件

而把页面传到服务器上就总是出现看不到图片，css样式表失效等错误。这种情况下多半是由于你使用了错误的路径，在应该使用相对路径的地方使用了绝对路径，导致浏览器无法在指定的位置打开指定的文件。

  另外，在网站的应用中，通常我们使用"/"来表示根目录，/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是这样使用对于初学者来说是具有风险性的，因为要知道这里所指的根目录并不是你的网站的根目录，而是你的网站所在的服务器的根目录，因此当网站的根目录与服务器根目录不同时，就会发生错误。

  让我们先来分析一下为什么会发生图片不能正常显示的情况。举一个例子，现在有一个页面index.htm,在这个页面中联接有一张图片photo.jpg。他们的绝对路径如下：
  c:/website/index.htm
  c:/website/img/photo.jpg

  如果你使用绝对路径c:/website/img/photo.jpg，那么在自己的计算机上将一切正常，因为确实可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件，但是当你将页面上传到网站的时候就很可能会出错了，因为你的网站可能在服务器的c盘，可能在d盘，也可能在aa目录下，更可能在bb目录下，总之没有理由会有c:/website/img/photo.jpg这样一个路径。那么，在index.htm文件中要使用什么样的路径来定位photo.jpg文件呢？对，应该是用相对路径，所谓相对路径，顾名思义就是自己相对与目标位置。在上例中index.htm中联接的photo.jpg可以使用img/photo.jpg来定位文件，那么不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出错。

  另外我们使用“../”来表示上一级目录，“../../”表示上上级的目录，以此类推。（学习过dos的朋友可能更容易理解）

 

绝对路径，从根目录为起点到你所在的目录；
相对路径，从一个目录为起点到你所在的目录。

例如：
             ┍ A文件夹
          C -|
             ┕ B文件夹

绝对路径： C:\A文件夹

相对路径（如果你在B文件夹时）： ..\B文件夹  （‘..\’向上一级意思）