最直接方式是用关于我,路径需区分大小写、不可省略.html后缀,相对路径适用于同目录或子目录,绝对路径以/开头更稳定但本地双击无效;按钮跳转需js配合location.href。

用 a 标签跳转到同目录下另一个 HTML 文件
最直接的方式就是写一个超链接,浏览器点一下就加载新页面。前提是路径写对,且目标文件确实存在。
- 如果
index.html和about.html在同一文件夹,写<a href="about.html">关于我</a> - 路径区分大小写:
About.html和about.html是两个不同文件(尤其在 Linux 服务器或 GitHub Pages 上) - 别漏掉
.html后缀——有些本地双击打开时浏览器可能自动补全,但部署到服务器后大概率 404 - 不要写成
href="about"或href="/about",除非你配置了服务端路由或使用了 SPA 框架
跳转到子目录里的 HTML 页面
比如 pages/contact.html,而当前页面是根目录下的 index.html,这时路径要体现层级关系。
- 相对路径写法:
<a href="pages/contact.html">联系我</a> - 绝对路径写法(从站点根目录算起):
<a href="/pages/contact.html">联系我</a>,适合多级嵌套时避免路径混乱 - 错误示范:
href="pages/contact"→ 缺后缀,多数服务器不认;href="contact.html"→ 找不到,因为实际在pages/下 - 开发时建议用绝对路径(以
/开头),上线后更稳定;本地双击打开时则必须用相对路径(否则浏览器按 file:// 协议读取,/会指向系统根目录)
点击按钮跳转而不是链接
想用 button 触发跳转?不能只靠 HTML,得加一点 JS,但非常轻量。
- 最简方式:
<button onclick="location.href='help.html'">帮助</button> - 更规范的写法是绑定事件,避免内联 JS:
<button id="help-btn">帮助</button><br><script>document.getElementById("help-btn").onclick = () => { location.href = "help.html"; };</script> - 注意:
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(虽然部分浏览器能容错,但不保险)










