相对路径和绝对路径
相对路径: 定位于当前文件位置
访问其他资源
绝对路径: 定位于盘符
或项目根目录
访问其他资源
前言
在web中,Linux,或者本地电脑中,会时常遇到路径,,文件,目录这些问题
如 ,写HML会遇到引用文件,图片,这时候,路径就比较重要,选用相对路径还是绝对路径,如何配置,理解?
文件是什么?
- 储存信息的载体,信息包括(图片,文字,图像,视频,音频等)
- 计算机文件是以计算机硬盘为载体存储在计算机上的信息集合。
- 文件包括 :文本文档,图片,程序等
- 文件通常具有三个字母的文件扩展名,用于指示文件类型(例如,图片文件常常以
. JPEG
, 格式保存并且文件扩展名为.jpg
)。
也就是说,文件一般是有扩展名
的
如 .txt
,.md
,.doc
,.pptx
,.png
,.html
文件夹是什么?
- 装文件或文件夹的容器
如下图,一个个就是文件夹
文件夹里面可以有 文件 和 文件夹
目录是什么?
- 目录就是文件夹下的内容清单
如要描述 C:Windows下的内容,就可以说 ,C:windows目录的内容
文件夹和目录本质是一个东西,只不过目录侧重内容展示
如下图
可以说 C:windows文件夹下有addins文件夹,可以说C:windows目录中有addins文件夹
根是什么?
如果是电脑文件系统,根一般是指的 磁盘
,如C,D,E
使用路径的目的是定位 所需资源
正确使用绝对路径和相对路径
【案例】
+---->css
|
+-->web_project+---->js
test| |
| +---->images
+-->demo.jpg |
+---->index.html
假设,有 index.html
文件,需要访问外部资源demo.jpg
js,css,images,index.html文件或文件夹都在web_project
目录中,或者说在web_project
文件夹下
使用 绝对路径 就是从 盘符,根据目录结构定位到所需文件即可
使用 相对路径 是 ../demo.jpg
,或者 ../../test/demo.jpg
相对路径相关符号表示:
符号 | 说明 |
---|---|
/ | 表示目录分隔符,或者网站,根目录 |
../ | 表示上级目录 |
./ | 表示当前目录 (可省略 ) |
~/ | 表示用户home目录(Linux文件系统) |
【案例】
+---->css
|
web_projec+---->js
|
+--->img+---->demo.jpg
|
+---->index.html
同样,index.html要访问 demo.jpg
可选方式
1、 ./img/demo,jpg
2、../web_project/img/demo.jpg
显然第二种,多此一举
总结,使用绝对路径访问资源有两步
1、进入到资源所在目录 (相邻访问或者多此一举访问)
2、访问资源
如 ./img
表示进入了 demo.jpg的所在目录中
demo.jpg
表示访问资源
合起来就是 ./img/demo.jpg
再简洁省略./
就是 img/demo.jpg
绝对路径的局限性 : 不灵活 ,缺点是换设备会出现路径找不到问题
问题 : 为什么自己在本地编好的页面,本地计算机预览效果正常,可以上传到服务器,就预览失败呢?
因为可能本地引入的方式是绝对路径,所表示的根是项目的根,本地计算机中表示的根也是项目的根,所以正常预览
但是,到了服务器,此时的根就可能不是项目的根,而是服务器的根,自然有出入,预览不了