URL的中文意思是统一资源定位符。作用就是为了让我们定位互联网上的各种资源。例如我们经常浏览网站看到的每一个网页或图片---都具有唯一的URL，即通过URL地址可以成功的访问到。且这些URL地址都是唯一的。
如果想在网上想访问某个页面的时候，可以直接在浏览器中输入URL地址，例如你想中的什么是css，就可以在浏览器中直接输入：http://www.idivcss.com/xuexicss/28.html，这个地址就是一个绝对的URL地址，通过这个地址，你可以访问到这个网页上的所有资源，包括文字，和图片等。
因此，这个时候可能绝对的URL地址就会变得很长而且难以记住，并且每个网站都包含众多的url链接，所有，在站内的时候，就有必要了解Web网站站点中的文件的URL的简写形式：相对URL
相对URL用于指示资源相对于当前页面的位置，我们前面在CSS中什么是绝对定位和相对定位就讲过这个问题。例如我们一直某一个文件（dc）对应的url址为http://www.idivcss.com/xuexicss/，如果我们想访问
http://www.idivcss.com/xuexicss/70.html
http://www.idivcss.com/xuexicss/81.html
http://www.idivcss.com/xuexicss/88.html
利用相对定位和相对URL，我们就可以直接写:
dc/70.html
dc/81.html
dc/88.html
这个时候，在用浏览器运行的时候，它自动会将其转换为绝对的URL去访问，效果是跟绝对URL是一样的。在网站中使用相对URL的另一种优势就是：当我们改变了网站的域名的时候，用户还是可以成功的访问到我们的站点，而不需要改变访问URL链接，因为我们的所有链接都是相文件夹的。
下面再介绍几种不同目录该如何使用不同的相对URL：
1、相同目录
如果两个文件在同一个目录下的时候，我们直接写出文件名即可。无需指定其他路径。例如a.html和b.html在同一目录，当a页面要链接b页面时，直接写b.html即可。
2、子目录
如果与当前页面处于同一目录的是个文件夹，而你链接到的文件在该文件夹下面，则需要写出该文件夹名，在跟上要链接的文件名。当a.html与b文件夹在同一目录，在b目录下有个c.html文件，要访问到c.html：则需写：b/c.html
3、父目录
如果要访问的文件在父目录外面，则我们先必须按照路径先出去到父目录，在访问目标页面。例如a.html的父目录为b文件夹，与b文件夹同一级的有个c.html页面，那如果要访问到c.html，则需写../c.html；如果要访问到外面的2层，则需要写2个../
直接举例说明吧。
在 D:\例子\html下有这么几个文件和文件夹
1.若引用的资源和本身在同一路径下（既在同一目录下）
在example.html中引用tupian.gif
相对路径：<img src="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="../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="../html/index.html">index.html</a>
5.最后一个例子
假设路径：D:\例子\html\style\view\pop.css
D:\例子\html\images\view\tupian.gif
在css中引用这个图片：<img src="../../images/view/tupian.gif" border="0"/>
https://blog.csdn.net/yuki_lovesprogamming/article/details/60055475