單元 3 · 連結與圖片

行內式、參照式、自動連結與相對路徑 — Links & Images

行內式連結 · Inline Links

基本形式 [文字](網址),後面可以再加「標題」(滑鼠移上去顯示):[文字](網址 "標題")

原始碼 · SOURCE
這份[教學網站](https://example.com)
有[提示標題](https://example.com "滑上去看看")。
渲染結果 · RENDERED

參照式連結 · Reference Links

連結很多時,把網址集中到文末定義,正文乾淨好維護。[文字][標籤] + 文末 [標籤]: 網址

原始碼 · SOURCE
先看[官方規格][spec],再看[入門指南][guide]。

[spec]: https://daringfireball.net/projects/markdown/
[guide]: https://www.markdownguide.org/
渲染結果 · RENDERED

先看官方規格,再看入門指南

建議:一份文件超過三五個連結,就用參照式。文末的定義區整齊排列,之後要改網址只要改一處。

自動連結 · Automatic Links

用尖括號包住網址或信箱,可直接點擊。GitHub 上甚至連尖括號都不必(單元 6 會講)。

原始碼 · SOURCE
連到 <https://github.com>
或寫信到 <hello@example.com>
渲染結果 · RENDERED

圖片 · Images

語法 = 連結前加一個 !![替代文字](圖片網址)。替代文字(alt text)在圖片載入失敗或螢幕閱讀器時很重要。

原始碼 · SOURCE
![Logo 圖片](images/logo.png "站名")

[![Logo](images/logo.png)](https://example.com)
渲染結果 · RENDERED

第一行:![alt](url) 直接顯示圖片。

第二行:把整張圖片包進 []() 連結,點圖即跳轉——常見於「點 logo 回首頁」。

常見錯誤:圖片網址寫錯只會顯示破圖,因為沒有 alt 之外的回饋。 記得給每張圖寫清楚的替代文字。

相對路徑 · Relative Paths

在 repo 內部的文件(如 README 引用同 repo 的圖片),用相對路徑而非完整網址,好處是 clone 後仍有效。

相對路徑規則 · PATHS
docs/guide.md               # 同資料夾內
./docs/guide.md             # 同上(./ 表示「目前資料夾」)
../README.md                # 上一層資料夾
images/screenshot.png       # 子資料夾
docs/unit-03/#連結與圖片     # 錨點:跳到該頁的某小節
GitHub 小知識:在 GitHub 上,markdown 檔之間的相對連結即使檔案被移動, GitHub 會自動修正路徑——這是它比完整網址好的地方。
看完這頁你應該能說出:
  • 行內式與參照式連結的差別,以及何時用參照式。
  • 自動連結 <url> 的寫法。
  • 圖片語法 ![alt](url) 與「點圖跳轉」的包法。
  • 為什麼 repo 內文件要用相對路徑。

延伸閱讀