最稳妥的跳转方式是直接使用 <a> 标签；onclick 适合需前置逻辑判断的场景，但易因返回值缺失导致意外跳转，且 onclick="location.href=..." 会绕过浏览器原生导航机制，丢失 history 记录、不支持右键新标签打开、可能被 CSP 拦截，也不触发 beforeunload，错误时静默失败。
直接用 <a> 标签跳转最稳妥；onclick 适合需要前置逻辑判断的场景，但容易因返回值缺失导致意外跳转。
为什么不要只靠 onclick="location.href=..."？
这种写法看似简单，但会绕过浏览器原生导航机制，丢失 history 记录、无法后退、不支持右键“在新标签页打开”，还可能被某些安全策略拦截（比如 CSP 限制内联脚本）。
-
onclick="window.location.href='xxx.html'"是内联 JS，现代项目中应避免 - 它不触发
beforeunload，用户关闭页面前无法弹出确认提示 - 若函数执行出错（比如路径拼错、变量未定义），整个跳转就静默失败，无报错提示
<a> 标签中 href 和 onclick 同时存在时谁先执行？
onclick 总是先执行，href 是后续默认行为——除非 onclick 显式返回 false 或调用 event.preventDefault()。
- 错误写法：
<a href="page.html" onclick="doLog();">跳转</a>→ 日志打了，但照样跳转 - 正确写法：
<a href="page.html" onclick="doLog(); return false;">跳转</a> - 更现代写法：
<a href="page.html" id="myLink">跳转</a>，然后 JS 绑定：document.getElementById('myLink').addEventListener('click', e => { e.preventDefault(); doLog(); location.href = 'page.html'; });
用 javascript:void(0) 还是 # 作 href 值？
选 javascript:void(0)。用 # 会导致页面滚动到顶部，尤其在长页面中体验极差；且 # 会被解析为锚点，影响 URL 状态和 history API 行为。
立即学习“前端免费学习笔记（深入）”；
-
href="#"：点击后页面 scrollTop 归零，不可预测 -
href="javascript:void(0)"：无副作用，语义明确是“空操作” - 注意：
javascript:协议在严格 CSP 策略下可能被禁用，生产环境建议优先用button+ 事件监听，而非伪装成链接
真正关键的不是怎么写那一行代码，而是想清楚：这个跳转是否需要被浏览器历史记录、是否要支持右键菜单、是否依赖 URL 参数传递——这些决定了该用 <a> 还是 <button>，而不是反过来让 DOM 元素去迁就 JS 写法。
