HTML 链接 target 属性

Begindev 编辑部 March 25, 2026

HTML 中的 target 属性用于控制链接点击后行为。

具体来说，它允许你指定在哪里打开链接的文档。默认情况下，链接会在当前标签页或窗口中打开，但 target 属性赋予了你将其在新标签页、父框架甚至特定命名的框架中打开的能力。

这对用户体验非常重要：它可以让用户在访问外部资源（如其他网站）时，依然保留你网站的页面不被关闭。

1. 理解 `target` 属性

target 属性用在 <a>（锚）标签内部，用来定义链接 URL 显示的上下文（Context）。

它接受几个特定的值，每个值都代表一种不同的行为。其中最常用、或许也是最重要的值是 _blank。

1.1 `_blank` 值（最常用）

_blank 是 target 属性中使用频率最高的值。它告诉浏览器在新标签页（或新窗口，取决于浏览器设置）中打开链接文档。

适用场景：当你链接到外部网站时，这特别有用。它能让用户在探索新内容的同时，你的网站依然在原标签页中保持打开状态。

<a href="https://www.example.com" target="_blank">访问 Example.com</a>

在这个例子中，当用户点击链接时，www.example.com 会在一个新标签页中打开，而当前的页面（链接所在的页面）会保留在原来的标签页中。

1.2 其他 `target` 值：`_self, _parent, _top`

虽然 _blank 最常见，但在现代 Web 开发中（尤其是随着“框架”技术的衰落），了解其他值也很重要。

_self

这是默认值。它会在当前页面（即点击链接所在的同一个标签页）打开链接。
通常不需要显式写出 target="_self"，除非你想覆盖某些全局设置或为了代码清晰。

<a href="https://www.example.com" target="_self">访问 Example.com (在当前标签页)</a>

_parent

这个值在父框架中打开链接。如果当前页面没有被嵌套在框架（Frame）中，它的行为就和 _self 一样。这主要用于处理使用框架的老式网站。

_top

这个值在整个窗口的主体中打开链接，这会移除所有框架结构。如果页面没有在框架中，它的行为也和 _self 一样。同样，这主要用于处理老式网站。

1.3 使用命名框架（Named Frame）

target 属性还可以设置为一个 <iframe> 的 name 属性值。这允许你在页面的特定 <iframe> 区域内加载链接内容。

这是一种更高级的技巧，需要规划好页面结构。

<iframe src="about:blank" name="myFrame" width="400" height="300"></iframe>

<a href="https://www.example.com" target="myFrame">在框架中加载 Example.com</a>

2. 实战示例与演示

让我们看看在不同场景下如何使用 target 属性。

2.1 示例 1：在新标签页打开外部资源

假设你写了一篇关于 HTML 的博客，你想链接到 Mozilla 开发者网络 (MDN) 的官方文档。你应该使用 target="_blank"，这样用户看完文档后还能轻松回到你的博客。

<p>
    欲了解更多 HTML 信息，请访问 
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">
        Mozilla 开发者网络 (MDN)
    </a>。
</p>

2.2 示例 2：在同一标签页打开联系表单（内部链接）

假设你有一个导航菜单。对于像“联系我们”这样的内部链接，你通常希望它替换当前页面。这是默认行为，但你可以显式地写出来。

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact" target="_self">联系我们</a></li>
  </ul>
</nav>

2.3 示例 3：安全最佳实践 (`_blank` 配合 `rel="noopener"`)

重要安全提示：
当你使用 target="_blank" 时，为了安全起见，最佳实践是同时添加 rel="noopener" 属性。

如果不加 rel="noopener"，新打开的页面可以通过 JavaScript 的 window.opener 属性控制原始页面。这可能会允许恶意网站将你的原始页面重定向到钓鱼网站。rel="noopener" 通过切断两个页面之间的联系来防止这种情况。

<a href="https://www.example.com" target="_blank" rel="noopener">
    访问 Example.com (安全)
</a>

对于不支持 noopener 的老旧浏览器，你还可以加上 noreferrer。这会阻止新页面知道用户是从哪里来的（不发送 Referer 头）。

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    访问 Example.com (非常安全)
</a>

2.4 示例 4：链接到 PDF 文档

如果你链接到一个 PDF 文件，通常建议在新标签页打开。这样可以防止 PDF “接管”用户的当前页面，避免造成困惑。

<p>
    下载我们的宣传册：
    <a href="brochure.pdf" target="_blank">下载 PDF</a>
</p>

1. 理解 target 属性

1.1 _blank 值（最常用）

1.2 其他 target 值：_self, _parent, _top