【HTML 筆記】超連結（Hyperlinks）【part 5】

Hello Guys，我是 LukeTseng，自從大學放榜後，我就積極不間斷的學習資訊相關的東西，持續地茁壯自己，主要最大的成分還是興趣與熱愛這個學科來支撐的～總之，廢話不多說，本文主要透過網路上的各大免費平台自學，並且整理成一篇筆記以供自己閱讀的同時，也能促進個人的學習軌跡。

HTML 超連結（連結）

HTML 用 <a> 設定超文本連結。

基本語法如下：

<a href="URL">link</a>

一個超連結有以下預設的形式：

:::info
若將這些超連結設定 css 後，會根據 css 語法去顯示。（像是透過 css 將未存取的連結顏色改成黃色）
:::

通常只會使用 href、target：

屬性	說明
href	目標網頁網址，可以使用絕對路徑或相對路徑，甚至可以是 id、email、電話或簡單的 javascript。
target	在哪個位置開啟目標網頁。
download	如果目標網頁是下載檔案，透過該屬性指定檔案預設名稱。
rel	當前頁面和目標網頁的關係。
ping	開啟目標網頁時，發送 HTTP POST 通知到指定的 URL 位址。
hreflang	目標網頁的語言。
referrerpolicy	指定發出請求（request）時，瀏覽器應該要送出什麼 referrer（請求來源位址）。
type	目標網頁的類型。
media	開啟目標網頁的媒體。

href：定義連結目標。

1	<a href="https://www.example.com">前往 Example 網站</a>

target：在哪個位置開啟目標網頁。

1	<a href="https://www.example.com" target="_blank">在新視窗開啟 Example 網站</a>

target 有以下四種值（通常用得到的就只有 _blank）：

download：指定下載檔案預設名稱

1	<a href="youtube.png" download="youtube_icon.png">下載文件</a>

點擊後會跳出這個：

rel：當前頁面與目標網頁之間的關係

1	<a href="https://www.example.com" rel="noopener">Example 網站</a>

rel 有三個值：

nofollow：表示搜尋引擎不應追蹤該連結，常用於外部連結。
noopener、noreferrer：防止在新標籤中開啟連結時的安全問題，尤其是使用 target="_blank" 時。
- noopener：防止新的瀏覽上下文（頁面）存取window.opener屬性和open方法。
- noreferrer：不發送 referer header（即不告訴目標網站你從哪裡來的）。

noopener、noreferrer 可同時使用，如：<a href="https://www.example.com" rel="noopener noreferrer">Example 網站</a>

hreflang：指定目標網頁的語言

1	<a href="https://www.example.com" hreflang="en">Example (英文版)</a>

type：指定目標網頁的媒體類型

1	<a href="https://www.example.com" type="text/html">HTML 文件連結</a>

media：指定適用的媒體條件

1	<a href="https://www.example.com" media="screen">僅在螢幕上顯示的連結</a>

<a> 標籤是用來定義超連結的東東，通常會透過 href 屬性設定目標 URL（Uniform Resource Locator）：

1	<a href="URL">link</a>

樣式可透過 CSS 自訂。

屬性	說明
`href`	設定目標網址，可為絕對路徑、相對路徑、ID、email、電話、或 JavaScript。
`target`	指定在哪個視窗或分頁開啟連結（如 `_blank` 表示新視窗）。
`download`	指定下載檔案的預設檔名。
`rel`	定義與目標頁面的關係（如 `noopener`、`noreferrer` 增加安全性）。
`hreflang`	指定目標網頁的語言。
`type`	指定連結資源的媒體類型。
`media`	指定適用的媒體條件（如僅在螢幕上顯示）。
`referrerpolicy`	控制 referrer（來源位址）的傳送行為。
`ping`	在點擊連結時向指定 URL 傳送 POST 通知，常用於追蹤點擊。