HTML如何创建指向非直接关联文件夹内HTML文件的超链接

基础规则说明 #

• Web场景下所有路径分隔符统一使用正斜杠/，Windows系统常用的反斜杠\仅在本地文件管理器中可被识别，部署到Web服务器、Linux环境后会直接跳转失败返回404。
• 相对路径语法：../表示当前文件所在目录的上一级父目录，./表示当前所在目录（编写时可省略）。
• 返回上级目录的路径逻辑是通用的，只需要把反斜杠替换为正斜杠即可正常在网页中生效。

当前场景（HTML4跳转HTML3）的实现 #

先明确两个文件的层级关系：

• HTML4所在路径：站点根目录 → 文件夹1 → 文件夹2 → HTML4.html
• HTML3所在路径：站点根目录 → 文件夹1 → HTML3.html

从HTML4的位置出发，仅需要向上返回1级父目录（离开文件夹2，进入文件夹1），就和HTML3处于同一目录层级，直接拼接目标文件名即可，对应代码如下：

<a href="../HTML3.html">跳转到HTML3页面</a>

方案选型参考 #

• 纯静态本地调试、目录结构长期固定：直接使用上面的相对路径写法即可，本地双击打开HTML文件也能正常跳转，不需要额外搭建服务器环境，兼容性最好。
• 目录调整频繁、使用本地静态服务器（如VSCode Live Server、Nginx）调试：推荐使用根相对路径写法，路径以/开头，从站点根目录开始书写，例如/文件夹1/HTML3.html。这种写法不受当前文件所在层级影响，只要目标文件相对于站点根目录的位置不变，路径就不会失效，后期维护成本更低。

常见避坑点 #

• 禁止写本地磁盘绝对路径（例如C:/mysite/文件夹1/HTML3.html），这类路径仅能在个人本地设备上生效，换设备、部署上线后完全无法使用。
• 路径中的文件夹名、文件名注意大小写匹配，Linux服务器对大小写敏感，HTML3.html和html3.html会被识别为两个不同的文件，容易出现跳转404问题。

内容的提问来源于stack exchange，提问作者Esteban Cambiasso