Markdown 連結與圖片語法
在撰寫 Markdown 文件時，加入外部網站連結或插入圖片是非常常見的需求。本章將詳細介紹這兩者的語法。
連結 (Links)
Markdown 提供了幾種建立連結的方式，最常用的是「行內連結」。
行內連結 (Inline Links)
這最直接的寫法。
- 語法：
[顯示文字](連結網址) - 範例：
[Google](https://www.google.com) - 效果：Google
帶有標題的連結
如果你希望滑鼠游標移到連結上時顯示提示文字。
- 語法：
[顯示文字](連結網址 "提示文字") - 範例：
[Fooish 程式教學](https://www.fooish.com "前往課程首頁")
自動連結 (Automatic Links)
如果你只是想把網址直接轉換成連結。
- 語法：
<https://www.google.com> - 效果：https://www.google.com
參考連結 (Reference Links)
當一份文件中有很多重複的連結，或者連結網址非常長時，使用「行內連結」會讓原始碼（Markdown 檔案內容）變得很凌亂。這時候，「參考連結」就像是程式碼中的變數或文章的腳註，可以讓你的寫作過程更清爽。
參考連結由兩部分組成：
- 內文中的標記：
[顯示文字][標籤名] - 文件末尾的定義：
[標籤名]: 連結網址 "提示文字"
為什麼要用參考連結？
讓我們比較一下原始碼的差別：
❌ 使用「行內連結」（網址太長，閱讀原始碼很混亂）：
我最常用的搜尋引擎是 [Google](https://www.google.com/search?q=markdown+tutorial&oq=markdown+tutorial&sourceid=chrome&ie=UTF-8)，而在 GitHub 上可以找到很多 [Markdown 範例](https://github.com/showdownjs/showdown/wiki/Markdown's-syntax-for-beginners)。
✅ 使用「參考連結」（原始碼簡潔、易於閱讀）：
我最常用的搜尋引擎是 [Google][google]，而在 GitHub 上可以找到很多 [Markdown 範例][examples]。
... 文件的其他內容 ...
[google]: https://www.google.com/search?q=markdown+tutorial "Google 搜尋"
[examples]: https://github.com/showdownjs/showdown/wiki/Markdown's-syntax-for-beginners "GitHub 範例"
標籤名（如
google, examples）是不分大小寫的。通常我們會推崇將所有這些連結定義集中放在整份文件的最下方。圖片 (Images)
圖片的語法與連結非常相似，只需在前方多加一個驚嘆號 !。
基本圖片語法
- 語法：
 - 範例：
替代文字 (alt text) 的作用是：
- 當圖片無法載入時顯示的文字。
- 讓螢幕閱讀器讀給視障人士聽。
- 有助於 SEO 搜尋引擎優化。
帶有標題的圖片
同樣可以在網址後面加上括弧內的文字作為標題 (Caption)。
- 語法：
內部連結 (Internal Links)
如果你想連結到同一個網站的其他頁面，可以使用相對路徑。
- 連結到上一層：
[關於我們](../about.html) - 連結到本頁面的某個標題（錨點）：
[前往連結章節](#連結-links)
雖然 Markdown 本身不直接支援調整圖片大小，但你可以直接在 Markdown 中嵌入 HTML 的
<img> 標籤來達成：
<img src="image.jpg" width="200" />學會了連結與圖片，你的 Markdown 文件就變得更加生動且具備導向功能了！