返回

相对路径与绝对路径在网页访问中的影响

前端

相对路径与绝对路径

在网页访问中，我们可以使用相对路径或绝对路径来指定要访问的资源。相对路径是相对于当前页面的路径，而绝对路径是从根目录开始的完整路径。

<a href="about.html">关于我们</a>

上面的代码中，使用了相对路径"about.html"来链接到"about.html"页面。这意味着，如果当前页面是"index.html"，那么点击上面的链接就会访问"index.html"所在目录下的"about.html"页面。

<a href="http://example.com/about.html">关于我们</a>

上面的代码中，使用了绝对路径"http://example.com/about.html"来链接到"about.html"页面。这意味着，无论当前页面是什么，点击上面的链接都会访问"http://example.com/about.html"页面。

为什么a href不是我想要访问的那个URI

有时候，我们可能会遇到这样的情况：点击一个链接，但并不是访问到我们想要访问的页面。这可能是因为使用了相对路径，而当前页面不在预期位置。

例如，假设我们有一个网站，根目录下有一个"index.html"页面，还有一个"about.html"页面。在"index.html"页面中，我们使用了一个相对路径来链接到"about.html"页面：

<a href="about.html">关于我们</a>

如果我们直接访问"index.html"页面，那么点击上面的链接就会访问"index.html"所在目录下的"about.html"页面。但是，如果我们不是直接访问"index.html"页面，而是通过其他方式访问的，比如通过搜索引擎或其他网站的链接，那么点击上面的链接可能就无法访问到"about.html"页面。这是因为，相对路径是相对于当前页面的路径，而当前页面可能不在预期位置。

为了避免这种问题，我们可以使用绝对路径来链接到资源。绝对路径是从根目录开始的完整路径，因此无论当前页面是什么，点击一个绝对路径链接都会访问到正确的页面。

<a href="http://example.com/about.html">关于我们</a>

上面的代码中，使用了绝对路径"http://example.com/about.html"来链接到"about.html"页面。无论当前页面是什么，点击上面的链接都会访问"http://example.com/about.html"页面。

使用HTML的base tag

在HTML中，我们可以使用base tag来指定一个基准URL。这个基准URL将用于解析相对路径。

<head>
  <base href="http://example.com/">
</head>

上面的代码中，我们将基准URL设置为"http://example.com/”。这意味着，如果当前页面是"index.html"，那么使用相对路径"about.html"来链接到"about.html"页面，就会自动解析为"http://example.com/about.html"。

使用base tag可以确保相对路径始终相对于基准URL解析，从而避免相对路径链接失效的问题。

结论

在网页访问中，我们可以使用相对路径或绝对路径来指定要访问的资源。相对路径是相对于当前页面的路径，而绝对路径是从根目录开始的完整路径。为了避免相对路径链接失效的问题，我们可以使用绝对路径来链接到资源。在HTML中，我们可以使用base tag来指定一个基准URL。这个基准URL将用于解析相对路径。