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

[TOC]

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

HTML 超連結（連結）
---

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

基本語法如下：

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

* `<a>` 標籤：定義一個超連結（anchor）。是 HTML 中用來建立可點擊連結的主要標籤。
* href 屬性：指定目標 URL，當點擊連結時，瀏覽器會導覽至此 URL。

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

* 一個從來都未存取過的連結顯示為「藍色」字體並有底線，如下圖。
* 
* 存取過的連結顯示為「紫色」並有底線，如下圖。
* 
* 當點擊連結時，連結顯示為「紅色」並有底線。（就是閃一下紅色的，然後又變回去藍色）

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

### `<a>` 支援的屬性
---

通常只會使用 href、target：

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

href：定義連結目標。

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


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

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


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

* `_blank`：在新視窗或新分頁中開啟連結。
* `_self`：在目前視窗或標籤頁中開啟連結（預設）。
* `_parent`：在父層視窗中開啟連結。
* `_top`：在頂層視窗開啟。

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

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


點擊後會跳出這個：


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

<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：指定目標網頁的語言

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

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

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

media：指定適用的媒體條件

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

總結
---

### 1. 基本語法

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

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

### 2. 超連結預設樣式

- **未存取的連結**：藍色、有底線
- **已存取過的連結**：紫色、有底線
- **點擊時的連結**：閃一下紅色又跳回去藍色、有底線

> 樣式可透過 CSS 自訂。

### 3. `<a>` 標籤常用屬性

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

參考資料
---

[HTML Links Hyperlinks | W3Schools](https://www.w3schools.com/Html/html_links.asp)

[超連結 `<a>` - HTML 教學 | STEAM 教育學習網](https://steam.oxxostudio.tw/category/html/tags/a.html#a21)

[HTML 链接 | 菜鸟教程](https://www.runoob.com/html/html-links.html)