HTML中引用同一文件夹页面的正确方法

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《HTML中引用同一文件夹下的页面文件，通常使用相对路径。例如，如果当前页面和目标页面在同一个文件夹下，可以直接使用文件名作为路径。例如：链接文本这表示链接到同一文件夹下的page.html文件。如果目标文件在子文件夹中，可以使用类似folder/page.html的路径。例如：链接文本如果目标文件在上一级文件夹中，可以使用../来表示上一级目录。例如：链接文本这些方法适用于链接、图片、脚本等资源的引用。确保路径正确，避免404错误。》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

本文讲解HTML中相对路径的正确用法，重点解决因误用绝对路径（如 `/contact.html`）导致“页面未找到”的常见问题，并通过示例说明 `./contact.html` 等相对路径写法的实际效果与原理。

在HTML中链接同一目录下的文件时，路径写法至关重要。你当前代码中 Login 使用的是根相对路径（以 / 开头），浏览器会将其解析为从网站根目录（例如 https://yoursite.com/contact.html）开始查找，而非当前文件所在目录。即使 contact.html 与 index.html 处于同一本地文件夹，该写法仍会失败——尤其在本地双击打开 HTML 文件（使用 file:// 协议）或服务器未按预期配置根目录时。

✅ 正确做法是使用当前目录相对路径：

• ./contact.html 表示“当前目录下的 contact.html”；
• contact.html（省略 ./）效果完全相同，更简洁常用；
• 二者均基于当前 HTML 文件的位置进行解析，具备强可移植性。

修正后的导航栏代码如下：

<div class="navbar">
    <ul>
        <li class="logo"><img src="images/awlogo.png" height="50px"></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：前者是相对路径，后者是绝对路径（相对于域名根）；
• 若文件结构后续调整（如将页面移入 /pages/ 子目录），需同步更新所有相关链接；
• 图片、CSS、JS 等资源引用同样遵循此规则，例如 或 ；
• 开发阶段建议使用本地服务器（如 VS Code 的 Live Server 插件）预览，避免 file:// 协议下因安全限制导致的路径异常。

总结：保持路径简洁、语义清晰、位置明确——优先使用无前缀的相对路径（如 contact.html），既符合规范，又提升项目可维护性与跨环境兼容性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML中引用同一文件夹页面的正确方法》文章吧，也可关注golang学习网公众号了解相关技术文章。