資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中指定連結並解釋 Target 屬性？
在 HTML 中指定連結
HTML 連結基本上是超連結。我們可以透過點選連結訪問另一個文件。當我們將滑鼠懸停在連結上時，滑鼠箭頭會變成一個小手。連結不需要文字。連結可以是影像或其他型別的 HTML 元素。
超連結由 HTML 的<a>標籤定義，也稱為錨標籤。語法如下：
<a href="url">--link text--</a>
href 屬性指示連結的目標，是 <a> 元素最重要的屬性。連結文字是讀者將看到的文字部分。透過點選連結文字，讀者將被引導到指定的 URL 地址。如果 <a> 標籤上沒有 href 屬性，則它只是一個超連結的佔位符。
在所有瀏覽器中，連結預設情況下將顯示如下：
未訪問的連結使用藍色突出顯示。
已訪問的連結使用紫色突出顯示。
活動的連結使用紅色突出顯示。
錨標籤有幾個屬性，如下所示。
charset: 此屬性指定字元集。HTML 5 不支援它。
download: 當用戶點選時，用於指定要下載的目標連結。
hreflang: 它指定連結文件的語言。
media: 用於指定連結的媒體。
coords: 用於指定連結座標。HTML 5 不支援它。
name: 這是錨的名稱。HTML 5 不支援它，因此我們可以使用全域性 id 屬性代替。
rel: 用於指定當前文件和連結文件之間的關係。
shape: 指定連結的形狀。HTML 5 不支援它。
type: 此引數指定連結的型別。
target: 它指定連結的目標。
rev: 它指定連結文件和當前文件之間的關係。HTML 5 不支援它。
讓我們看看在 HTML 中指定連結的不同示例。
示例
在這個示例中，我們將演示將影像用作連結的用法。
<!DOCTYPE html>
<html>
<head>
<title>Using an image as a link</title>
<style>
div{
padding:50px;
width:500px;
height:350px;
background-color:papayawhip;
}
img{
height:100px;
width:300px;
border:2px solid sienna;
}
p{
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>Click on the image to get redirected to the link's destination.<p>
<a href="https://tutorialspoint.tw/index.htm">
<img src="https://tutorialspoint.tw/images/logo.png">
</a>
</div>
</body>
</html>
示例
此特定示例演示了建立開啟使用者電子郵件的連結。
<!DOCTYPE html>
<html>
<head>
<title>Creating a link to an email address</title>
<style>
div{
padding:50px;
width:300px;
height:150px;
background-color:darkslategrey;
}
p{
font-size:18px;
color:white;
}
a{
color:cornflowerblue;
}
</style>
</head>
<body>
<div>
<p>Creating a link that opens in the user's email using mailto: in the href attribute.</p>
<a href="mailto:contact@tutorialspoint.com">Send email</a>
</div>
</body>
</html>
示例
在這個示例中，我們將建立一個指向 JavaScript 函式的連結。
<!DOCTYPE html>
<html>
<head>
<title>Creating a link to a JavaScript function</title>
<style>
div{
padding:50px;
width:300px;
height:100px;
background-color:lavenderblush;
}
</style>
</head>
<body>
<div>
<a href="javascript:alert('Welcome to the website!');">Click here to execute the JavaScript function.</a>
</div>
</body>
</html>
Target 屬性
連結上的target屬性指定應在何處開啟連結頁面。連結可以在同一選項卡、新選項卡、新視窗或 iframe 中開啟頁面。如果未指定 target 引數，則連結將在與當前頁面相同的選項卡/視窗中開啟。target 屬性需要 href 的值。
語法
<a href="url" target="_self | _blank | _parent | _top | framename" />
屬性值
_self: 在與當前頁面相同的選項卡/視窗中開啟頁面。這是預設設定。
_blank: 此命令在新選項卡中開啟頁面。
_parent: 此函式在父 iframe 中開啟頁面。如果沒有父級，則將在同一個 iframe 中。
_top: 在 iframe 的最頂層部分開啟頁面。如果沒有最頂層的 iframe，則將在同一個 iframe 中。
framename: 此函式在命名 iframe 中開啟頁面。
示例
此示例演示了在 <a> 標籤中使用 target 屬性及其所有屬性值。
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML <a> target Attribute
</title>
<style>
p{
font-weight:bold;
}
div{
background-color:lightblue;
height:100px;
width:200px;
padding:20px;
}
</style>
</head>
<body>
<p>Opening links at different targets</p>
<div>
<a href="https://tutorialspoint.tw/index.htm" target="_self">target 1</a><br>
<a href="https://tutorialspoint.tw/index.htm" target="_blank">target 2</a><br>
<a href="https://tutorialspoint.tw/index.htm" target="_parent">target 3</a><br>
<a href="https://tutorialspoint.tw/index.htm" target="_top">target 4</a><br>
<a href="https://tutorialspoint.tw/index.htm" target="framename">target 5</a>
</div>
</body>
</html>
點選 target 1 將在同一視窗中開啟連結。
點選 target 2 將在新選項卡中開啟連結。
點選 target 3 和 4 將重新載入整個視窗並在當前視窗中開啟連結，因為沒有 iframe。
點選 target 5 將在新視窗中開啟連結。
443 次瀏覽
