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.tw/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.tw/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

列印頁面

上一個

下一個