本文详解html中相对路径的使用方法，重点说明为何`/contact.html`会导致404错误，以及如何用`./contact.html`精准定位同级目录中的html文件，并提供实用示例与常见误区提醒。
在HTML中引用同目录（即与当前HTML文件位于同一文件夹）的其他文件时，必须使用相对路径，而非以斜杠 / 开头的绝对路径。你遇到的“页面未找到”问题，根源正在于此：<a href="/contact.html"> 中的 / 表示从网站根目录（如 https://yoursite.com/）开始查找，而非当前文件所在目录。即使 contact.html 与 index.html 同处一个本地文件夹，浏览器仍会尝试访问 https://yoursite.com/contact.html——这在本地开发环境或未部署到服务器根目录时必然失败。
✅ 正确做法是使用 ./contact.html：
- . 代表当前目录；
- ./ 明确指示“从本文件所在位置出发”；
- 因此 ./contact.html 会被解析为与 index.html 同级的 contact.html 文件。
以下是修正后的导航栏代码（已修复路径并补充常见场景说明）：
<div class="navbar">
<ul>
<li class="logo"><img src="images/awlogo.png" height="50px" alt="Logo"></li>
<li><a href="index.html">Home</a></li>
<!-- 同目录HTML文件：省略 ./ 也可工作（浏览器默认按相对路径解析），但显式写 ./ 更清晰、更规范 -->
<li><a href="./index.html">Home</a></li>
<li><a href="https://w41k3r.com/login/?redirect=https://w41k3r.com/">Walkers</a></li>
<!-- ✅ 关键修正：使用 ./contact.html -->
<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（浏览器默认以当前目录为基准），但显式书写 ./ 是推荐做法，可避免歧义，尤其在复杂项目中提升可维护性；
- ../other-folder/page.html → 引用上一级目录中的文件；
- images/logo.png → 引用同目录下 images 子文件夹内的资源（注意：src 属性同样遵循相对路径规则）；
- 始终检查文件名大小写和拼写（如 contact.html ≠ Contact.html 或 conact.html）；
- 开发阶段建议使用本地服务器（如 VS Code 的 Live Server 插件）预览，而非直接双击打开 HTML 文件，以确保路径行为与真实部署环境一致。
总结：路径不是“写对就行”，而是“理解原理才能写准”。记住口诀：同级用 ./，上级用 ../，根目录才用 /——这是构建健壮、可移植前端项目的基石之一。
