如何在 HTML 中正确引用同目录下的文件

本文详解 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 链接）：

   
     
@@##@@
     
Home
     
Walkers
     
Login
     
Sign up
   
 

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• 不要混淆 /contact.html 与 ./contact.html：前者指向服务器根目录，后者指向当前文件所在目录；
• 图片、css、js 等资源同样适用该规则 —— 例如 比 更健壮（尤其当页面嵌套在子目录中时）；
• 始终确保文件名大小写完全一致（contact.html ≠ Contact.html），linux 服务器严格区分大小写；
• 推荐在 标签中添加 alt 属性（对图像）和语义化 aria-label（对空链接如 #），提升可访问性。

? 小结：本地开发阶段，优先使用 ./ 开头的显式相对路径；上线后若需统一资源前缀，再考虑配合构建工具或基础路径 （需谨慎使用）。掌握路径逻辑，是前端开发稳健跨环境部署的第一步。