【HTML 筆記】超連結（Hyperlinks）【part 5】 === [TOC] Hello Guys，我是 LukeTseng，自從大學放榜後，我就積極不間斷的學習資訊相關的東西，持續地茁壯自己，主要最大的成分還是興趣與熱愛這個學科來支撐的～總之，廢話不多說，本文主要透過網路上的各大免費平台自學，並且整理成一篇筆記以供自己閱讀的同時，也能促進個人的學習軌跡。 HTML 超連結（連結） --- HTML 用 `<a>` 設定超文本連結。 基本語法如下： `<a href="URL">link</a>` * `<a>` 標籤：定義一個超連結（anchor）。是 HTML 中用來建立可點擊連結的主要標籤。 * href 屬性：指定目標 URL，當點擊連結時，瀏覽器會導覽至此 URL。 一個超連結有以下預設的形式： * 一個從來都未存取過的連結顯示為「藍色」字體並有底線，如下圖。 * ![image](https://hackmd.io/_uploads/SJzem95Ryx.png) * 存取過的連結顯示為「紫色」並有底線，如下圖。 * ![image](https://hackmd.io/_uploads/H1JHQ5q01g.png) * 當點擊連結時，連結顯示為「紅色」並有底線。（就是閃一下紅色的，然後又變回去藍色） :::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：定義連結目標。 ```html <a href="https://www.example.com">前往 Example 網站</a> ``` ![image](https://hackmd.io/_uploads/B1QZwqsCJx.png) target：在哪個位置開啟目標網頁。 ```html <a href="https://www.example.com" target="_blank">在新視窗開啟 Example 網站</a> ``` ![image](https://hackmd.io/_uploads/Bkv_w5oAye.png) target 有以下四種值（通常用得到的就只有 `_blank`）： * `_blank`：在新視窗或新分頁中開啟連結。 * `_self`：在目前視窗或標籤頁中開啟連結（預設）。 * `_parent`：在父層視窗中開啟連結。 * `_top`：在頂層視窗開啟。 download：指定下載檔案預設名稱 ```html <a href="youtube.png" download="youtube_icon.png">下載文件</a> ``` ![image](https://hackmd.io/_uploads/Hkp_OqoC1e.png) 點擊後會跳出這個： ![image](https://hackmd.io/_uploads/BJ0Yu5j0ke.png) rel：當前頁面與目標網頁之間的關係 ```html <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：指定目標網頁的語言 ```html <a href="https://www.example.com" hreflang="en">Example (英文版)</a> ``` type：指定目標網頁的媒體類型 ```html <a href="https://www.example.com" type="text/html">HTML 文件連結</a> ``` media：指定適用的媒體條件 ```html <a href="https://www.example.com" media="screen">僅在螢幕上顯示的連結</a> ``` 總結 --- ### 1. 基本語法 `<a>` 標籤是用來定義超連結的東東，通常會透過 `href` 屬性設定目標 URL（Uniform Resource Locator）： ```html <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)