0

0

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

青灯夜游

青灯夜游

发布时间:2022-08-25 16:58:38

|

3554人浏览过

|

来源于php中文网

原创

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

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这张图片:

行盟APP1.0 php版
行盟APP1.0 php版

行盟APP是结合了通信和互联网的优势,加之云计算所拥有的强大信息资源,借助广大的终端传递服务,潜在的拥有巨大商机。她到底是什么,又有什么作用?她是一款手机应用软件;她是一款专门为企业服务的手机应用软件;她是一款能够将企业各种信息放入其中并进行推广传播的手机应用软件!只要轻轻一点,企业的简介,产品信息以及其他优势就能最快最大限度的透过手机展现在客户的眼前,一部手机,一个APP,你面对的将是一个6亿&

下载

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前端入门

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

63

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

31

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

73

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

20

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

7

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

4

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

49

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

11

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.5万人学习

Vue 教程
Vue 教程

共42课时 | 6.5万人学习

React 教程
React 教程

共58课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号