登录
首页 >  文章 >  前端

HTML超链接与a标签target属性详解

时间:2026-04-10 22:54:44 135浏览 收藏

本文深入解析了HTML中a标签超链接的安全实践,重点强调必须同时使用target="_blank"与rel="noopener noreferrer"才能安全地在新标签页打开外部链接——仅写target="blank"或"_new"等错误值会导致当前页跳转,而遗漏rel属性则可能使原页面遭受恶意劫持、DOM窃取或Referer泄露等真实安全风险;文章还厘清了target其他合法值(如_self、_parent、_top)的适用场景及废弃用法,并提醒开发者在Vue、React等框架中仍须遵循原生HTML规范,避免用window.open等替代方案牺牲SEO、可访问性与服务端渲染兼容性。

HTML怎么添加超链接_HTML a标签target属性详解

怎么让 a 标签点击后在新标签页打开

默认情况下, 点击会在当前页跳转。想新开标签页,必须加 target="_blank",缺一不可。

常见错误是只写 target="blank"(漏了下划线)或 target="_new"(浏览器不认识),结果还是当前页跳转。

  • target="_blank" 是唯一被广泛支持的新开页值
  • 现代浏览器对 target="_blank" 默认启用 rel="noopener" 安全策略(但老版本不会自动加)
  • 如果链接目标是第三方网站,务必手动补上 rel="noopener noreferrer",否则可能被利用访问 window.opener

正确写法:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">示例链接</a>

target 还有哪些合法值?哪些已废弃

target 的合法值其实很少,多数是历史遗留或特定场景用:

  • target="_self":当前窗口/标签页(默认行为,可省略)
  • target="_parent":父级