• 技术文章 >web前端 >前端问答

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

    青灯夜游青灯夜游2022-08-25 16:58:38原创547

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

    大前端成长进阶课程:进入学习

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

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

    相对路径:

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

    绝对路径:

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

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

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

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

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

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

    通过例子来讲解

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

    1、绝对路径

    比如:

    1.png

    2.png

    再来一个小例子:

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

    D:/websize/image/index.html

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

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

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

    首先明白:

    比如:

    3.png

    4.png

    在来一个小例子:

    比如你的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开发中的相对路径和绝对路径都有使用,各有优劣。简单的总结下,相对路径就是以当前文件为参考点,来确定不同文件的路径,相对路径一般会以./、../开始,当然.如果文件是同级目录./可以省略绝对路径就是以计算机的文件或者是网络上的绝对地址确定文件的路径,绝对路径一般是Windows下的盘符开始、Linux下的/开始(但是在Web服务器中,/表示Web服务器的根目录)、或者是以网址开始。

    (学习视频分享:web前端入门

    以上就是web前端中的相对路径是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:web前端 相对路径
    上一篇:前端中什么是全路径 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• web前端第三方库有哪些• web前端中的web是什么• web前端和移动前端的区别是什么• web前端包括哪三个部分• 什么是web前端工程师• web前端打包工具有哪些• web前端与app端有什么区别
    1/1

    PHP中文网