HTML - <a> 標籤

HTML <a> 標籤定義超連結。它用於在一個頁面之間建立連結。<a> 元素最重要的屬性是 href 屬性，它指示連結的目標。

錨點標籤 (<a>) 及其 href 屬性建立指向網頁的超連結，其中 href 屬性指示連結的目標。預設情況下，點選連結後，它將在所有瀏覽器中顯示如下。如果錨點標籤中存在 href 屬性，則在 <a> 標籤獲得焦點時按 Enter 鍵將啟用它。

語法

<a href="...">Content...</a>

屬性

HTML a 標籤支援 HTML 的全域性和事件屬性。還接受一些特定的屬性，如下所示。

屬性	值	描述
download	檔名	允許使用者在點選超連結時下載連結的檔案。
href	URL	指定要將使用者傳送到的連結頁面。
hreflang	語言程式碼	指定附加連結的語言。
media	媒體查詢	指定連結文件針對的媒體/裝置。
ping	URL 列表	指定以空格分隔的 URL 列表。
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	指定要與連結一起傳送的推薦者資訊。
rel	alternate author bookmark external help license next nofollow noreferrer noopener prev search tag	定義當前 URL 文件和連結 URL 文件之間的關係。
target	_blank _parent _self _top	指定如何或在哪裡開啟連結文件。
type	媒體型別	指定連結 URL 文件的媒體型別。

HTML a 標籤示例

下面的示例將說明 a 標籤的使用。在哪裡、何時以及如何使用錨點標籤以及如何使用 CSS 樣式化錨點元素。

使用 a 標籤建立超連結

在下面的示例中，我們使用 <a> 標籤及其 href 屬性建立一個超連結，該連結將使用者傳送到我們的主頁。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <!-- Creating Hyperlink Text-->
    <p>Visit our
        <a href="https://tutorialspoint.tw/index.htm">
            Home Page
        </a>
    </p>
</body>

</html>

使用 a 標籤的空目標

在下面的示例中，我們將 href="" 值保留為空。由於我們沒有為 href 屬性提供連結目標，因此如果使用者點選連結，則不會發生任何事情。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <!-- Creating Hyperlink Text-->
    <!-- This will not redirect to anywhere 
            but will open HTML ide
    -->
    <p>Visit our
        <a href="">
            Home Page
        </a>
    </p>
</body>

</html>

在新標籤頁中開啟連結

以下是另一個 HTML 錨點標籤 (<a>) 的示例。在這裡，我們使用<a> 標籤及其 href 屬性建立一個超連結，我們將連結目標作為 Tutorialspoint 網站的登入頁面提供，即："https://tutorialspoint.tw/ 是 index.htm"。

我們將 target 屬性值設定為target = ‘_blank’，當用戶點選連結時，連結目標將在新視窗中開啟。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML a Tag</title>
</head>

<body>
   <!-- Opening Links in New Tab -->
   <a href=https://tutorialspoint.tw/index.htm 
      target="_blank" 
      name=‘tutorialspoint’>
       TutorialsPoint
   </a>
</body>

</html>

連結到電子郵件地址和電話號碼

在此示例中，我們將建立兩個超連結，如果我們點選這些連結，一個將開啟預設的郵件應用程式以將郵件傳送到 href 屬性中提到的郵件 ID。另一個將開啟呼叫功能以呼叫 href 屬性中提到的號碼。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <!-- Linking to Email Addresses and Phone Numbers  -->
    <p>You can contact with us</p>
    <ul>
        <li><a href="tel:+910000000" name=Call>
       Call Us
   </a></li>

        <li><a href="mailto:example@xyz.com" name=Mail>
       Mail Us
   </a></li>
    </ul>
</body>

</html>

建立內部頁面錨點

在下面的示例中，我們正在建立頁面內導航連結。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
    <style>
    div{
        margin-top: 1500px;
        border: 1px solid black;
    }
    </style>
</head>

<body>
    <a href="#section1">Go to Section 1</a>
    <br>
    <a href="#section2">Go to Section 2</a>
    <!-- Creating Internal Page Anchors  -->
    <div>
        <h3 id="section1">Section 1</h3>
    </div>
    <div>
        <h3 id="section2">Section 2</h3>
    </div>
    
</body>

</html>

下載附加的連結檔案

使用帶有錨點 <a> 標籤的 download 屬性，我們可以透過點選連結或特定圖片來從瀏覽器下載本地圖片。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <div>
        <!-- Downloading attached Linked file-->
        <p>
            Click the 
            <a href=
"https://tutorialspoint.tw/images/logo.png"
               name=‘image’ download>
                 Download
            </a> 
            Button
        </p>

    </div>
</body>

</html>

支援的瀏覽器

標籤
a	是	是	是	是	是

html_tags_reference.htm

列印頁面