HTML - 文字連結

一個網頁可以包含各種連結，這些連結可以直接將我們帶到其他網頁或資源，甚至可以帶到給定頁面的特定部分。

超連結是一種特殊的連結，允許使用者透過點選它從一個網頁或資源導航到另一個網頁或資源。您可以使用網頁上提供的文字或影像建立超連結。超連結使用 HTML 標籤 <a> 指定。此標籤稱為 **錨點標籤**，起始 <a> 標籤和結束 </a> 標籤之間的任何內容都將成為連結的一部分，使用者可以點選該部分以到達連結的文件。

我們建議您學習一下關於理解 URL 的簡短教程。

語法

<a href="Document URL">Text</a>

HTML 文字連結示例

以下是一些說明如何在 HTML 中使用文字連結的示例程式碼。

建立超連結

在這個例子中，我們將使用錨點標籤建立一個到 tutorialspoint 網站的超連結。在輸出中，點選“學習教程”後，您將被重定向到 Tutorialspoint 的主頁。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
</head>

<body>
   <p>Click following link</p>
   <a href="https://tutorialspoint.tw/" 
      target="_blank">
         Learn Tutorials
   </a>
</body>

</html>

錨點標籤的 target 屬性

HTML 中錨點標籤的 target 屬性指定在何處開啟連結的文件。此屬性用於根據需要在新瀏覽器標籤頁、同一標籤頁或父框架中開啟連結的文件。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://tutorialspoint.tw/">
</head>

<body>
   <p>Click any of the following links</p>
   <a href="/html/index.htm" target="_blank">
            Opens in New
   </a> | 
   <a href="/html/index.htm" target="_self">
            Opens in Self
   </a> | 
   <a href="/html/index.htm" target="_parent">
            Opens in Parent
   </a> | 
   <a href="/html/index.htm" target="_top">
            Opens in Body
   </a>
</body>

</html>

基本路徑的使用

當您連結同一個網站的相關 HTML 文件時，不需要為每個連結都提供完整的 URL。如果您在 HTML 文件的頭部使用 **<base>** 標籤，就可以避免這種情況。此標籤用於為所有連結提供一個基本路徑。因此，您的瀏覽器會將給定的相對路徑與基本路徑連線起來，從而形成一個完整的 URL。

下面的示例使用 <base> 標籤來指定基本 URL，之後我們可以對所有連結使用相對路徑，而不是為每個連結提供完整的 URL。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://tutorialspoint.tw/">
</head>

<body>
   <p>Click following link</p>
   <a href="/html/index.htm" target="_blank">
         HTML Tutorial
   </a>
</body>

</html>

連結到頁面部分

在下面的程式碼中，我們演示瞭如何使用 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>

設定連結文字顏色

您可以使用 <body> 標籤的 **link、alink** 和 **vlink** 屬性來設定連結、活動連結和已訪問連結的顏色。

將以下內容儲存到 test.htm 並將其在任何 Web 瀏覽器中開啟，以檢視 **link、alink** 和 **vlink** 屬性是如何工作的。

<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://tutorialspoint.tw/">
</head>
<body alink="red" link="green" vlink="black">
   <p>Click following link</p>
   <a href="/html/index.htm" target="_blank">
         HTML Tutorial
   </a>
</body>

</html>

HTML 可下載連結

您可以建立文字連結以使您的 PDF、DOC 或 ZIP 檔案可下載。這是透過使用錨點標籤的 download 屬性實現的。

<!DOCTYPE html>
<html>

<head>
   <title>Hyperlink Example</title>
   <base href="https://tutorialspoint.tw/">
</head>

<body>
   <a href="/html/src/sample.txt">
      View File
   </a>
   <br><br>
   <a href="/html/src/sample.txt" download>
      download File
   </a>
</body>

</html>

列印頁面