HTML相对路径 上级目录及下级目录的写法

在网页开发中，文件路径的掌握是非常关键的，尤其是当我们在不同的目录下创建超链接时。关于路径表示的方法，我们可以这样理解：上级目录使用 `../` 表示源文件所在目录的上一级目录，`../../` 表示源文件所在目录的上上级目录，以此类推。相反，下级目录则直接写下级目录文件的路径即可。

假设我们有 `info.html` 和 `index.html` 两个文件，在不同的路径下，如何在 `info.html` 中为 `index.html` 创建超链接呢？让我们来看几个例子。

假如 `info.html` 位于 `c:\Inetpub\wwwroot\sites\blabla\` 目录下，而 `index.html` 位于同一目录下的 `sites` 文件夹内，那么超链接的代码应该这样写：`index.html`。"../" 表示源文件所在目录的上一级目录，也就是 `sites` 文件夹。

再假设 `info.html` 同样位于 `c:\Inetpub\wwwroot\sites\blabla\` 目录下，但这次 `index.html` 位于更深一级的 `wowstory` 文件夹内。此时超链接的代码应写为 `index.html`。"../wowstory/" 表示从当前目录向上跳一级然后进入 `wowstory` 文件夹。

当下级目录引用下级目录的文件时，我们直接写下级目录文件的路径即可。例如，如果 `info.html` 位于 `c:\Inetpub\wwwroot\sites\blabla\` 目录下，而 `index.html` 位于同一目录下的 `html` 文件夹内，超链接代码应为 `index.html`。"html/" 就是直接指向同一目录下的 `html` 文件夹。

同理，如果 `index.html` 位于 `c:\Inetpub\wwwroot\sites\blabla\html\tutorials\` 目录下，那么我们在 `info.html` 中创建超链接的代码应该是 `index.html`。"html/tutorials/" 表示同一目录下的 `html` 文件夹中的 `tutorials` 子文件夹。

理解了这些基本的路径表示方法后，我们就可以轻松地在不同位置的 `info.html` 文件中为 `index.html` 创建超链接了。记住，无论路径如何变化，核心的原则始终是：上级目录使用相对路径 "../" 表示，下级目录则直接使用下级路径。这样，无论文件在哪里，我们都能准确地通过超链接找到它们。