XHTML 相对路径与绝对路径

文件路径

文件路径就是文件在电脑（服务器）中的位置，表示文件路径的方式有两种：相对路径和绝对路径。

路径标识：

标识符号	说明
/	路径标识
.	当前目录
..	上一层目录

“.”和“..”常与“/”结合使用表示各个路径层次：

 

路径	说明
./	当前路径，可省略
/	网站根目录，为绝对路径
../	上一层目录，可重复使用，如../../，表示上上层目录

相对路径(Relative Path)

相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利，大部分情况下我们使用的是相对路径。

 

相对路径的例子：

<img src="images/flower_1.jpg" alt="花朵" />

 

这个是在我们例子主页index.html里img标签使用相对路径标识图像来源的例子。

在该例子中，index.html存放于E:/hmtl中，而图像位置为E:/html/images/flower_1.jpg中。图像相对于index.html的路径就是images/flower_1.jpg。

下面的写法效果是一样的：

<img src="./images/flower_1.jpg" alt="花朵" />

 

也就是说，通常对于当前路径，可以采用省略的写法，浏览器默认为当前路径。

如果在index.html同目录下有个1.html，那么要从index.html做一个链接到1.html，使用相对路径：

<a href="1.html">从index.html链接到当前目录的1.html</a>

 

如果1.html在E:/hmtl/test目录下，要从1.html做一个链接到index.html和使用图片目录下的图片，使用相对路径：

<a href="../index.html">从1.html链接到上一层目录的index.html</a>
<p>指定图片：</p>
<img src="../images/flower_1.jpg" alt="花朵" />

绝对路径(Absolute Path)

绝对路径一般是指带有网址的路径，非本站外的资源都要使用绝对路径。如本站引用thinkphp.cn的图片链接

<a href="http://www.thinkphp.cn/" target="_blank"><img src="http://www.thinkphp.cn/logo88X31.gif" /></a>

 

在该例子中，对超链接标签和图像标签里的属性都使用了绝对路径。

网站根目录

网站根目录用“/”表示，是一种特殊的绝对路径，它表示网站（本站）的第一层次。

使用绝对路径的例子：

<img src="/images/flower_1.jpg" alt="花朵" />

 

等效于：

<img src="http://www.5idev.com/images/flower_1.jpg" alt="花朵" />

 

使用根路径其优点是比较直观，计算方式是从根目录开始计算，缺点是如果内容层次发生了变化哪怕产生了同级的变动，都需要变动目录写法。