<button>不能直接用target属性，因为它不是超链接元素，该属性仅标签原生支持；需用模拟按钮或JS调用window.open()并加noopener防护。
button点击跳转为什么不能直接用target？
因为 <button> 本身没有 target 属性，它不是超链接元素。你给 <button> 写 target="_blank" 完全无效，浏览器会忽略——这不是 bug，是标准行为。
常见错误现象：按钮加了 target="_blank" 却没反应，控制台也没报错，让人误以为“语法对但逻辑没跑通”。
-
<button target="_blank" onclick="location.href='https://example.com'">点我</button>→target被静默丢弃，跳转仍走当前页（除非 JS 显式开新窗口） - 想靠
<button formaction>实现跳转？它只在表单内生效，且不支持target，实际跳转仍由表单的target决定
真正能用target的只有a标签
只有 <a> 标签原生支持 target，这是 HTML 规范定义的语义行为。要实现“点击即跳转+新开页”，最轻量、最可靠的方式就是用 <a> 模拟按钮样式。
使用场景：不需要表单提交、不触发 JS 逻辑、纯导航跳转。
立即学习“前端免费学习笔记（深入）”；
- 写法：
<a href="https://example.com" target="_blank" rel="noopener">跳转按钮</a> -
rel="noopener"必须加上，否则新页面可通过window.opener访问原页面上下文，存在安全风险 - 兼容性无问题，所有现代浏览器都支持
target="_blank"和rel="noopener" - 样式上用 CSS 把
<a>做成按钮外观（比如加display: inline-block、背景色、边框等），视觉和交互体验完全一致
button + JS 跳转时如何等效实现target效果
如果必须用 <button>（比如需要绑定复杂事件、参与表单验证、或已有大量 button 类名依赖），就得靠 JS 控制跳转行为。
关键点：JS 中没有 “target” 这个参数，但有对应能力——window.open() 可指定窗口名称（包括 '_blank'），而 location.href 则始终在当前页跳转。
- 新开页：
onclick="window.open('https://example.com', '_blank', 'noopener')"—— 注意第三个参数是窗口特性字符串，现代浏览器要求显式声明noopener才能禁用window.opener - 同页跳转：
onclick="location.href='https://example.com'"—— 简单直接，但无法指定 target - 避免写
window.open(url, '_blank')不带第三个参数，老版本 Chrome 会默认允许window.opener，造成安全隐患 - 如果用事件监听器，记得调用
event.preventDefault()防止意外提交或默认行为干扰
form + button 的 target 行为容易被误解
当 <button> 在 <form> 内且类型为 submit，它的跳转目标由 <form> 的 target 属性决定，而不是 button 自己的属性。
这种写法常被误当作“button 支持 target”，其实是表单机制在起作用。
- 正确写法：
<form action="https://example.com" target="_blank"><button type="submit">提交并跳转</button></form> - 此时跳转地址来自
form.action，打开方式来自form.target，button 本身只是触发表单提交的控件 - 如果
form没设target，即使 button 有target属性也无效 - 注意：GET 表单提交会把参数拼在 URL 后，POST 则不会显示在地址栏；若只是导航，别滥用 form，语义不符且增加不必要的请求开销
最容易被忽略的是安全细节：target="_blank" 必须搭配 rel="noopener"（a 标签）或 window.open(..., '_blank', 'noopener')（JS），否则新页面能通过 window.opener 操控原页面，这在真实项目中已多次导致钓鱼或 XSS 链路被利用。
