URL路径（绝对与相对）

一、引言

             URL路径的写法在项目开发中经常用到，不论是引包，或者是JS，或者是样式等等。但如果在引文件的时候，路径写错也是很常见的问题，往往会导致引用失效。比方说我今天在网上下载了一个css，引的时候，不知道它里面还要引font，就会报错，后来加上font文件后还需要修改路径。

二、绝对路径与相对路径

         绝对路径（Absolute Path）：不需要依靠其他信息就可以根据绝对路径判断出文件的位置。有两种，① 从盘符开始的路径（也叫物理路径），例如：C:\aa\bb\cc.txt。②带网址的路径，例如：http://www.aabbcc.com/aa/bb/cc.html。

         

         相对路径（Relative Path）：相对意味着需要参照物，即自己相对于参照物的位置。（稍后会详细描述）

         根目录（Root Directory）：多用于Web应用站点，可以理解为网站的最上一级目录，用 "/" 表示。例如：

<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

         注：../代表上一级目录，../../则代表上上一级目录，以此类推。

三、相对路径详解

        （假设以下列举情况均为在a.html中引用b.html）

       1、若a.html和b.html在同一级目录下

             即a.html路径为：C:\xx\yy\a.html

                 b.html路径为：C:\xx\yy\b.html

             那么可写为：<a href="b.html">a.html中引用b.html</a>

           2、若b.html是与a.html的上一级目录在同一级目录下

             即a.html路径为：C:\xx\yy\zz\a.html

                 b.html路径为：C:\xx\yy\b.html

             那么可写为：<a href="../b.html">a.html中引用b.html</a>

       3、若b.html是与a.html的上上级目录在同一级目录下

             即a.html路径为：C:\xx\yy\zz\tt\a.html

                 b.html路径为：C:\xx\yy\b.html

             那么可写为：<a href="../../b.html">a.html中引用b.html</a>

        4、若a.html和b.html路径如下

             即a.html路径为：C:\xx\yy\zz\tt\a.html

                 b.html路径为：C:\xx\yy\ff\b.html

             那么可写为：<a href="../../ff/b.html">a.html中引用b.html</a>

四、结尾语

       在开篇中的提到的在css中引font的列子，它们之间的位置关系如下（左图），则在css中引font有以下两种写法（右图）。其中红框的写法用的是相对路径的写法，蓝框的写法用的是根目录的写法。