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

本文详解 html 中相对路径的使用方法，重点说明为何 ./contact.html 能正确跳转而 /contact.html 会导致 404，并提供实用路径规则、常见错误分析与调试建议。

在 HTML 中引用同一文件夹下的其他页面（如 contact.html）时，路径写法至关重要。你当前代码中 Login 使用的是绝对路径（以 / 开头），它表示从网站根目录（即服务器或本地 http 服务的根路径，如 http://localhost/ 或 https://yoursite.com/）开始查找文件。但你的 contact.html 实际位于与 index.html 相同的文件夹下——即“当前目录”，而非网站根目录。因此浏览器会错误地请求 http://localhost/contact.html，自然返回 404。

✅ 正确做法是使用相对路径：

• ./contact.html：明确表示“当前目录下的 contact.html”（./ 可省略，但显式写出更清晰、更规范）；
• contact.html：等价于 ./contact.html，也可直接使用（推荐简洁写法）；
• index.html：同理，无需加 ./，因为它是当前目录下的同级文件。

以下是修正后的导航栏代码（已优化可读性与语义）：

   
     
@@##@@
     
Home
     
Walkers
     
Login
     
Sign up
   
 

⚠️ 注意事项：

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

• 不要混淆 / 和 ./：/contact.html ≠ ./contact.html；前者指向根目录，后者指向当前目录；
• 本地双击打开 HTML 文件时尤其敏感：若用 file:// 协议打开，/contact.html 会尝试访问系统根目录（如 C:/contact.html），必然失败；
• 建议统一使用相对路径（如 contact.html、./assets/style.css），确保项目可移植、无需依赖特定服务器配置；
• 检查文件名大小写与拼写：contact.html ≠ Contact.html（linux/macOS 服务器区分大小写）；
• 添加 alt 属性：为 补充 alt 文本（如示例所示），提升可访问性与 seo。

总结：只要两个 HTML 文件处于同一文件夹，直接使用文件名（如 contact.html）即可实现跳转；./ 是显式强调当前目录的写法，安全且自解释性强。掌握相对路径逻辑，是构建健壮、可维护前端项目的基石。