第 5 章链接、图片与脚注

本章覆盖：

语法	形式	范围
行内链接	`[text](url)`	CommonMark
带标题的链接	`[text](url "title")`	CommonMark
引用式链接	`[text][ref]` + `[ref]: url`	CommonMark
简短引用式	`[ref]`	CommonMark
自动链接	`<https://...>`	CommonMark
GFM 自动链接	`https://...`	GFM
图片	`![alt](url)`	CommonMark
带标题图片	`![alt](url "title")`	CommonMark
脚注	`[^id]` + `[^id]: text`	多数方言

5.1 行内链接

源码：

访问 [CommonMark](https://commonmark.org/) 了解详情。

渲染效果：句中"CommonMark"为超链接，指向 commonmark.org。

5.2 带标题的链接

源码：

访问 [CommonMark](https://commonmark.org/ "Markdown 规范官网") 了解详情。

渲染效果：鼠标悬停显示"Markdown 规范官网"提示。

5.3 引用式链接

引用式适合多次复用同一 URL：

源码：

访问 [CommonMark][1] 与 [GFM][gfm] 了解规范。

[1]: https://commonmark.org/
[gfm]: https://github.github.com/gfm/

渲染效果：句中两处文字分别链接到对应规范。

引用定义可放在文末，便于阅读与维护。

5.4 简短引用式

链接文本与引用标识相同时可省略：

源码：

访问 [commonmark.org] 了解规范。

[commonmark.org]: https://commonmark.org/

渲染效果：“commonmark.org"为链接。

5.5 自动链接

5.5.1 CommonMark 自动链接（须尖括号）

源码：

访问 <https://commonmark.org/>。

渲染效果：URL 自动转为可点击链接。

5.5.2 GFM 自动链接（无需尖括号）

源码：

访问 https://commonmark.org/ 了解规范。

渲染效果（GFM）：URL 自动转为链接。

5.6 邮箱自动链接

源码：

联系 <mailto:[email protected]> 或直接 [email protected]。

渲染效果：邮箱转为 mailto: 链接（尖括号写法 CommonMark 支持；裸邮箱仅 GFM 等方言支持）。

5.7 图片

源码：

![替代文本](https://commonmark.org/images/markdown.png "CommonMark Logo")

渲染效果：插入一张图片，alt 为"替代文本”，悬停显示"CommonMark Logo"。

替代文本（alt）在图片加载失败或屏幕阅读器时显示，应描述图片内容而非 SEO 关键字。

5.8 带链接的图片

将图片语法包在链接语法内：

源码：

[![CommonMark Logo](https://commonmark.org/images/markdown.png)](https://commonmark.org/)

渲染效果：图片本身可点击跳转。

5.9 脚注（部分方言）

源码：

Markdown 由 John Gruber 发布[^1]，Aaron Swartz 协助设计[^2]。

[^1]: 参见 Daring Fireball 官网。
[^2]: 参见 Aaron Swartz 相关资料。

渲染效果：正文中两处上标数字，文末自动生成脚注列表。

注：Hugo、GFM、Markdown Extra、Pandoc 支持脚注；CommonMark 核心规范未含脚注。

5.10 综合实例

源码：

## 资源汇总

- 官方规范：[CommonMark](https://commonmark.org/)
- GitHub 扩展：[GFM](https://github.github.com/gfm/ "GitHub Flavored Markdown Spec")
- 引用式：[Markdown Guide][mdguide]
- 自动链接：<https://daringfireball.net/projects/markdown/>

[mdguide]: https://www.markdownguide.org/

![Markdown Logo](https://commonmark.org/images/markdown.png "CommonMark")

[^intro]: 参见 [Daring Fireball](https://daringfireball.net/)。

[^intro]: 参见 [Daring Fireball](https://daringfireball.net/)。

渲染效果：标题、四条链接、一张带悬停标题的图片、一个脚注。

5.11 小结

行内链接 [文本](url)，可选 "标题"
引用式链接便于复用，定义放文末
自动链接 CommonMark 须 < >，GFM 可裸 URL
图片 ![alt](url)，可包链接
脚注 [^id] + [^id]: 文本，部分方言支持

第 5 章 链接、图片与脚注