绝对路径、相对路径、根路径-向日葵屋

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

浏览器中

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

浏览器中的相对路径：

下面代码中的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获取该资源：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70

实际上服务器处理该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跳转

当前文件夹下的index文件 ——浏览器的特性，当前文件夹

当前文件夹下的index文件 ——浏览器的特性，当前文件夹

——跳转到该路径

 ——跳转到localhost/index路径

localhost.href 属性跳转路径

location.href = ‘./index’; 相对路径

location.href = ‘index’; 相对路径

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

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