在HTML中，通过`
标签的target=”_blank”属性可实现链接在新标签页或新窗口中打开，链接`，此方法适用于所有现代浏览器。在HTML中创建链接时,默认行为是在当前窗口或标签页中打开目标页面，若需在新窗口或标签页中打开链接，需使用target属性结合特定值实现，以下是详细方法及注意事项：
核心方法：target=”_blank”
在<a>标签中添加target="_blank"属性即可在新标签页打开链接：
<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>
- 始终为
target="_blank"添加rel="noopener"或rel="noreferrer" - 非必要不滥用新标签页,避免干扰用户
- 外部链接需明确标识打开方式（视觉或文字提示）
- 通过W3C验证工具（validator.w3.org）检查代码合规性
引用说明符合W3C HTML5标准（HTML Links）及MDN Web文档（target属性），安全建议依据OWASP前端安全指南（Cross-Window Scripting）。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/32224.html
