当前位置：首页 > 前端开发 > 正文

如何让html链接在新标签页打开？

admin
前端开发
2025-06-20
4925

在HTML中，通过` 标签的target=”_blank” 属性可实现链接在新标签页或新窗口中打开，链接`，此方法适用于所有现代浏览器。

在HTML中创建链接时,默认行为是在当前窗口或标签页中打开目标页面，若需在新窗口或标签页中打开链接，需使用target属性结合特定值实现，以下是详细方法及注意事项：

核心方法：target=”_blank”

在<a>标签中添加target="_blank"属性即可在新标签页打开链接：

如何让html链接在新标签页打开？第1张

<a href="https://www.example.com" target="_blank">访问示例网站</a>

href：指定目标URL
target=”_blank”：强制浏览器在新标签页打开链接（用户浏览器设置可能影响具体行为，如部分浏览器可能在新窗口打开）

安全风险与防护措施

使用target="_blank"时，新页面可通过window.openerAPI访问原始页面的窗口对象，存在安全风险（如钓鱼攻击或页面改动），解决方案是添加rel属性：

<!-- 推荐安全写法 -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  安全访问示例网站
</a>

rel=”noopener”：阻止新页面通过window.opener访问原页面
rel=”noreferrer”：额外隐藏HTTP请求中的来源信息（同时包含noopener效果）
现代浏览器要求：Chrome 88+等已默认启用noopener，但显式声明仍是最佳实践

其他target属性值（扩展知识）

属性值	作用
`target="_self"`	当前标签页打开（默认行为）
`target="_parent"`	父框架打开（用于iframe嵌套）
`target="_top"`	脱离框架，在顶层窗口打开

用户体验与可访问性建议

何时使用新标签页？
- 外部第三方链接（避免用户离开你的站点）
- 文档/PDF等非网页资源
- （如术语解释）
何时避免？
- 站内导航（会打乱用户浏览流程）
- 移动端页面（屏幕空间有限）

无障碍提示
对屏幕阅读器用户，可通过文字提示新窗口行为：

<a href="file.pdf" target="_blank" rel="noopener">
  下载手册 <span class="sr-only">(新窗口打开)</span>
</a>

CSS辅助类（供屏幕阅读器识别）：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

完整代码示例

<!-- 安全且符合最佳实践的链接 -->
<a href="https://external-site.com" 
   target="_blank" 
   rel="noopener noreferrer"
   aria-label="访问外部网站（新窗口打开）">
  外部资源
</a>