web前端中相对路径指的是什么-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

web前端中相对路径指的是什么

这篇文章主要介绍“web前端中相对路径指的是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“web前端中相对路径指的是什么”文章能帮助大家解决问题。

叠彩网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。创新互联公司公司2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

在web前端中,相对路径就是指由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系,是相对于当前文件的目标文件位置;简单来说,就是以当前文件为参考点,来确定不同文件的路径,相对路径一般会以“./”、“../”开始。好处:当整个项目移动时,项目内文件之间的相对关系没有改变,之前设置的路径任然是准确的,不用进行修改。

如何快速入门VUE3.0:进入学习

本教程操作环境:windows7系统、Dell G3电脑。

首先得明白相对路径和绝对路径的概念和区别:

相对路径:

相对路径就是指由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。

绝对路径:

绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

完整的描述文件位置的路径就是绝对路径,以web站点根目录为参考基础的目录路径。绝对路径名的指定是从树型目录结构顶部的根目录开始到某个目录或文件的路径,由一系列连续的目录组成,中间用斜线分隔,直到要指定的目录或文件,路径中的最后一个名称即为要指向的目录或文件。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

  • 个人总结:

相对路径简而言之就是相对自己所在的目录来引用其他文件(不是根目录),就是相对于当前文件的目标文件位置。

这样有个好处就是,当你整个项目移动时,你项目内文件之间的相对关系没有改变,你之前设置的路径任然是准确的。例如:Web服务器文件夹a下面有index.html和image.jpg两个文件。index.html文件里引入image.jpg,只要这两个文件的相对位置没有变(也就是说还是在文件夹a下面),那么无论上传到Web服务器的哪个位置,这个路径都是正确的。

绝对路径就是相对根目录(磁盘)开始,每个文件使用的路径都是一样的。

使用绝对路径可以防止网站被恶意抄袭,抄袭默认的链接还是指向自己的网站。只要页面中的目标文件位置不变你的链接还是指向正确的URL。在Web开发的时候一般很少使用绝对路径,因为你本地的环境和服务器上的路径可能不一样。/表示文件的根目录。

通过例子来讲解

下面我从web中最常用的html中的例子来说明相对路径和绝对路径的区别:

1、绝对路径

比如:

web前端中相对路径指的是什么

web前端中相对路径指的是什么

再来一个小例子:

比如在平时在使用计算机时要使用文件就得知道文件的位置,比如现在有一个文件index.html,要使用index.png这张图片:

D:/websize/image/index.html

D:/websize/image/img/index.png

你使用路径D:/websize/image/img/index.png就可以引用这张图片,在你的计算机上一切正常,但真正开发的时候基本上不使用绝对路径,因为项目移植困难,在其他计算机上就访问不到你的图片(他的计算机上没有你的图片)

2、相对路径(实际使用推荐)

首先明白:

  • . ./ 代表当前文件的上一级目录

  • ./  代表当前文件所在目录

比如:

web前端中相对路径指的是什么

web前端中相对路径指的是什么

在来一个小例子:

比如你的E盘下面的WEB文件夹里有两个文件互相访问。

E:/WEB/mar/img/index.html

E:/WEB/mar/image/ig/ip/pho.png

在这里想要从index.html访问pho.png,则路径是. ./image/ig/ip/pho.png

如果想反过来访问index.html,则需要路径是. ./. ./. ./img/index.html

关于“web前端中相对路径指的是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


本文标题:web前端中相对路径指的是什么
网站链接:http://kswsj.cn/article/psighs.html

其他资讯