HTML 連結
連結幾乎存在於所有網頁中。連結允許使用者點選從一個頁面跳轉到另一個頁面。
HTML 連結 - 超連結
HTML 連結是超連結。
您可以點選一個連結並跳轉到另一個文件。
當您將滑鼠移到連結上時，滑鼠箭頭將變成一個小手。
注意：連結不一定是文字。連結可以是圖片或其他 HTML 元素！
HTML 連結 - 語法
HTML <a> 標籤定義一個超連結。它的語法如下：
<a href="url">連結文字</a>
<a> 元素最重要的屬性是 href 屬性，它指示連結的目標。
連結文字是讀者將看到的文字。
點選連結文字會將讀者傳送到指定的 URL 地址。
預設情況下，連結在所有瀏覽器中將如下顯示：
- 未訪問過的連結顯示為藍色下劃線
- 已訪問過的連結顯示為紫色下劃線
- 活動的連結顯示為紅色下劃線
提示：連結當然可以用 CSS 進行樣式設定，以獲得不同的外觀！
HTML 連結 - target 屬性
預設情況下，連結的頁面將在當前瀏覽器視窗中顯示。要更改此行為，您必須為連結指定另一個目標。
target 屬性指定在哪裡開啟連結的文件。
target 屬性可以具有以下值之一：
_self- 預設。在點選的同一視窗/標籤頁中開啟文件_blank- 在新視窗或標籤頁中開啟文件_parent- 在父框架中開啟文件_top- 在視窗的整個主體中開啟文件
示例
使用 target="_blank" 在新的瀏覽器視窗或標籤頁中開啟連結的文件。
<a href="https://w3schools.tw/" target="_blank">訪問 W3Schools！</a>
自己動手試一試 »
絕對 URL 與相對 URL
上面的兩個示例都在 href 屬性中使用了絕對 URL（完整的網路地址）。
本地連結（指向同一網站內的頁面的連結）使用相對 URL（不帶 "https://www" 部分）指定。
示例
<h2>絕對 URL</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>相對 URL</h2>
<p><a href="html_images.asp">HTML 圖片</a></p>
<p><a href="/css/default.asp">CSS 教程</a></p>
自己動手試一試 »
HTML 連結 - 將圖片用作連結
要將圖片用作連結，只需將 <img> 標籤放在 <a> 標籤內。
示例
<a href="default.asp">
<img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;">
</a>
自己動手試一試 »
連結到電子郵件地址
在 href 屬性中使用 mailto: 來建立連結，該連結將開啟使用者的電子郵件程式（讓他們傳送新電子郵件）。
按鈕作為連結
要將 HTML 按鈕用作連結，您需要新增一些 JavaScript 程式碼。
JavaScript 允許您在特定事件（如按鈕點選）發生時指定要執行的操作。
提示：在我們的 JavaScript 教程 中瞭解更多關於 JavaScript 的知識。
連結標題
title 屬性指定有關元素的額外資訊。這些資訊在滑鼠懸停在元素上時通常會顯示為工具提示文字。
更多關於絕對 URL 和相對 URL
You can read more about file paths in the chapter HTML File Paths.
Chapter Summary
- 使用
<a>元素定義連結。 - 使用
href屬性定義連結地址。 - 使用
target屬性定義連結文件的開啟位置。 - 使用
<img>元素（在<a>中）將圖片用作連結。 - 在
href屬性中使用mailto:方案來建立連結，該連結將開啟使用者的電子郵件程式。
HTML 連結標籤
| 標籤 | 描述 |
|---|---|
| <a> | 定義超連結 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
影片：HTML 連結
