相对路径和绝对路径

:smile:

相对路径: 定位于当前文件位置访问其他资源

绝对路径: 定位于盘符或项目根目录访问其他资源

1. 前言

在web中，Linux，或者本地电脑中，会时常遇到路径，文件，目录这些问题

如，写HML会遇到引用文件，图片，这时候，路径就比较重要，选用相对路径还是绝对路径，如何配置，理解？

1.1. 文件是什么?

储存信息的载体，信息包括(图片，文字，图像，视频，音频等)
计算机文件是以计算机硬盘为载体存储在计算机上的信息集合。
文件包括：文本文档，图片，程序等
文件通常具有三个字母的文件扩展名，用于指示文件类型（例如，图片文件常常以. JPEG, 格式保存并且文件扩展名为．jpg）。

也就是说，文件一般是有扩展名的

如 .txt,.md,.doc,.pptx,.png,.html

1.2. 文件夹是什么?

装文件或文件夹的容器

如下图，一个个就是文件夹

文件夹里面可以有文件和文件夹

1.3. 目录是什么?

如要描述 C:\Windows文件夹下的内容，就可以说，C:\windows目录中的内容

文件夹和目录本质是一个东西，只不过目录侧重内容展示

如下图

可以说 C:\windows文件夹下有addins文件夹，也可以说C:\windows目录中有addins文件夹

1.4. 根是什么?

如果是windows电脑文件系统，根一般是指的 磁盘，如C,D,E

使用路径的目的是定位所需资源

正确使用绝对路径和相对路径

【案例】假设，有 index.html文件，需要访问外部资源demo.jpg

js,css,images,index.html文件或文件夹都在web_project目录中，或者说在web_project文件夹下


    test────┐
            │
            ├─web_project─┐
            │             │
            │             ├───  css
            │             │
            └──demo.jpg   ├───  js
                          │
                          ├───  imgs
                          │
                          └───  index.html

目的是从相对index.hmtl位置「找到」demo.jpg

使用 绝对路径 就是从盘符，根据目录结构定位到所需文件即可

使用 相对路径 是 ../demo.jpg ,或者 ../../test/demo.jpg 有两条路可选🔽

相对路径相关符号表示:

符号	说明
/	表示目录分隔符，或者网站，根目录
../	表示上级目录
./	表示当前目录 (`可省略`)
~/	表示用户home目录（Linux文件系统）

【案例】

   web_project─┐
                 │
                 ├───  css
                 │
                 ├───  js
                 │
                 ├───  imgs ────demo.jpg
                 │
                 └───  index.html

同样，index.html要访问 demo.jpg

可选方式

1、 ./img/demo,jpg

2、../web_project/img/demo.jpg

显然第二种，多此一举

总结，使用绝对路径访问资源有两步

1、进入到资源所在目录 (相邻访问或者多此一举访问)

2、访问资源

如 ./img表示进入了 demo.jpg的所在目录中(即img目录)

demo.jpg表示要访问资源

合起来就是 ./img/demo.jpg

再简洁省略./就是 img/demo.jpg

绝对路径的局限性 ：不灵活，缺点是换设备会出现路径找不到问题

问题：为什么自己在本地编好的页面，本地计算机预览效果正常，可以上传到服务器，就预览失败呢？

因为可能本地引入的方式是绝对路径，所表示的根是项目的根，本地计算机中表示的根也是项目的根，所以正常预览

但是，到了服务器，此时的根就可能不是项目的根，而是服务器的根，自然有出入，预览不了

理解绝对路径和相对路径