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

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

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

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

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

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

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

服务器图片

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

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

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

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

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

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

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

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

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

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

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

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

如图所示：

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

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

代码示例：

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

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

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

代码如下：

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

效果如图：

大家发现书写规律没有？

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

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

示例代码如下：

<img src="https://bkimg.cdn.bcebos.com/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的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的

HTML元素中的属性2（路径详解）—零基础自学网页制作相关推荐

HTML页面中head标签有啥用？—零基础自学网页制作
head标签概述通过之前三节的学习,我们基本了解了HTML标记语言的基本语法,也明确了一个基本原则,那就是网页中所有的可视信息都是写在<body></body>标签之间的,在 ...
音视频格式转换神器与html视频元素加字幕—零基础自学网页制作
音视频格式转换神器--格式工厂如果您下载了上一篇<为HTML页面添加音频.视频的方法--零基础自学网页制作>(目录在结尾)中的素材,您会看到有这样一个文件,如图因为格式工厂是免费软件, ...
html打开网页过场动画_音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
音视频格式转换神器--格式工厂如果您下载了上一篇<为HTML页面添加音频.视频的方法--零基础自学网页制作>(目录在结尾)中的素材,您会看到有这样一个文件,如图这就是格式工厂软件的安装 ...
HTML表单元素初识1——零基础自学网页制作
表单元素初识我们在浏览网页时会经常遇到注册会员的界面,大概像这个样子: 或填写问卷的情况,大概像这个样子: 我们把这些内容称之为表单. 如何向自己的页面中添加表单呢? 添加表单的操作和添加表格类似. ...
CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
最简单太阳系H5动画canvas详解零基础可入
最简单太阳系H5动画canvas详解零基础可入最终结果:(实际为动画效果,金星绕轨道转动) 页面准备/html 要使用canvas,需要首先在页面中要绘制的位置放入canvas标签元素,在后期的绘 ...
html怎么设置左偏移量,CSS中margin属性的偏移量详解（代码示例）
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
宏基因组扩增子2分析流程：中文首发,史上最详系,零基础自学
本网内容首发"宏基因组"公众号,更佳阅读体验.更多相关文章,欢迎点我跳转至公众号阅读写在前面之前发布的<扩增子图表解读>系列,相信关注过我的朋友大部分都看过了(链接 ...
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...

HTML元素中的属性2（路径详解）—零基础自学网页制作

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

HTML元素中的属性2（路径详解）—零基础自学网页制作相关推荐

最新文章

热门文章