本文详解 html 中相对路径的使用方法，重点说明为何 `/contact.html` 会导致 404 错误，以及如何通过 `./contact.html` 正确引用同级目录中的 html 文件，并附带路径原理、常见错误对比与最佳实践。
在构建静态网站时，页面间跳转依赖准确的超链接路径。你遇到的“页面未找到”（404）问题，根源在于路径书写方式： 中的开头斜杠 / 表示绝对路径（相对于网站根目录），而非当前文件所在目录。即使 contact.html 和 index.html 位于同一文件夹下，浏览器仍会尝试从域名根路径（如 https://yoursite.com/contact.html）加载，而非当前目录（如 https://yoursite.com/index.html 所在的同一级目录）。
✅ 正确做法是使用相对路径：
- ./contact.html —— . 表示“当前目录”，./ 明确指示“从当前 HTML 文件所在位置开始查找”；
- 简写为 contact.html 也可生效（浏览器默认按相对路径解析），但显式写成 ./contact.html 更清晰、更规范，尤其在团队协作或复杂目录结构中可避免歧义。
以下是修正后的导航栏代码（已修复 Login 链接）：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<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>
<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：前者指向服务器根目录，后者指向当前文件所在目录；
-
图片、CSS、JS 等资源同样适用该规则 —— 例如
比 
更健壮（尤其当页面嵌套在子目录中时）； - 始终确保文件名大小写完全一致（contact.html ≠ Contact.html），Linux 服务器严格区分大小写；
- 推荐在 标签中添加 alt 属性（对图像）和语义化 aria-label（对空链接如 #），提升可访问性。
? 小结：本地开发阶段，优先使用 ./ 开头的显式相对路径；上线后若需统一资源前缀，再考虑配合构建工具或基础路径
