最推荐用包裹实现按钮跳转，需设display:inline-block；禁用onclick跳转以免丢失右键功能；表单提交应直接用submit；新窗口须加rel="noopener noreferrer"。
用 <a></a> 标签包裹按钮，最直接可靠
HTML 里按钮本身（<button></button>）不是超链接元素，不能直接加 href。想让按钮具备跳转行为，最推荐的方式是把 <button></button> 放进 <a></a> 标签里——现代浏览器完全支持，语义清晰，无障碍友好。
注意必须设置 <a></a> 的 display: inline-block 或类似样式，否则按钮可能被压扁或换行异常：
<a href="https://example.com" style="display: inline-block;"> <button>前往首页</button> </a>
- 不要给
<button></button>加onclick去调window.location，那会绕过右键“在新标签页打开”等原生能力 - 避免用
<a></a>包裹<input type="button">，部分旧版 IE 不兼容 - 如果按钮需要提交表单，就别硬套
<a></a>，该用<input type="submit">或<button type="submit"></button>
onclick 调 window.location 的适用场景和风险
仅在需要动态拼接 URL、做跳转前校验、或兼容极老环境时才考虑用 JS 控制跳转。例如：
<button onclick="window.location.href = '/user?id=' + userId">查看资料</button>
- 必须确保
userId已定义且已转义，否则可能触发ReferenceError或 XSS -
window.location.href是同步跳转，页面立即卸载；若想保留当前页（如弹窗后返回），得改用window.open() - 这种方式无法被搜索引擎抓取链接，也不支持浏览器前进/后退的正常记录（除非用
history.pushState配合）
用 form 实现 GET 跳转，适合带参数的导航
当跳转目标是查询类页面（比如搜索、筛选），用 <form method="GET"></form> 比手动拼 URL 更安全规范：
- 提交后 URL 自动变成
/search?category=tech，参数自动编码，不用担心空格或特殊字符 - 按钮
type="submit"必须显式声明，否则某些浏览器默认为submit，但语义不明确 - 不要给这个
<form></form>加onsubmit="return false"，否则跳转失效
新窗口跳转：优先用 target="_blank"，而非 window.open()
如果按钮要打开新标签页，直接在 <a></a> 上加 target="_blank" 即可：
<a href="https://external.com" target="_blank" rel="noopener noreferrer"> <button>访问外部网站</button> </a>
-
rel="noopener noreferrer"必须加上，否则新页面可通过window.opener访问原页面，存在安全风险 - 避免用
window.open()，它在移动端常被拦截，且无法右键复制链接、无法中键点击等 -
target="_blank"对<form></form>也有效：<form target="_blank"></form>，但仅限GET提交，POST会被降级为GET且丢数据
真正要注意的是语义和可访问性：按钮该是按钮，链接该是链接。混用时别只图方便，漏掉 rel、忘了 display 样式、或在表单里乱加 JS 跳转，都是上线后才暴露的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
