绝对路径、相对路径、根路径

article/2025/11/8 23:13:16

今天探讨一下浏览器和服务器中的绝对路径、相对路径和根路径

浏览器中

对于浏览器而言,是无法知道服务器中,文件目录路径的。因为浏览器获取的文件资源,很可能跟服务器中文件资源目录不对应。而服务器是知道每个文件和资源在具体的哪个位置存放。

浏览器中的相对路径:

下面代码中的reset.css  header.css  index.css是相对路径。你以为是相对当前的html文件index.html吗?不是!

而是相对于当前浏览器的url路径。

<!--  index.html -->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./static/common/css/reset.css"><link rel="stylesheet" href="./static/common/css/header.css"><link rel="stylesheet" href="./static/index/css/index.css"><title>首页</title>
</head>

假如当前的url地址是:

当前的网址:https://www.webpackjs.com/concepts/entry-points/

对于浏览器而言,浏览器的对当前路径的理解是:

从服务器中获取服务器下concepts文件夹下的名为entry-points/的文件。这里的“entry-points/”是一个文件,

比如:路径localhost/a/b/c  那么c是一个文件,而c在服务器的a目录下b目录中

比如:路径localhost/a/b/c.html 好吧,这下明白了吧,c.html是有后缀名的文件。

有时候我们可以不用写引入的资源文件的的后缀名,我想你在开发中肯定遇到过可以不写后缀名的情况。

所以对于浏览器而言。从服务器localhost/a/b/c 或 localhost/a/b/c.html中获取的c文件,那么c文件中的相对路径,都是相对文件c的。

如果浏览器获取资源的路径和服务器中的实际路径是一样的,那么浏览器解析该文件的时候,相对路径会和服务器中的一致。

但是,问题是,服务器中的文件位置并不是一定和浏览器请求的路径一致。

为什么呢

因为对于服务器而言,localhost:a/b/c 这只是一个请求地址,服务器接收到浏览器该请求的时候,可以返回服务器中任意一处的资源作为响应给给浏览器。

那么浏览器认为的文件资源地址就和真实的地址不一致。这样的话,相对路径就会出问题。

问: 为什么服务器要处理的资源时,和浏览器请求的路径不一致?

比如:浏览器请求localhost/a/b/c  服务器接收到这个请求,响应localhost/a/d/static/index.html 响应一个html文件给浏览器。

这样做,就不会让其他人通过浏览器的路径找到服务器中对应的资源。

示例:

请求地址:http://localhost:8080/javascript/basic/js_basic.html

network获取该资源:

实际上服务器处理该http://localhost:8080/javascript/basic/js_basic.html请求的时候,可以将服务器任意一处的资源,响应给浏览器。

浏览器被欺骗了,以为服务器中有对应目录下的js_basic.html,其实它不知道,服务器可以不去拿对应目录的资源,甚至是服务器中根本可以没有javascript/basic目录。假如服务器响应的是index.html作为这次请求的响应内容。

那么index.html内容中,如果有相对路径的资源,就会去按javascript/basic/js_basic.html作为相对路径,去查找文件。这样肯定是查找不到的。

建议:不写相对路径,写根路径或者写localhost/a/b/index.html这样的服务器绝对路径

根路径 和 localhost:/ 绝对路径

 ——》浏览器中根路径 / 是指服务器web服务的路径。=== 等价于 localhost:/

对于浏览器而言:四种路径,上面提到的一种资源加载情况和下面的三种情况,都符合浏览器的这些特性。

static/index   也是相对路径

./static/index    相对路径

www.baidu.com/static/index   这样的服务器地址路径

/   服务器绝对路径

特别注意:如果路径书写不规范,比如写 baidu.com/static/index 是相对路径。www.baidu.com/static/index 也是相对路径。只有:location.href = 'http://www.baidu.com/static/index';是真正的服务器地址路径。

 

form表单提交路径

查看该文件中,提到的目录跳转:https://blog.csdn.net/zyz00000000/article/details/111137701

 

a标签的href跳转

<a href="./index">  当前文件夹下的index文件 ——浏览器的特性,当前文件夹

<a href="index">  当前文件夹下的index文件 ——浏览器的特性,当前文件夹

<a href="http://localhost:8080/index">    ——跳转到该路径

<a href="/index">  ——跳转到localhost/index路径

localhost.href 属性跳转路径

location.href = './index';  相对路径

location.href = 'index';    相对路径

location.href = '/index';    服务器地址绝对路径

location.href = 'http://www.baidu.com/static/index';  服务器地址路径

服务器中(node服务器)

相对路径

相对当前文件的路径

但express.static()和fs.readFile()对文件的操作,是相对控制台的地址。所以此处我们需要使用node中的绝对路径path.join()方法。

绝对路径:

node中有动态绝对路径,是相对于控制台的。

根路径: / 

服务器中 根路径就是指当前盘符的根目录,比如如果是本地开启的服务器,那么根目录可以是D:盘

在Linux中,根路径就是指 / 根目录。

 

 


http://chatgpt.dhexx.cn/article/vH790Orc.shtml

相关文章

c/c++ 绝对路径与相对路径

电脑硬盘C盘Program Files下&#xff0c;建新项目“test”&#xff0c;"test"下建立子文件夹“file”和头文件"data.h"&#xff0c;"file"下建新建文件“data.cpp”, 电脑资源管理器显示目录 C:Program Files\test\file\data.cpp 1. 相对路径 …

【详解】绝对路径和相对路径

通俗易懂&#xff1a; ①绝对路径&#xff1a; 在计算机中找到文件的位置&#xff0c;计算机表示文件位置的方式是路径。描述计算机完整的文件位置的路径称为绝对路径&#xff0c;如C:/website/web/a.html&#xff0c;这样我们通过这个路径找到文件的位置。在网站中&#xff0c…

7、绝对路径和相对路径

我们在使用 HTML 中的 <a> 标签、<img> 标签、<link> 标签以及 <script> 标签时往往会涉及到路径。例如 <a> 标签&#xff0c;如果我们在写路径时&#xff0c;使用了错误的路径&#xff0c;就会导致跳转失败&#xff0c;为了避免这种情况&#x…

Java中的绝对路径和相对路径

绝对路径和相对路径&#xff1a; 绝对路径&#xff1a; 绝对路径名是完整的路径名&#xff0c;不需要任何其他信息就可以定位它所表示的文件。&#xff08;注意&#xff1a;文件路径不能出现中文字符&#xff0c;否则可能会报错&#xff09; 相对路径&#xff1a; 在IDEA环境中…

Linux中的绝对路径和相对路径

回到顶部 一、介绍 1&#xff0c;文件路径 什么是文件的路径&#xff1f; 答&#xff1a;这个文件存放的地方&#xff0c;可以联想为 文件的“家”。 在Linux中&#xff0c;存在着绝对路径和相对路径 绝对路径&#xff1a;路径的写法一定是由根目录 / 写起的&#xff0c;例…

最最基础的干货:Linux中的绝对路径和相对路径

路径是Linux中最基本的概念之一&#xff0c;这是每个Linux用户都必须知道的。 路径是Linux中最基本的概念之一&#xff0c;这是每个Linux用户都必须知道的。 路径是指文件和目录的引用方式。它给出了文件或目录在 Linux 目录结构中的位置&#xff0c;由名称和斜杠组成。 /ho…

文件名 绝对路径与相对路径

EGE专栏&#xff1a;EGE专栏 目录 1. 文件路径1.1 DOS路径的构成1.1.1 卷号或驱动器1.1.2 目录名称1.1.3 文件名 1.2 当前目录 (Current directory)程序中当前目录的获取 1.3 切换盘符&#xff08;驱动器跳转&#xff09;1.4 设置当前目录1.4.1 驱动器的当前目录如何查看各驱动…

【软考学习14】绝对路径和相对路径的区别和联系

本文讲解文件存储中绝对路径和相对路径的区别和联系。简单来讲&#xff0c;绝对路径是把文件所在的完整路径逐一标识出来&#xff0c;相对路径是对某个目录的参考路径&#xff0c;在实战项目的开发中&#xff0c;相对路径会使用的多一些&#xff0c;绝对地址可以用于开发调试环…

python绝对路径和相对路径

今天记录一下python绝对路径和相对路径的问题 提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、绝对路径二、相对路径三、如何查看当前所在目录 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可…

python的绝对路径和相对路径

一、绝对路径 一个文件的真实位置&#xff0c;根据这个路径层级可以找到这个文件即绝对路径。在wins上可以通过shift 鼠标右键调出来该文件的绝对路径&#xff0c;shift建按住不要松。 二、相对路径 相对路径即相对于当前的工作文件夹&#xff0c;你的路径是什么。 【绝对路径…

关于绝对路径与相对路径(详细)

绝对路径与相对路径总结&#xff08;详细&#xff09; 绝对路径与相对路径1 绝对路径1.1绝对路径&#xff08;盘符&#xff09;1.2绝对路径&#xff08;网址&#xff09; 2 相对路径2.1 相对路径(平级)2.2 相对路径(上一级)2.3 相对路径(下一级) 绝对路径与相对路径 在页面布局…

【计算机基础】绝对路径和相对路径

目录 一.绝对路径 二.相对路径 例如 三.举例 一.绝对路径 绝对路径是指从根目录开始的完整路径&#xff0c;包括所有父目录的路径&#xff0c;直到目标文件或者目录 所在的位置。 全文件名全路径文件名绝对路经完整的路径 例如&#xff0c;在windows系统中&#xff0c;绝…

Navicat premium 12 破解版下载及安装过程

在网上找了很多Navicat的破解版及下载补丁&#xff0c;都失效了&#xff0c;发现自己保留了一份&#xff0c;分享给大家。 链接&#xff1a;https://pan.baidu.com/s/1wK0j9SCm3LQLQmArjzwIyw 提取码&#xff1a;2333 1、首先安装navicat120_premium_cs_x64.exe&#xff0c;安…

LinuxCentOS安装破解版Navicat

首先在官网下载好对应位数版本的Navicat https://www.navicat.com.cn/download/navicat-premium 然后上传到linux上解压好 双击进来后点开这个文件 把编码改为中文 进入Navicat文件夹里,把该文件夹下所有东西都删除掉,留一个空文件夹 https://download.csdn.net/download/kxj1…

Mac OS下破解Navicat Premium

1、下载Navicat Premium 英文64位 http://download.navicat.com/download/navicat120_premium_en.dmg 中文简体64位 http://download.navicat.com/download/navicat120_premium_cs.dmg 2、生成自己的RSA公钥私钥对 注意&#xff1a;密钥是2048位的&#xff0c;PKCS#8格式 生…

navicat 历史版本下载

这里以 navicat premium 举例 进入官网 http://www.navicat.com.cn/选择 navicat permium 16点击免费试用点击直接下载&#xff0c;进入下载页面右键点击下载处【下图所示】修改链接&#xff0c;即可直接下载指定版本 点击免费试用 点击直接下载 进入下载页面会自动下载一次&a…

deepin安装navicat12 premium (破解版)替换商店的11版

参考&#xff1a;http://www.pianshen.com/article/8781183806/ 一、首先下载破解版的navicat 链接&#xff1a;https://pan.baidu.com/s/1ulptSderoG0EbEQpO3Adww 提取码&#xff1a;8oc3 二、解压 下载压缩文件&#xff0c;双击压缩文件&#xff0c;拖出文件即可 三、运…

mac 破解安装 navicat

Navicat Premium For Mac 12.0.2x 破解教程 安装步骤 第一步&#xff1a;下载Navicat Premium For Mac 12.0.22版本&#xff0c;正常安装。 navicat 下载地址&#xff1a;Navicat Premium for Mac v12.0.22下载 第二步&#xff1a;Finder中&#xff0c;选择应用程序 -》选择…

安装并破解Navicat的步骤

首先&#xff0c;准备一个Navicat的应用程序&#xff0c;以及的破解文件的压缩包(这个压缩包我会上传)。如下图&#xff1a; 本次采用的破解方式是文件覆盖破解。 首先&#xff0c;先点击Navicat的应用程序来安装它&#xff0c;如下图&#xff1a; 点击上图中的“下一步”&…

Navicat中文版破解安装

1.下载Navicat_20238.zip文件&#xff0c;解压到制定文件夹 2.下载安装navicat110_mysql_cs_x86.exe&#xff0c;完成后&#xff0c;将PathNavicat.exe放入Navicat for MySQL文件中&#xff0c;并运行。破解完毕