Learning Objectives
- 用 a 與 href 建立連結，寫出離開上下文也看得懂的連結文字
- 分辨絕對網址、根相對路徑與相對路徑，算出一條相對路徑最後指到哪個檔案
- 用 id 與 # 連到同一頁或另一頁的某個段落
- 寫出 mailto、tel 連結，並用 download 屬性提供下載
- 說明 target="_blank" 搭配 rel="noopener noreferrer" 的原因
把頁面串起來的是連結
HTML 的全名是 HyperText Markup Language，其中的 HyperText（超文字） 指的就是連結： 文字可以連到另一份文件，文件之間串成一張網，這就是「全球資訊網」（World Wide Web）名字的由來。
寫一個連結只要一個標籤，難的是 href 要寫什麼。同一個網站裡的檔案放在不同資料夾， 從 A 頁連到 B 頁的路徑怎麼寫，取決於 A 在哪裡。路徑寫錯，使用者點下去就是「404 找不到網頁」。
這一課學會三種寫法（絕對網址、根相對路徑、相對路徑）、怎麼連到頁面的某一段，以及幾個連結的安全與無障礙習慣。
a 元素與 href
連結用 <a>（anchor）元素，href 屬性寫目的地，標籤中間的內容是使用者看到、可以點的連結文字：
<a href="https://example.com/club/">資訊社網站</a>
href 可以寫的東西：
| 寫法 | 例子 | 指到 |
|---|---|---|
| 完整網址（絕對網址） | https://example.com/about.html |
任何網站的檔案，連到別的網站一定要這樣寫 |
| 根相對路徑 | /notes/week1.html |
以 / 開頭：從這個網站的根目錄算起 |
| 相對路徑 | week2.html、../index.html |
從目前這個檔案所在的資料夾算起 |
| 錨點 | #schedule |
同一頁裡 id="schedule" 的元素 |
| 其他用途 | mailto:[email protected]、tel:+886-3-000-0000 |
開啟郵件程式、撥號 |
連結文字可以是任何內容，包括一段文字或一張圖片（第 5 課）。
相對路徑怎麼算
假設資訊社的網站有這些檔案：
/（網站根目錄）
├── index.html
├── about.html
├── css/
│ └── style.css
├── notes/
│ ├── index.html
│ ├── week1.html
│ ├── week2.html
│ └── img/
│ └── diagram.svg
└── projects/
└── 2026/
├── poster.html
└── report.pdf
相對路徑從目前這個檔案所在的資料夾出發，一段一段往下走：
| 符號 | 意思 |
|---|---|
檔名 或 ./檔名 |
同一個資料夾裡的檔案（./ 表示「目前這個資料夾」，寫不寫都一樣） |
資料夾/檔名 |
往下進入子資料夾 |
../ |
往上一層（回到父資料夾），可以重複：../../ 是往上兩層 |
如果你正在寫 /notes/week1.html（出發點是 /notes/ 資料夾）：
| href | 指到 | 怎麼走 |
|---|---|---|
week2.html |
/notes/week2.html |
同一個資料夾 |
img/diagram.svg |
/notes/img/diagram.svg |
進入 img |
../index.html |
/index.html |
往上一層到根目錄 |
../css/style.css |
/css/style.css |
往上一層，再進入 css |
/css/style.css |
/css/style.css |
根相對：直接從根目錄算，不管現在在哪 |
該用哪一種？
- 連到別的網站：一定用完整網址。
- 同一個網站裡：相對路徑最常用。整個網站資料夾搬到別的網域、或放在別人網站的子資料夾底下，相對路徑仍然正確。
- 根相對路徑的好處是不管在哪一頁都寫一樣的路徑；但在自己電腦上直接雙擊打開 HTML 檔（網址是
file:///…）時，/代表的是硬碟的根目錄，會找不到檔案。 - 同一個網站裡寫死完整網址：網域一換，所有連結都要改。
小測驗：路徑
目前的網頁是 https://example.com/notes/week1.html，連結寫 href="../about.html"。點下去會到哪個網址？
目前的網頁是 https://example.com/projects/2026/poster.html，圖片寫 src="img/a.png"（路徑的算法和 href 一樣）。瀏覽器會去拿哪個網址？
目前的網頁是 https://example.com/notes/week1.html，連結寫 href="/css/style.css"。會到哪個網址？
社團網站要從 club-old.example.com 搬到 club.example.com，檔案與資料夾結構不變。哪一種連結搬家後會壞掉？
連到頁面的某一段：id 與 #
長的頁面常在最上面放目錄，點了直接跳到那一段。做法分兩步：
<!-- 1. 替目的地加上 id -->
<h2 id="signup">報名方式</h2>
<!-- 2. 連結的 href 寫 # 加上那個 id -->
<a href="#signup">報名方式</a>
id在一頁裡必須是唯一的；用英文小寫與連字號，例如week-1。- 連到別頁的某一段：
week1.html#homework。 href="#top"或href="#"會回到頁面最上面，這是 HTML 規格定義的行為，不需要另外設 id；不過頁首若剛好有id="top"的元素，就會跳到那個元素。- 網址列會出現
#signup，把這個網址分享給別人，對方打開時也會直接跳到那一段。
mailto、tel、download 與在新分頁開啟
寫信與撥號
<a href="mailto:[email protected]">寫信給資訊社</a>
<a href="mailto:[email protected]?subject=報名發表會">用信件報名</a>
<a href="tel:+886-3-000-0000">03-000-0000</a>
mailto:會打開使用者的郵件程式並填好收件人；?subject=可以預先填主旨（多個欄位用&隔開）。tel:在手機上點了會準備撥號；國際格式（+886）在國外撥打也正確。電腦上的行為依裝置而定。
下載：加上 download 屬性，瀏覽器會把檔案存下來，而不是在分頁裡打開。屬性值可以指定存檔的檔名：
<a href="files/report.pdf" download="期末報告.pdf">下載期末報告（PDF，2 MB）</a>
download 只對同一個網站的檔案（以及 blob:、data: 網址）有效；連到別的網站時會被忽略，變成一般的連結。
連結文字最好寫出檔案格式與大小，讓使用者點之前就知道會發生什麼。
在新分頁開啟：target="_blank"
<a href="https://example.com/map" target="_blank" rel="noopener noreferrer">會場地圖（在新分頁開啟）</a>
以前用 target="_blank" 開啟的新頁面，可以透過 window.opener 存取原本的分頁，例如把它偷偷換成一個仿冒的登入頁。
rel="noopener" 切斷這個關係，rel="noreferrer" 再加上一層：瀏覽器不告訴對方網站使用者是從哪一頁連過來的（也就是不送出 Referer）。
目前較新的瀏覽器遇到 target="_blank" 已經自動套用 noopener 的保護，但明確寫出 rel 可以照顧到舊瀏覽器，也讓讀程式碼的人一眼看出你的用意。
要不要開新分頁，交給使用者決定比較好（他可以自己按住 Ctrl 點）；真的要開，連結文字寫出「在新分頁開啟」。
連結文字要能看懂
螢幕閱讀器可以列出一頁裡所有的連結讓使用者挑選；很多人瀏覽網頁時，眼睛也是先掃過連結。 這時候連結文字會離開上下文單獨出現：
| 不好的連結文字 | 單獨出現時 | 改寫 |
|---|---|---|
完整議程請<a>點這裡</a> |
「點這裡」 | 請看<a>完整議程</a> |
報名表<a>按此</a>下載 |
「按此」 | <a>下載報名表（PDF，120 KB）</a> |
<a>https://example.com/club/notes/week1.html</a> |
一長串網址 | <a>第 1 週筆記</a> |
原則：
- 連結文字說出點了會到哪裡、得到什麼，不寫「點這裡」「按此」「更多」。
- 不必寫「連結」兩個字，螢幕閱讀器本來就會告訴使用者這是連結。
- 同一頁裡，相同的連結文字應該連到相同的地方。
小測驗：錨點與連結的寫法
想從 week1.html 連到 week2.html 裡 id="homework" 的那一段，href 怎麼寫？（兩個檔案在同一個資料夾）
target="_blank" 搭配 rel="noopener" 是為了防止什麼？
下面哪一個連結文字最好？
<a href="https://example.org/report.pdf" download> 連到別的網站的檔案，加上 download 會怎樣？
重點整理
- 連結：
<a href="目的地">連結文字</a>。 - 完整網址連到任何網站；
/開頭的根相對路徑從網站根目錄算；相對路徑從目前檔案所在的資料夾算，../往上一層。 - 同一網站內多用相對路徑；網站搬家時，寫死網域的完整網址會壞。
- 錨點：目的地加
id，連結寫#id；別頁的某一段寫檔名#id；#top回到頁首。 mailto:寫信、tel:撥號；download讓同一網站的檔案直接下載。target="_blank"搭配rel="noopener noreferrer"，並在連結文字說明會開新分頁。- 連結文字說出目的地，不寫「點這裡」。
下一課講圖片與多媒體：<img> 的替代文字、讓圖片依螢幕大小換尺寸，以及影片與音訊。