相对路径和绝对路径

基本概念

　　文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。在网页设计中通过路径可以表示链接，插入图像、Flash、CSS文件的位置。
　　物理路径：物理路径就是硬盘上文件的路径，比如下面的文件：

d:\dreamdu\exe\1.html
d:\dreamdu\exe\first\2.html
d:\dreamdu\exe\first\3.html
d:\dreamdu\exe\first\second\4.html

　　下面的例子使用了上面四个文件进行了相互链接

相对路径(Relative Path)

　　相对路径相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。如何表示同级目录的文件？
　　2.html和3.html在同一个文件夹下， 如果2.html链接到3.html，可以在2.html中这样写:

<a href="3.html">同目录下文件间互相链接</a>

　　如何表示上级目录的文件？
　　1.html是2.html和3.html的上级目录中的文件，如果2.html或3.html链接到1.html，可以在2.html或3.html中这样写

<a href="../1.html">链接到上级目录中的文件</a>

　　../ 代表一级上级目录(间隔一个目录)
　　 ../../代表二级上级目录(间隔两个目录)
　　 比如4.html链接到1.html，可以在4.html中这样写

<a href="../../1.html">链接到上级目录的上级目录中的文件</a>

　　如何表示下级目录的文件？
　　2.html和3.html是1.html的下级目录中的文件，如果在1.html中链接到2.html， 可以在1.html中这样写

<a href="first/2.html">链接到下级目录(first)中的文件</a>

　　如果在1.html中链接到4.html，可以在1.html中这样写

<a href="first/second/4.html">链接到下级目录(first/second/)中的文件</a>

---

绝对路径(Absolute Path)

　　绝对路径又分为本地绝对路径和网络绝对路径。本地路径是指文件在硬盘上真正存在的路径。网络路径就是带有网址的路径，比如你有一个域名www.dreamdu.com，和一个网站空间，上面的四个文件就可以这么表示。

<a href="http://www.dreamdu.com/exe/1.html">链接到1.html</a>

<a href="http://www.dreamdu.com/exe/first/2.html">链接到2.html</a>

<a href="http://www.dreamdu.com/exe/first/3.html">链接到3.html</a>

<a href="http://www.dreamdu.com/exe/first/second/4.html">链接到4.html</a>

使用绝对路径的缺点

　　使用根目录和绝对路径的好处是表示路径比较简单，都是从网站的最开始目录里查找，一级一级的向下查。缺点是程序不容易移植(比如把网站做为另一个网站的一个栏目，移动到一个新的文件夹中就不行了)。

---

根目录

　　使用根目录的方式表示的路径和绝对路径的表示方式相似，去掉前面的域名就可。
　　比如：

<a href="/exe/1.html">链接到1.html</a>

<a href="/exe/first/2.html">链接到2.html</a>

---

相对路径写法总结

1.【如果源文件和引用文件在同一个目录（文件夹）里，直接写引用文件名即可。】

　　假设info.html路径是：

c:\Inetpub\wwwroot\sites\blabla\info.html

　　假设index.html路径是：

c:\Inetpub\wwwroot\sites\blabla\index.html

　　在info.html加入index.html超链接的代码应该这样写：

<a href ="index.html">index.html</a>

2.【../表示源文件所在目录（文件夹）的上一级目录（文件夹），../../表示源文件所在目录的上上级目录，以此类推。】

　　假设info.html路径是：

c:\Inetpub\wwwroot\sites\blabla\info.html

　　假设index.html路径是：

c:\Inetpub\wwwroot\sites\index.html

　　在info.html加入index.html超链接的代码应该这样写：

<a href ="../index.html">上一级目录的index.html</a>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　　假设info.html路径是：

c:\Inetpub\wwwroot\sites\blabla\info.html

　　假设index.html路径是：

c:\Inetpub\wwwroot\index.html

　　在info.html加入index.html超链接的代码应该这样写：

<a href ="../../index.html">上两级目录的index.html</a>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　　假设info.html路径是：

　c:\Inetpub\wwwroot\sites\blabla\info.html

　　假设index.html路径是：

c:\Inetpub\wwwroot\sites\wowstory\index.html

　　在info.html加入index.html超链接的代码应该这样写：

　<a href ="../wowstory/index.html">上一级目录中的某子目录下的index.html</a>

3.【引用下级目录的文件，直接写下级目录文件的路径即可。】

　　假设info.html路径是：

c:\Inetpub\wwwroot\sites\blabla\info.html

　　假设index.html路径是：

c:\Inetpub\wwwroot\sites\blabla\html\index.html

　　在info.html加入index.html超链接的代码应该这样写：

<a href ="html/index.html">子目录下的index.html</a>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　　假设info.html路径是：　　

c:\Inetpub\wwwroot\sites\blabla\info.html

　　假设index.html路径是：　

c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

　　在info.html加入index.html超链接的代码应该这样写：

<a href ="html/tutorials/index.html">多级子目录的index.html</a>