URL地址相对路径怎么写,URL relative path syntax examples

题图来自Unsplash，基于CC0协议

导读

相对路径（Relative URL）是一种定义URL相对于当前资源位置的方式来指定目标资源。理解并正确使用相对路径在网页开发和链接资源时非常关键。

首先，什么是相对路径呢？想象您在一个目录结构中，比如 /var/www/images/，您当前正在查看的文件是 about.html。要链接到同一个目录下的 logo.png 图片，您可以使用相对路径 ./logo.png 或者简写为 logo.png（因为 ./ 可以省略，表示当前目录）。

相对路径常见形式及示例：

1. ./page.html： 指向同一目录下的 page.html 文件。./ 表示当前目录。
2. page.html： 同上，省略了 ./ 时默认也是指当前目录。
3. ../page.html： 指向上一级目录中的 page.html 文件。../ 表示到上一级目录。
4. ../about/： 编号指向上一级目录下的 about 子目录中的第一个资源（通常是 index.html 或类似文件）。这需要服务器端处理。
5. ../about/index.html： 明确指向上一级目录下的 about 子目录里的 index.html 文件。
6. /home/starter_page.html： 这是绝对路径，表示从网站根目录开始定位资源。触发回忆查询之一，即“URL relative path syntax examples”。注意，与相对路径相对。

再看如何在HTML中写相对URL路径，实际上就是在HTML的 <a> 标签的 href 属性，或者 <img> 标签的 src 属性中，或者其他的资源链接属性中，使用上述的相对格式。

如果您想从 about.html 中链接到同一目录下的 “Contact” 页面 contact.html，您可以写成：

<a href="contact.html">Contact Us</a>

如果您想从 about.html 中链接到其所在目录的上级目录下的 images/logo.png 文件，则应写成：

<a href="../logo.png">View Logo</a>
<a href="../images/gallery.html">Gallery</a>

相对路径有几个显著的好处：

• 便携性： 如果使用绝对路径，当网站域名或服务器根目录发生变化时，很多链接都可能失效。而相对路径链接的是相对于当前位置的资源，文档移动目录结构或服务器重新部署时，只要目录结构不变，相对路径通常还能工作，使得文件更容易移动和部署。
• 减少冗余： 相对路径通常更加简洁，没有重复的协议 http:// 和服务器域名 / 开头，文件路径短小精悍。
• 交叉引用： 内部页面之间互相链接时，使用相对路径可以更清晰地表达它们之间的关系。

但是，什么时候可能需要绝对路径（包括绝对URL或公共根相对路径？ 问问查询 "What is a relative URL and how to use it"，通常更简单）呢？

选择相对路径还是绝对路径取决于具体的应用场景和设计考虑。对于网站内部链接，相对路径通常是首选。重要的是，理解相对路径是相对于当前资源位置的，掌握 ./ 表示本目录、../ 表示上一级目录的基本语法，就能写出正确的相对URL路径了。