路径、相对路径和绝对路径

写在前面

本节内容如果不动手实践，很有可能一头雾水，请先按讲义内容自行实践再配合作业食用。

目录组织

前一节里，我们已经使用了多个文件来组成网站。现实中的网站也是如此，通常有着极其庞大数目的页面和资源（图片）。

对于这样的网站（或者说，项目），把所有页面和资源都放在根目录下显然是不合适的。

我们需要用层级目录的形式将这些资源管理起来。

假设我们有如下的目录组织方式：

看看要如何引用资源。

同一目录

假如我们在index.html里要放置图片logo.jpg，或者1.html里要创建一个跳转2.html的超链接。

因为相关的文件处在同一个目录下，可以直接访问。因此直接访问即可：

<img src="logo.jpg">

或者

<a href="2.html">点击</a>

子目录

如果index.html要放置图片title.jpg，或者index.html要跳转到1.html或者2.html。 又或者1.html或者2.html要跳转到3.html。

在这些需求里，目标资源都处在当前资源的子目录下。对于这种情况，你需要给出带子目录的路径。

例如index.html放置图片title.jpg，要这样做：

<img src="images/title.jpg">

同样，如果index.html要跳转到1.html，需要这样：

<a href="pages/2.html">点击</a>

1.html和2.html也可以通过

<a href="subs/3.html">点击</a>

来创建跳转到3.html的超链接。

思考

index.html要如何跳转到3.html？

上层目录（父目录）

子目录的跳转方式很容易理解，但他只能向下走，不能向上走。

然而向上走也是非常正常的需求，例如3.html要跳转到1.html或者2.html。这里需要特殊的表示方式来指代上层目录（父目录）。

在大多数操作系统里（实际上是所有常见的操作系统里）都用两个点号..表示当前目录的上一层。

所以在3.html里可以这样：

<a href="../1.html">点击</a>

来跳转到1.html

同理1.html和2.html也可以通过：

<a href="../index.html">点击</a>

来跳转到index.html页面。

思考

如何从3.html跳转到index.html？

又要如何才能在1.html,2.html,3.html里贴title.jpg呢？

（虚假的）绝对路径

上面所有的路径都根据当前html文件的位置来进行推导，这个路径称为相对路径，因为他始终是相对于当前的html文件而来的。

除此之外，你可以使用（文件系统上的）绝对路径，你可以自己尝试一下，把windows的完整路径填入，看看是否能访问。

但请你注意，不要使用这种绝对路径。

原因之一是微不足道的： 因为相对路径更灵活。设想你的项目换了一个位置，此时绝对路径就无法生效了，但相对路径依然可以生效，这避免了大量的无用功。

第二个原因则是致命的： 你不能部署到服务器上使用。显然你的硬盘上不可能有跟服务器上相同的一份文件。（同志，你听说过硬盘图吗？）

（真实的）绝对路径

真实的绝对路径需要你部署到http服务器上。

别担心，不用你支付云服务器费用并真的部署上去。当你启动Live Server，实际上已经在你的机器上部署了一个微型服务器。这里所有的行为都跟真实服务器上没有什么区别。

部署http服务时，会要求你设置服务器的根目录。对于Live Server，就是你启动时的目录（也就是你打开VSCode的位置）。

这个根目录用/表示。

从根目录开始显然可以访问任意一个位置，例如：

你可以在任何位置，用：

<a href="/index.html">点击</a>

来跳转到index.html。

同理，你也可以在任何位置，用：

<img src="/images/title.jpg">

来进行贴图。

这个路径被称为页面的绝对路径。

我要怎么选？

绝对路径看上去比相对路径要方便的多，但实际使用中多数情况下依然是相对路径比较优先。

设想下这种场景：

项目经理决定将pages这个目录改名，并要求你修改页面代码使访问正常。

此时不管你使用绝对路径还是相对路径，从index.html里访问2.html的代码都需要修改。

但对于pages内部的访问，比如1.html到2.html的访问，相对路径不需要修改，绝对路径就需要修改。甚至从1.html里访问index.html的代码，相对路径也是不需要修改的。

但具体问题也可以具体分析，假如约定图片都放在根目录下的images下，也就是图片的位置相对固定，那么此时用绝对路径访问就可以体现出优势来——更加简洁，对目录结构的修改不敏感。

因此可以给出一些简单的原则：

• 相对关系比较固定的资源，用相对路径
• 具体位置比较固定的资源，用绝对路径
• 大多数情况下，相对路径会比较灵活

该如何选实际上是有很多影响因素的，关键是你要懂得他们的区别，才能在实际使用中灵活运用。