最直接方式是用跳转同目录HTML文件；路径需准确，区分大小写；可拼接query参数传递简单信息；动态跳转可用window.location.href；404多因路径错误，应通过Network面板验证请求URL。
用 <a></a> 标签跳转到同目录下的 HTML 文件
最直接的方式就是写一个带 href 的超链接，浏览器会自动加载目标 HTML 文件。前提是路径写对，否则 404。
- 如果目标文件
about.html和当前页面在同一个文件夹里，直接写<a href="about.html">关于我</a> - 如果它在子文件夹
pages/下，路径就得是<a href="pages/about.html">关于我</a> - 如果它在上一级目录，用
../：比如当前在pages/index.html，要跳到根目录的contact.html，就写<a href="../contact.html">联系我</a>
注意：路径区分大小写，About.html 和 about.html 在 Linux 或 macOS 服务器上是两个不同文件。
跳转时保留或传递参数（query string）
HTML 页面之间不能直接传变量，但可以通过 URL 参数“捎带”简单信息，比如 ID、分类、来源标记等。
- 手动拼接：从
list.html跳到detail.html?id=123&from=list，写成<a href="detail.html?id=123&from=list">查看详情</a> -
&是 HTML 实体，不是&，否则解析会出错；实际渲染后 URL 中显示为& - 目标页用 JavaScript 读取：
new URLSearchParams(window.location.search).get('id')，注意浏览器兼容性（IE 不支持）
别指望靠这个传对象或长文本——URL 长度有限，且参数明文可见。
立即学习“前端免费学习笔记（深入）”；
用 JavaScript 的 window.location.href 跳转
适合需要动态计算路径、加逻辑判断、或响应按钮点击等非链接场景。
- 基础写法：
window.location.href = "help.html"; - 带参数示例：
window.location.href = "result.html?score=" + score;（注意 XSS 风险，若score来自用户输入，得先转义或校验） - 和
<a></a>的区别：它不经过浏览器历史栈的“自然点击”流程，某些 SPA 框架或拦截逻辑可能不触发；但普通静态页完全没问题
别用 window.open() 除非真要新开窗口——多数情况它会被弹窗拦截器挡住，体验反而差。
常见 404 错误和路径陷阱
跳转失败，八成是路径错了，而不是代码语法问题。
- 开发时用 VS Code 等编辑器右键“Copy Relative Path”，粘贴进
href最稳；别靠脑子记层级 - 服务器部署后路径可能变：本地双击打开
file://协议下相对路径行为和 HTTP 服务不同，务必用本地服务器（如python3 -m http.server）测试 - 检查浏览器开发者工具 Network 标签页，看请求的 URL 是什么、状态码是不是 404，再反推路径漏了哪级
../或拼错了文件名 - Windows 下文件资源管理器默认隐藏扩展名，容易误以为是
index，其实是index.html——确认文件真实后缀
路径问题没有银弹，唯一靠谱的做法是：每次改完立刻点一下，看 Network 里发出去的请求对不对。其他都是猜。
