如何创建点击后在新标签页打开指定链接的HTML按钮？

现有方案的问题 #

你当前把<button>嵌套在<a>标签内的写法不符合HTML规范：

• 交互元素嵌套属于HTML禁用的写法，<a>和<button>本身都是可点击的交互元素，嵌套会导致语义冲突，屏幕阅读器等辅助设备可能识别异常，部分老旧浏览器也可能出现点击逻辑错乱的问题
• 你当前给target="_blank"的<a>标签没有加rel="noopener noreferrer"属性，存在安全风险：新打开的标签页可以通过window.opener获取原页面的上下文，恶意站点甚至可以篡改原页面跳转地址

最优实现方案 #

不需要嵌套<button>，直接把按钮样式类加在<a>标签上即可，你的现有CSS不需要做任何修改，只需要替换<body>内的相关代码：

<a href="https://example.com" target="_blank" rel="noopener noreferrer" class="pure-material-button-contained">Visit my website</a>

这种方案的优势：

• 完全符合HTML语义规范，天然支持搜索引擎抓取识别跳转链接、辅助设备正常读取交互语义
• 没有额外的JS逻辑，性能最优，兼容性最好
• 完全保留你现有Material Design按钮的所有交互效果，不需要调整任何CSS代码

可选替代方案（仅当需要额外点击逻辑时使用） #

如果你的按钮后续需要加额外的JS处理逻辑，必须用<button>实现的话，可以用window.open处理跳转：

<button class="pure-material-button-contained" onclick="window.open('https://example.com', '_blank', 'noopener,noreferrer')">Visit my website</button>

注意这种方案需要额外补充无障碍属性，比如给button加role="link"，方便屏幕阅读器识别跳转语义。

内容的提问来源于stack exchange，提问作者user16903945