HTML - target 属性

HTML 的 **target** 属性用于指定链接文档打开的位置。

target 属性为 **<base>** 标签指定页面中所有超链接和表单的默认目标。对于 **<form>** 标签，此属性指定一个名称或关键字，指示在提交表单后接收到的响应显示的位置。

语法

<element target = "_blank | _self | _parent | _top | framename " \>

以下是属性值

_blank: 在新窗口中打开链接。
_self: 在同一框架中打开链接，这是默认值。
_parent: 在父框架集中打开链接。
_top: 在窗口的整个主体中打开链接的文档。
framename: 在命名框架中打开链接的文档。

应用于

下面列出的元素允许使用 HTML 的 **target** 属性。

元素	描述
<a>	HTML <a> 标签定义超链接。它用于从一个页面链接到另一个页面。
<area>	HTML <area> 标签指定图像的区域，映射可以点击或作为链接到的活动区域。
<base>	HTML <base> 标签用于指定基本 URL。
<form>	HTML <form> 标签用于通过表单收集网站上的用户输入。

HTML target 属性示例

以下示例将说明 HTML target 属性，以及我们应该在哪里以及如何使用此属性！

使用 "a" 标签的 target 属性

运行以下代码后，它将生成一个带有超链接的输出。当用户点击链接时，tutorialspoint 网站将在新窗口或选项卡中打开。

<!DOCTYPE html>
<html>
<head>
    <title>Target attribute with a Tag</title>
</head>
<body>
    <h3>Tutorialspoint</h3>
    <h2>Target attribute with a tag</h2>
    <p>Open link in a new window or tab: 
    <a href=
"https://tutorialspoint.com/index.htm" 
       target="_blank">Visit tutorialspoint
    </a>
    </p>
</body>
</html>

使用 "area" 标签的 target 属性

执行以下代码后，将显示一个带有可点击区域的图像地图。点击每个区域，相应的链接将根据指定的 target 值打开。

<!DOCTYPE html>
<html>
<head>
    <title>HTML area Tag</title>
</head>
<body>
    <img src = "/images/usemap.gif" alt = "usemap"
         border = "0" usemap = "#tutorials"/>   
    <map name = "tutorials">
      <area shape = "poly" 
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" 
            alt = "Perl Tutorial" 
            target = "_blank">
      <area shape = "rect" 
            coords = "22,83,126,125" 
            alt = "HTML Tutorial"
            href = "/html/index.htm" 
            target = "_self">
      <area shape = "circle" 
            coords = "73,168,32" 
            alt = "PHP Tutorial"
            href = "/php/index.htm" 
            target = "_top">
    </map>
    <p>
        Click each of the above technologies 
        to view in different frame
    </p>
</body>
</html>

使用 "base" 标签的 target 属性

输出窗口显示一个链接。点击链接后，tutorialspoint 网站将在同一框架中打开。

<!DOCTYPE html>
<html>

<head>
    <base target="_self">
    <title>Base tag with target Attribute </title>
</head>

<body>
    <h2>Base tag with target Attribute</h2>
    <p>Visit
    <a href=
"https://tutorialspoint.com/index.htm">
         Tutorialspoint</a>
         To Learn New Technologies
    </p>
</body>

</html>

使用 "form" 标签的 target 属性

运行以下代码时，将显示一个表单。提交表单后，tutorialspoint 网站将在父选项卡中打开。

<!DOCTYPE html>
<html>

<head>
    <title>form tag with target attribute</title>
</head>

<body>
    <h2>Target attribute in form tag</h2>
    <form action="/action_page.php" 
        method="post" 
        target="_parent">
        <label for="first_name">Enter name:</label>
        <input type="text" name="first_name" />
        <br>
        <p>
            Click on submit to view the tutorialspoint
            website on the same frame
        </p>
        <input type="submit">
    </form>
</body>

</html>

支持的浏览器

属性
target	是	是	是	是	是

html_attributes_reference.htm

打印页面

上一个

下一个