相对路径和绝对路径总结

2020-04-04

文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。在网页设计中通过路径可以表示链接，插入图像、Flash、CSS文件的位置。这里总结一下相对路径和绝对路径的问题。

./ 就是当前目录所在的目录下，./ 可以省略

../ 是上一级目录的意思，如果是两层上级目录，就是 “../../” ，因此 ../ 表示当前文件的父目录所在的目录下，感觉很绕口，可以看一下1.3的内容。

/ 表示下一级目录

一、相对路径(Relative Path)

相对路劲：以引用文件所在的位置为参考基础，而建立出的目录路径。

表现在网页设计中就是，图片相对于HTML页面的位置。

下面以需要引用的文件为（HTML），被引用图片(IMG) 来介绍相对路径的几种情况。

1.1 HTML 和 IMG 是同级目录

A 和 B 拥有一个相同的父目录，目录结构如下：

|--文件夹
    |--index.html
    |--pic.png

同一目录下的文件引用有两种方法，以css.css中引用图片pic.png为例。

<img src="pic.png">
<img src="./pic.png">  // ./表示的就是当前目录下的意思。

1.2 IMG 的父目录或祖先目录和 HTML 是同级目录

|--images     
  |--pic.png 
  |picture
    |--pic1.png 
|--index.html

如上图，index.html想要引用图片pic.png。

pic.png 的父目录images 和 index.html是同级目录

src="images/pic.png"

这句话可以理解为index.html先找到他的同级目录images，进入images目录后，定位到images的下一级目录pic.png。

pic1.png 的祖父目录images 和 index.html是同级目录，引用方式相同，

src="images/picture/pic1.png"

1.3 IMG 在 HTML 的上级目录

目录结构如下

1
2
3

|--index   
  |--index.html  
|--pic.png

html文件要引用img的时候，需要用到 ../ ,下面这句话的意思也就是，index.html回溯到上一级目录index之后，定位到index的统计目录pic.png。

src="../pic.png"

如果目录结构复杂一些，如下

|--images     
  |--pic.png 
  |picture
    |--pic1.png
|--css   
  |--xx.css

css 文件想要引用 img图片：

src="../images/pic.png"
src="../images/picture/pic1.png"

1.4 不同目录

如下：

css文件位置：Pro/test/css/style.css

图片文件位置：Pro/platform/images/xxx.jpg

style.css回退两级目录到 Pro文件下下的text目录和xxx.jpg的祖先目录 platform 是同级目录，引用路径如下。

background:url(../../platform/images/xxx.jpg )

二、绝对路径(Absolute Path)

　绝对路径又分为本地绝对路径和网络绝对路径。本地路径是指文件在硬盘上真正存在的路径。网络路径就是带有网址的路径

本地路径如下

background: url(D:\dev\uploadfile\测试图1.png)

网络路径如下

<a href="https://futuwxq.github.io/">链接到本站的首页</a>

三、根目录

根目录指逻辑驱动器的最上一级目录，它是相对子目录来说的。打开“我的电脑”，双击C盘就进入C盘的根目录，双击D盘就进入D盘的根目录。
根目录在文件系统建立时即已被创建，其目的就是存储子目录（也称为文件夹）或文件的目录项。一“棵“目录树，树的最根本就是它的根（根目录）。

目录文件夹:就是普通文件夹,里面只不过存放了我们做页而所需要的相关素材,比如html文件、图片等。

根目录:打开目录文件夹的第一层就是根目录

例如我们平时写一个项目myApp，myApp就是目录文件夹，进入这个myApp，就是根目录。

当这个项目在服务器中跑出来的时候网址类似这样，https://www.example.com/myApp/...。

假设项目里面有一个servlet，容器为他分配的路径是 https://www.example.com/myApp/cool/servlet1.do，当我们在这个servlet里需要定向转发时候，

sendRedirect("foo/stuff.html")，

容器会转向 https://www.example.com/myApp/cool/foo/stuff.html ，容器找到目录文件夹myApp，发现是相对URL，就保存目录文件夹，然后利用上面讲的相对路径的同级目录那套去定位html页面。

sendRedirect("/foo/stuff.html")

容器会转向 https://www.example.com/foo/stuff.html，容器找到目录文件夹myApp，发现是绝对URL，去掉目录文件夹以及之后部分，将绝对URL拼接在域名后面形成新的地址。

总结

在做项目的时候要注意路径的使用，路径错误将会导致无法加载相应的文件而报错等问题。

尽量使用相对路径去简化路径。

一 、 相对路径(Relative Path)