相对路径与绝对路径的使用方法

在《HTML元素中的属性1—零基础自学网页制作》这一篇教程最后内容中，我们详细展示了"绝对路径"与"相对路径"在写法上的区别。示例代码如下：

<img src="file:///D:/零基础自学网页制作/image1.jpg"/><!--绝对路径--><img src="image1.jpg"/><!--相对路径-->

那什么时候使用"相对路径"什么时候使用"绝对路径"呢？

搞清楚这个问题就要介绍一下网页制作的最后一步，上传服务器的过程与要求。

我们所有的可以通过网络在浏览器上显示的页面都是存储在网络服务器中的文件。

网络服务器是什么？大家可以理解为一台电脑，和我们使用的个人计算机在构造上差不多，但是功能更加强大、稳定。因此服务器的价格相比个人电脑更加昂贵，可靠性也要更高。

服务器图片

如果我们的网页或网站的制作完成后，需要去找一个网络服务器或是网络服务器中的部分内存（也可以自己搭建简单服务器用来测试），之后会给我们相关的账号，我们自己设置密码后，使用ftp工具上传到网络服务器中，然后给我们分配一个临时的域名用来测试网站。这样我们就可以使用手机或电脑通过浏览器在线打开自己的页面了。

那页面或网站如何上传呢？

还记得最开始我们建立的那个"零基础自学网页制作"文件夹吗？简单来说通过把这个文件夹上传就可以了，把里面"第一个页面.html"改成"index.html"这个页面就变成了我们的主页。

如果，这个页面中的所有路径都是使用绝对路径写的，这时问题就来了，

<img src="file:///D:/零基础自学网页制作/image1.jpg"/><!--绝对路径-->

页面及其所在文件夹在我的电脑上是在D盘，我上传服务器之后，文件就不一定还在服务器的D盘上，也许是在服务器的F盘呢？或者把文件发给同事，同事接收后在C盘上打开，绝对路径是不是就不能指示正确的位置了？因此页面就不能正确的找到相应信息了。

为了解决因为上传服务器或者换电脑而不能正确找到资源路径的问题，相对路径的概念就产生了，相对路径是不管你在哪个磁盘上，它只是遵循资源与页面文件的相对位置，只要文件夹中的相对位置没变，无论你把文件夹搬运到天涯海角，页面依然可以循着路径找到相关信息。

<img src="image1.jpg"/><!--相对路径-->

下面为家具体展示一下相对路径的写法以及页面文件与路径指定文件的位置关系。

<img src="image1.jpg"/><!--相对路径-->

这句代码指的是页面文件"第一个页面.html"与图片"image1.jpg"在一个文件夹中。如图所示：

如果，图片比较多，我们建立一个叫做"img"的文件夹来专门存放图片，那代码该怎么写呢？

如图所示：

打开文件夹，里面有一张图片"image2.jpg"。如图：

下面我们把这个文件召唤出来！

代码示例：

<img src="image1.jpg"/><!--相对路径--><img src="img/image2.jpg"/><!--相对路径-->

效果如下：两张图片都进来了。

那如果我们图片种类比较多，在img文件夹内部也要分文件夹，导入不同文件夹中的方法相信大家已经猜到了。图片分类如下：

代码如下：

<img src="image1.jpg"/><!--相对路径--><img src="img/办公室/image2.jpg"/><!--相对路径--><img src="img/战斗机/image3.jpg"/><!--相对路径-->

效果如图：

大家发现书写规律没有？

**相对于绝对路径来说，相对路径只需要写工程文件夹（将要上传服务器并且包含页面或网站所有内容的文件夹）内部的路径就可以了。**这里"零基础自学网页制作"文件夹可以看做是工程文件夹。因此，包括"零基础自学网页制作"文件夹，以及以前的路径信息在"相对路径中"都不需要写出。如图：红框以内的都不用写了。

那什么时候使用绝对路径呢？一般情况下，在需要引入其他网站的图片或页面或其他信息时使用绝对路径！

示例代码如下：

<img src="https://bkimg./pic/38dbb6fd5266d01694f698369a2bd40734fa35c4?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UyNzI=,xp_5,yp_5"/>

这样我们就通过访问百度百科的地址在自己的页面中打开了歼20的图片，如图：

这样做的好处是可以节省自己服务器的空间，减小工程文件夹的体积。

总结一下：

在页面中显示工程文件夹内的资源或信息使用"相对路径"，不使用"绝对路径"。

在页面中显示其他网站的资源或信息使用"绝对路径"，不使用"相对路径"。

今天的内容结束了。

最后请大家思考一个问题，为什么多个<p></p>标签中的内容会自动换行，而多个<img>标签却并排显示而不会换行呢？这个问题我们会在后面的讲解中给出答案！

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制作，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的