HTML - href 屬性

HTML 的 href 屬性用於指定超連結指向的網頁或資源的 URL。

如果不存在 href 屬性，則 <a> 標籤將不會被視為超連結，如果我們沒有為 href 屬性賦值，則使用者點選連結時不會發生任何事情。我們可以使用 href = #id_name 或 href = #top 將同一文件中的頂部或任何其他頁面部分連結到當前頁面。

語法

<a href = "value"></a>

其中，value 可以是任何本地檔案位置、影像位置、線上網站 URL、線上影像 URL、任何部分的 #id 等。

應用於

以下列出的元素允許使用 HTML href 屬性

元素	描述
<a>	HTML <a> 標籤用於使用連結將外部資源附加到網頁。
<link>	HTML <link> 標籤指定當前文件與外部資源之間的關係。
<base>	HTML <base> 標籤用於指定基本 URL。
<area>	HTML <area> 標籤指定影像的區域，可以單擊或作為超連結連結到的活動區域。

HTML href 屬性示例

以下示例將說明 HTML href 屬性，以及我們應該在哪裡以及如何使用此屬性！

使用 href 屬性的 HTML 超連結

在以下示例中，我們將使用 <a> 標籤的 href 屬性建立指向外部資源的超連結。

<!DOCTYPE html>
<html lang="en">
<body>
   <h1>HTML href Attribute</h1>
   <p>
      Visit the following website.
   </p>
   <a href="https://tutorialspoint.tw">
      Learn some tutorials
   </a>
</body>

</html>

指向電子郵件地址的可點選連結

在此示例中，我們建立一個連結以將郵件傳送到指定的電子郵件。我們使用 href 值內的“mailto:”在電子郵件名稱之前來實現此目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML href mailto Example</title>
</head>

<body>
    <h1>Contact Us</h1>
    <p>
        If you have any questions, feel free to 
        <a href="mailto:info@example.com">
            send us an email
        </a>
    </p>
</body>

</html>

指向電話號碼的可點選連結

在這裡，我們建立一個指向指定電話號碼的超連結，啟用一鍵通話功能，利用 href 屬性的 tel: 值。（在您的移動裝置中工作）

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML href tel Example</title>
</head>

<body>
   <h1>Contact Us</h1>
   <p>
      If you have any questions, feel free to
      call us:  
      <a href="tel:+91-9876543210">
            9876543210
      </a>
   </p>
</body>

</html>

使用 href 屬性的內聯 JavaScript

以下程式碼說明了使用 href 屬性執行內聯 JavaScript 程式碼。在這裡，我們在 href 值內程式碼之前使用“javascript:”標題來提及內聯 javascript 程式碼。

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

<body>
    <h3>HTML href Attribute</h3>
    <strong>
      Execute inline JavaScript using href Attribute
    </strong>
    <p>
        Click the following link to execute JavaScript:
        <a href="javascript:document.write('Welcome to Tutorialspoint!');">
            Execute JavaScript
        </a> 
    </p> 
</body>

</html>

使用 href 屬性進行頁面導航

在下面的程式碼中，我們演示了使用 href 屬性導航到同一頁面內的不同部分。我們在 href 中提供 '#idofsection' 以導航到我們需要的部分。

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

<head>
    <style>
        div {
            height: 900px;
        }
    </style>
</head>

<body>
    <h2>Ed-Tech</h2>
    <div> 
        <p>
            Tutorialspoint: Simply Easy Learning
        </p>
        <a href="#about">Know More</a>
    </div>
    <h2 id="about">Section 2</h2>
    <div> 
        <p>
            Tutorials Point is an online learning platform
            providing free tutorials, paid premium courses,
            and eBooks. Learn the latest technologies and 
            programming languages SQL, MySQL, Python, C, 
            C++, Java, Python, PHP, Machine Learning, data
            science, AI, Prompt Engineering and more.
        </p>
    </div>
</body>

</html>

將樣式表匯入 HTML

在這裡，我們在這段程式碼中使用 link 標籤內的 herf 屬性將外部 css 樣式表匯入 HTML 頁面。此程式碼在我們的 IDE 上無法執行，您必須在本地伺服器上執行它。

<!DOCTYPE html>
<html lang="en">
<head>
      <title>Import CSS using Link Tag</title>
      <!-- Link to external CSS file -->
      <link rel="stylesheet" href="styles.css">
</head>
<body>
      <h1>Imported CSS using Link Tag</h1>
</body>
</html>

styles.css

body{
   background-color: red;
   font-size: 5px;
}

支援的瀏覽器

屬性
href	是	是	是	是	是

html_attributes_reference.htm

列印頁面