HTML跳转到另一文件页面方法

本文深入讲解了HTML页面间跳转的实用方法与常见陷阱，涵盖超链接（a标签）的相对/绝对路径写法、按钮触发跳转的JavaScript实现（如location.href），并重点剖析了路径大小写敏感、.html后缀不可省略、本地双击（file://协议）与服务器环境的根本差异、GitHub Pages部署限制等高频踩坑点，强调“路径问题永远比语法问题更隐蔽”，为前端新手和静态网站开发者提供清晰、可靠、可落地的跳转解决方案。

用 a 标签跳转到同目录下另一个 HTML 文件

最直接的方式就是写一个超链接，浏览器点一下就加载新页面。前提是路径写对，且目标文件确实存在。

• 如果 index.html 和 about.html 在同一文件夹，写 关于我
• 路径区分大小写：About.html 和 about.html 是两个不同文件（尤其在 Linux 服务器或 GitHub Pages 上）
• 别漏掉 .html 后缀——有些本地双击打开时浏览器可能自动补全，但部署到服务器后大概率 404
• 不要写成 href="about" 或 href="/about"，除非你配置了服务端路由或使用了 SPA 框架

跳转到子目录里的 HTML 页面

比如 pages/contact.html，而当前页面是根目录下的 index.html，这时路径要体现层级关系。

• 相对路径写法：联系我
• 绝对路径写法（从站点根目录算起）：联系我，适合多级嵌套时避免路径混乱
• 错误示范：href="pages/contact" → 缺后缀，多数服务器不认；href="contact.html" → 找不到，因为实际在 pages/ 下
• 开发时建议用绝对路径（以 / 开头），上线后更稳定；本地双击打开时则必须用相对路径（否则浏览器按 file:// 协议读取，/ 会指向系统根目录）

点击按钮跳转而不是链接

想用 button 触发跳转？不能只靠 HTML，得加一点 JS，但非常轻量。

• 最简方式：帮助
• 更规范的写法是绑定事件，避免内联 JS：

  帮助
  

• 注意：location.href 是同步跳转，页面立即卸载；别和 fetch 或表单提交混用，否则行为不可预测
• 别写成 window.location.replace("help.html") 除非你明确不需要返回上一页（它会删掉当前页历史记录）

跳转后页面空白或 404 的常见原因

不是代码写错了，而是环境或路径理解有偏差。

• 本地双击打开 HTML 文件时，浏览器用的是 file:// 协议，此时 /xxx.html 会被解析成磁盘根目录，必然失败
• 服务器没开启目录浏览，且访问的路径没有默认首页（如 index.html），又没配重定向，就会 403 或 404
• GitHub Pages 默认只托管 docs/ 目录或 gh-pages 分支，放错位置的 HTML 就是 404
• 路径里用了中文或空格，没编码：应写成 %E4%B8%AD%E6%96%87.html 而不是 中文.html（虽然部分浏览器能容错，但不保险）

今天关于《HTML跳转到另一文件页面方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！