最直接的方法是给标签添加target="_blank"属性，并必须配合rel="noopener noreferrer"以防范安全风险、阻止referrer泄露且保障无障碍访问。
使用 target="_blank" 是最直接的方法
HTML 中让链接在新标签页打开，核心就是给 标签加上 target="_blank" 属性。浏览器会据此新开一个标签页（或窗口，取决于浏览器设置），而不是在当前页跳转。
常见写法如下：
<a href="https://example.com" target="_blank">访问示例网站</a>
注意：target="_blank" 本身不保证“一定是新标签页”——现代浏览器默认倾向新开标签页，但用户可通过设置改为新窗口，这属于客户端行为，开发者无需干预。
rel="noopener noreferrer" 不是可选项，而是必须加的防护
只加 target="_blank" 存在安全与性能风险：新页面可通过 window.opener 访问原页面的 window 对象，可能被用于钓鱼、跳转劫持或影响性能（比如新页面卡死拖慢原页）。
正确做法是始终搭配 rel 属性：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全打开</a>
-
noopener：切断新页面对原页面window.opener的访问能力，防止恶意操作 -
noreferrer：不仅阻止opener，还让新页面收不到Referer头（部分场景需注意 SEO 或统计影响） - 如果只需基础防护，
rel="noopener"已足够；加noreferrer是更保守的选择
不要用 JavaScript 模拟 target="_blank"
有人试图用 onclick="window.open('...')" 替代原生 target="_blank"，这反而带来问题：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 右键菜单中“在新标签页中打开”选项失效（用户无法用惯用方式操作）
- 禁用 JavaScript 时链接完全不可用（原生
至少还能正常跳转） - 部分浏览器会拦截
window.open()（尤其非用户手势触发时），导致静默失败 - 无障碍支持更差（屏幕阅读器、键盘导航依赖原生语义）
除非有特殊逻辑（如动态构造 URL、条件判断是否新开），否则坚持用原生 。
Vue/React 等框架里也要显式写 target 和 rel
框架不会自动补全这些属性。例如 Vue 模板中写：
<a :href="url" target="_blank" rel="noopener noreferrer">{{ text }}</a>
React 中同理：
<a href="%7Burl%7D" target="_blank" rel="noopener noreferrer">{text}</a>
容易忽略的点：
- 服务端渲染（SSR）或静态站点生成（SSG）时，若
url为空或非法，仍会渲染出带target的，可能触发空链接新开页——务必校验href有效性 - 某些 UI 组件库封装了
Link，它们默认不支持target，需查文档看是否允许透传原生属性，或退回到原生
真正麻烦的不是怎么写，而是每次写都下意识漏掉 rel。把它当成和 href 一样不可省略的必需属性，才不容易出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
