本文讲解html中相对路径的正确用法，重点解决因误用绝对路径（如 `/contact.html`）导致“页面未找到”的常见问题，并通过示例说明 `./contact.html` 等相对路径写法的实际效果与原理。
在HTML中链接同一目录下的文件时，路径写法至关重要。你当前代码中 Login 使用的是根相对路径（以 / 开头），浏览器会将其解析为从网站根目录（例如 https://yoursite.com/contact.html）开始查找，而非当前文件所在目录。即使 contact.html 与 index.html 处于同一本地文件夹，该写法仍会失败——尤其在本地双击打开 HTML 文件（使用 file:// 协议）或服务器未按预期配置根目录时。
✅ 正确做法是使用当前目录相对路径：
- ./contact.html 表示“当前目录下的 contact.html”；
- contact.html（省略 ./）效果完全相同，更简洁常用；
- 二者均基于当前 HTML 文件的位置进行解析，具备强可移植性。
修正后的导航栏代码如下：
<div class="navbar">
<ul>
<li class="logo"><img src="images/awlogo.png" height="50px" alt="如何在HTML中正确引用同一文件夹下的页面文件" ></li>
<li><a href="index.html">Home</a></li>
<li><a href="https://w41k3r.com/login/?redirect=https://w41k3r.com/">Walkers</a></li>
<li class="user"><a href="contact.html">Login</a></li> <!-- ✅ 推荐写法 -->
<li class="user"><a href="#">Sign up</a></li>
</ul>
</div>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要混淆 ./contact.html 和 /contact.html：前者是相对路径，后者是绝对路径（相对于域名根）；
- 若文件结构后续调整（如将页面移入 /pages/ 子目录），需同步更新所有相关链接；
- 图片、CSS、JS 等资源引用同样遵循此规则，例如 或
； - 开发阶段建议使用本地服务器（如 VS Code 的 Live Server 插件）预览，避免 file:// 协议下因安全限制导致的路径异常。
总结：保持路径简洁、语义清晰、位置明确——优先使用无前缀的相对路径（如 contact.html），既符合规范，又提升项目可维护性与跨环境兼容性。
