经常在页面中引用图片，html页面等，自己常常弄错相对路径和绝对路径，今天写下此文总结一下。 
   直接举例说明吧。 

  在 D:\例子\html下有这么几个文件和文件夹 
   
 

  1.若引用的资源和本身在同一路径下（既在同一目录下） 
      
     在example.html中引用tupian.gif 

     相对路径：<img src="http://www.mamicode.com/tupian.gif" border="0"/> 
     绝对路径：<img src="d:/例子/html/tupian.gif" border="0"/> 

绝对的都差不多，只说相对路径。 

2 要引用的文件在下一级文件夹下，文件名前加子文件夹名称 
   假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
   假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html 
   在info.html加入index.html超链接的href应该这样写：html/tutorials/index.html 

3 要引用的文件在上一级文件夹下，文件名前加../ 
    假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
    假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html 
   在info.html加入index.html超链接的代码应该这样写： 
    <a href="http://www.mamicode.com/index.html">index.html</a> 

举一反三：  ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推 

4 更复杂的情况： 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\html\index.html 
在info.html加入index.html超链接的代码应该这样写：<a href="http://www.mamicode.com/html/index.html">index.html</a> 

5.最后一个例子 
    假设路径：D:\例子\html\style\view\pop.css 
              D:\例子\html\images\view\tupian.gif  
在css中引用这个图片：<img src="http://www.mamicode.com/images/view/tupian.gif" border="0"/>