html/css路径引用同级、下级、标准写法

<blockquote>在网页制作的过程中，少不了跟路径打交道，比如，包含一个文件，插入一个图片等，与路径都有关系，如果使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

作为初学者的我，有时会感到困惑「(°ヘ°)，这路径什么鬼Σ (ﾟДﾟ;) ，怎么写的啊(⊙_⊙)?，
下面我就介绍一下了解到的相对路径与绝对路径。
</blockquote>

根相对路径（也称相对跟目录）的路径以“/”开头，路径是从当前站点的根目录开始计算。
<blockquote>
<span style=“color: #ff0000;”>/</span> 代表根目录，慎用

<span style=“color: #ff0000;”>…/</span> 代表上一级目录

<span style=“color: #ff0000;”>…/…/</span> 代表上两级目录

<span style=“color: #ff0000;”>/…</span>代表下级目录

<span style=“color: #ff0000;”>/…/…</span> 代表下两级目录
</blockquote>
<h2>标准写法：</h2>

<strong><span style=“color:#e91e63;”>同级 直接引用文件名</span></strong>

<pre class=“line-numbers language-html”><code class=“language-html”><link rel="stylesheet" type="text/css" href="main.css" /></code></pre>

<strong><span style=“color:#e91e63;”>下级 同级目录/下级目录/文件名</span></strong>

<pre class=“line-numbers language-html”><code class=“language-html”><link rel="stylesheet" type="text/css" href="css/main.css" /></code></pre>

<br />
<h2>HTML有2种路径的写法：相对路径和绝对路径。</h2>

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

<strong><span style=“color:#69d2f9;”>1.HTML相对路径(Relative Path)</span></strong>

用途：指定由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系
<br />
如果源文件和引用文件在同一个目录里，直接写引用文件名即可，这时引用文件的方式就是使用相对路径。

下面建立两个HTML文档info.html和index.html，用作示例，要求都是在xiaomo.html加入index.html超链接。
<br />
<strong><span style=“color:#9c27b0;”>eg1：相对路径的简单应用</span></strong>

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/blabla/index.html
<br />
<strong><span style=“color:#9c27b0;”>eg2：如何表示上级目录</span></strong>

…/表示源文件所在目录的上一级目录，http://www.moshanghua.com/表示源文件所在目录的上上级目录，以此类推。

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/index.html
<br />
<strong><span style=“color:#9c27b0;”>eg3：如何表示上上级目录</span></strong>

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/wowstory/index.html

写法：index.html
<br />
<strong><span style=“color:#9c27b0;”>eg4：如何表示下级目录</span></strong>

引用下级目录的文件，直接写下级目录文件的路径即可。

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/blabla/html/index.html
<br />
<strong><span style=“color:#69d2f9;”>2.HTML绝对路径(Absolute Path)</span></strong>

大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径。

例如只要看到这个路径：c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。

类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。
<br />
<strong><span style=“color:#f44336;”>注：</strong>
<strong>如果是纯手工编写html或者css、js的话，建议用相对路径，比如：…/…/css/main.css

如果是动态文件，比如jsp、php等，最好用网站的绝对路径。比如

{ctx}/css/main.css，其中ctx是自己定义的变量，它的值等于类似于http://localhost这种地址。</strong>
<br />
<strong><span style=“color:#ff5722;”>相对路径的缺点：</span></strong>
<strong>例如：…/images/msh.png，这种写法，一旦我改变了引用页面文件的目录，这张图片就无法显示了。如果换成网站的绝对路径{ctx}/images/msh.png，那么不论我怎么移动引用的页面文件，只要图片的地址不变，都是可以访问的。</strong>
<br />
<strong><span style=“color:#ff5722;”>绝对路径的缺点：</span></strong>
<strong>对于静态文件，往往无法自动获取网站的根路径（{ctx}），所以要写绝对路径比较麻烦。</strong>