绝对路径与相对路径的原理

本文先记录了绝对路径与相对路径分别长什么样，然后是演示示例的文件结构和相对路径的表示方法，最后是演示示例。

1.绝对路径与相对路径

像/public/image.jpg这样以"/"开头的路径是绝对路径,像./public/image.jpg、../public/image.jpg、../../public/image.jpg这样分别以'./'、'../'和'../../'开头,或者像public/image.jpg这样开头什么也不加的路径是相对路径。
假设有如下几个文件：

• public/Dir1/SubDir1/Ref1.html
• public/Dir1/SubDir2/Ref2.html
• public/Dir2/SubDir3/Ref3.html
• public/Dir2/SubDir4/Ref4.html
• public/Dir2/SubDir4/SubDir5/Ref5.html
• public/Dir2/Ref6.html
  他们有的路径层次较多，有的路径层次较浅，这时我选一个public/Dir2/SubDir4/Ref4.html这个路径层次处于中间位置比较特殊的文件作为研究对象，来探究绝对路径与相对路径的表示方法。

2.文件层次结构如图：

3.几种相对路径表示方法

• 路径开头什么也没有表示同级文件或目录（我的rails项目中是这样的）。
• .或./表示当前目录。
• ..或'../'表示上一级目录。
• 以此类推，../../表示上上级目录。

4.绝对路径与相对路径实例演示

4.1相对路径的计算要先找到目标的父目录，然后从其父目录向下找到目标文件或文件夹，表示的时候运用上述几种相对路径的表示方法，我的项目是rails项目：

本起始页是：public/Dir2/SubDir4/Ref4.html

• 到达跟它同一目录的public/Dir2/SubDir4/Ref7.html（路径开头什么也没有表示同级文件或目录）:
  <a href="Ref7.html">"Ref7.html"</a>
  它到达 http://localhost:3000/Dir2/SubDir4/Ref7.html
• 到达它同级文件public/Dir2/SubDir4/SubDir5的下一级目录中文件public/Dir2/SubDir4/SubDir5/Ref5.html（路径开头什么也没有表示同级文件或目录SubDir5，然后补全具体路径/Ref5.html，最后路径如下）:
  <a href="SubDir5/Ref5.html">"SubDir5/Ref5.html"</a>
  它到达 http://localhost:3000/Dir2/SubDir4/SubDir5/Ref5.html in my project
• 到达它父级文件的同级文件public/Dir2/Ref6.html（'../'表示上一级目录/Dir2），这需要越过当前路径SubDir4向上一级../到达/Dir2,然后向下到达Ref6.html:
  <a href="../Ref6.html">"../Ref6.html"</a>
  它到达 http://localhost:3000/Dir2/Ref6.html
• 到达文件public/Dir1/SubDir1/Ref1.html，这需要越过当前路径SubDir4向上两级../..到达public，然后向下两级到达到达public/Dir1/SubDir1，最后寻找Ref1.html
<a href="../../Dir1/SubDir1/Ref1.html">"../../Dir1/SubDir1/Ref1.html"</a>
  它到达 http://localhost:3000/Dir1/SubDir1/Ref1.html
• 同理到达public/Dir1/SubDir2/Ref2.html：
  <a href="../../Dir1/SubDir2/Ref2.html">"../../Dir1/SubDir2/Ref2.html"</a>
  它到达 http://localhost:3000/Dir1/SubDir2/Ref2.html
• 如果到达public/Dir2/SubDir3/Ref3.html，这需要越过当前路径SubDir4，向上一级../到达Dir2，然后向下到达/Dir2/SubDir3，寻找Ref3.html
<a href="../SubDir3/Ref3.html">"../SubDir3/Ref3.html"</a>
  它到达 http://localhost:3000/Dir2/SubDir3/Ref3.html

4.2绝对路径的计算从路径开头的'/'符号开始直至到达目标位置，示例如下：

本起始页是：public/Dir2/SubDir4/Ref4.html

• 比如要到达public/Dir2/SubDir4/SubDir5/Ref5.html，直接从/Dir2开始一路向下写全路径：
  <a href="/Dir2/SubDir4/SubDir5/Ref5.html">"/Dir2/SubDir4/SubDir5/Ref5.html"</a>
  --it lead to http://localhost:3000/Dir2/SubDir4/SubDir5/Ref5.html

5总结：

• 绝对路径是指目录下的绝对位置，直接到达目标位置，windows系统中通常是从盘符开始的路径，Linux和Mac中通常从家目录开始，完整的描述文件位置的路径就是绝对路径。如果在网站上，是以web站点根目录如localhost:3000为参考基础的目录路径。
• 相对路径就是指从这个文件所在的路径开始计算的跟其它文件（或文件夹）的路径关系。