HTML target 属性

HTML target 语法

在 HTML 中，target 属性用于定义窗口的打开方式。它只能用于以下元素。

语法：

<element target="打开方式"></element>

说明：

target 属性常用的取值如下表所示。

target 属性取值
属性值	说明
_self（默认值）	在原窗口打开
_blank	在新窗口打开
_parent	在父窗口打开
_top	在顶层窗口打开

对于超链接来说，当使用 target="_blank" 打开新窗口时，新页面可以通过 window.opener 对象控制原页面（例如跳转到钓鱼网站）。这是前端开发中一个经典的安全漏洞。

因此在使用 target="_blank" 打开外部链接时，建议同时添加 rel="noopener noreferrer" 属性，以防止新页面对原页面进行恶意操作，并且提升页面性能：

<a href="https://www.lvyenet.com" target="_blank" rel="noopener noreferrer">绿叶网</a>

HTML target 摘要

适用元素	a、form、area、base
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML target 示例

接下来，我们通过几个简单的例子来讲解一下 HTML target 属性是如何使用的。

示例 1：a 元素使用 target 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>第1个链接：<a href="http://www.lvyenet.com">绿叶网</a></p>
    <p>第2个链接：<a href="http://www.lvyenet.com" target="_blank">绿叶网</a></p>
</body>
</html>

页面效果如下图所示。

HTML a元素使用target属性

分析：

从浏览器效果上看，这 2 个链接没什么区别。但当我们分别点击 2 个链接之后，会发现它们打开窗口的方式是不一样的，小伙伴们可以自行试一下。

注意: _blank 属性是以 “下划线（_）” 开头，而不是 “中划线（-）” 开头。

示例 2：form 元素使用 target 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form target="_blank">
        <p>账号：<input type="text"></p>
        <p>密码：<input type="text"></p>
        <button type="submit">提交</button>
    </form>
</body>
</html>

页面效果如下图所示：

HTML form元素使用target属性

分析：

在上面例子中，我们使用了 target 属性来定义提交表单后会打开一个新窗口。当单击【提交】按钮之后，会发现浏览器打开了一个新窗口。