HTML 超連結標籤 | 梧所不學

超連結是網頁中最基本的互動元素之一，主要用途是讓使用者能從當前頁面連結至其他頁面或網站，今天就來聊聊如何在 HTML 中建立你需要的超連結。

超連結的基本語法

HTML 超連結的標籤是 <a>，然後它的用法如下 :

<a href="https://www.google.com">前往 Google</a>

href 屬性用來指定要前往的目標網址，而標籤中間的文字「點擊前往 Google」就是使用者看到的連結文字。

超連結的種類

超連結常用的種類有以下幾種：

1. 內部連結：連接到同一網站內的其他頁面。
2. 外部連結：連接到其他網站的頁面。
3. 錨點連結：連接到同一頁面內的特定位置。
4. 郵件連結：開啟預設的電子郵件軟體，並填寫收件人地址。
5. 下載檔案連結：下載指定的檔案。

內部連結

內部連結的 href 屬性可以使用相對路徑或絕對路徑。

<a href="about.html">關於我們</a>

<a href="/contact.html">聯絡我們</a>

外部連結

外部連結的 href 屬性必須是完整的網址，包含 https:// 或 http://。

<a href="https://www.google.com">前往 Google</a>

錨點連結

錨點連結可以讓使用者快速跳到同一頁面的特定區塊。首先，需要在目標區塊設定一個id屬性：

<h2 id="section1">第一章</h2>

然後，在超連結的 href 屬性中，使用 # 加上 id 名稱：

<a href="#section1">跳到第一章</a>

郵件連結

郵件連結的 href 屬性設定為 mailto: 加上電子郵件地址。

<a href="mailto:recipient@example.com">寄送郵件</a>

下載檔案連結

下載檔案連結的 href 屬性設定為檔案路徑，並加上 download 屬性指定下載檔名。

<a href="path/to/file.zip" download="filename.zip">下載檔案</a>

超連結的屬性

除了href 屬性，<a> 標籤還有其他常用的屬性：

target 屬性，用來指定連結目標的開啟方式：

• _self：在目前視窗開啟（預設）。
• _blank：在新視窗開啟。
• _parent：在上一層父視窗開啟。
• _top：在最頂層父視窗開啟。

<a href="https://www.google.com" target="_blank">在新視窗開啟 Google</a>

title 屬性，滑鼠移到連結上方時，顯示的提示文字。

<a href="https://www.google.com" title="前往 Google 首頁">Google</a>

結語

超連結雖然看似簡單，卻是網頁中非常重要的一環，掌握超連結的基本語法與常用屬性，能幫助你建立具有良好互動體驗的網頁。