绝对路径与相对路径的原理
本文先记录了绝对路径与相对路径分别长什么样，然后是演示示例的文件结构和相对路径的表示方法，最后是演示示例。
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为参考基础的目录路径。 - 相对路径就是指从这个文件所在的路径开始计算的跟其它文件（或文件夹）的路径关系。
