关于html的相对路径问题, 分为引用上级目录和下级目录

HTML有2种路径的写法：相对路径和绝对路径。

相对路径包括根相对路径（Site Root）和文档相对路径（Document）两种。

根相对路径（也称相对跟目录）的路径以“/”开头，路径是从当前站点的根目录开始计算。比如我们前面建的D盘myweb目录就是名为“myweb”的站点，这时“/index.htm” 路径，就表示文件位置为D:\myweb\index.htm。根相对路径适用于链接内容频繁更换环境中的文件，这样即使站点中的文件被移动了，其链接仍可以生效。

如果目录结构过深，在引用根目录下的文件时，用跟相对路径会更好些。比如某一个网页文件中引用根目录下img目录中的一个图，在当前网页中用文档相对路径表示为：“../../../../.. /img/a.gif”，而用跟相对路径只要表示为“/img/a.gif”就行了。

注意：在预览文件时，用根相对路径链接的内容在本地浏览器中不会显示出来，这是因为浏览器不承认站点的根文件夹为服务器。

文档相对路径就是指包含当前文档的文件夹，也就是以当前网页所在文件夹为基础开始计算路径。比如，当前网页所在位置为 D:\myweb\mypic，那么：

“a.htm”就表示 D:\myweb\mypic\a.htm；

“../a.htm”相当于 D:\myweb\a.htm，其中“../”表示当前文件夹上一级文件夹。

“img/a.gif”是指 D:\myweb\mypic\img\a.gif，其中“img/”意思是当前文件夹下名为 img 文件夹。

HTML相对路径(Relative Path)
同一个目录的文件引用
如果源文件和引用文件在同一个目录里，直接写引用文件名即可，这时引用文件的方式就是使用相对路径。

我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。

假设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">这是超连接</a>
如何表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。

假设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">这是超连接</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>
如何表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。

假设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">这是超连接</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">这是超连接</a>
HTML绝对路径(Absolute Path)
大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://www.ajaxstu.com/img/photo.jpg来确定文件位置的方式也是绝对路径。

HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。

假设你注册了域名http://www.ajaxstu.com，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。

假设你在www根目录下放了一个文件default.asp，这个文件的绝对路径就是： font color="#0058db">http://www.ajaxstu.com/default.asp。

假设你在www根目录下建了一个目录叫archives，然后在该目录下放了一个文件2886.html，这个文件的绝对路径就是http://www.ajaxstu.com/archives/2886.html。