本文详解 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 链接）：
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要混淆 /contact.html 与 ./contact.html：前者指向服务器根目录，后者指向当前文件所在目录；
-
图片、CSS、JS 等资源同样适用该规则 —— 例如
比 
更健壮（尤其当页面嵌套在子目录中时）； - 始终确保文件名大小写完全一致（contact.html ≠ Contact.html），Linux 服务器严格区分大小写；
- 推荐在 标签中添加 alt 属性（对图像）和语义化 aria-label（对空链接如 #），提升可访问性。
? 小结：本地开发阶段，优先使用 ./ 开头的显式相对路径；上线后若需统一资源前缀，再考虑配合构建工具或基础路径
