Markdown 链接与图片
文档不能孤立存在——它需要链接到其他页面、嵌入图片、跳到内部章节。Markdown 的链接和图片语法非常相似，掌握一个就基本掌握另一个。这一章把所有相关语法一次讲完。
1. 行内链接（Inline Link）
最常用的写法：中括号写文字，紧接小括号写 URL：
[链接文字](https://example.com)
带 title（鼠标悬停显示）：
[链接文字](https://example.com "示例网站")
相对路径（同站点跳转）：
[关于我](/about/)
带锚点：
[跳到第二节](#第二节)
title 属性是可选的，鼠标悬停时显示为提示，对 SEO 和无障碍也有帮助。
2. 引用式链接（Reference Link）
当一个链接在长文档里反复出现时，引用式更清爽——正文里只放标识，URL 集中存放在文档底部：
行内式直接写：
[Google](https://google.com)
引用式分两步（适合长文档多次引用同一链接）：
正文里：[Google][g] 或者 [Google][1]
文档底部统一存放：
[g]: https://google.com
[1]: https://example.com "title 可选"
3. 快捷引用式
更简化的写法：标识就是链接文字本身，省去第二个中括号：
快捷引用式（中括号里就是标识）：
正文里：[Google]
底部：[Google]: https://google.com
（适合博客里频繁提及的站点）
这种写法在 Wikipedia 风格的长文里非常实用。
4. 自动链接（Autolink）
URL 或邮箱用尖括号包裹，会自动转为可点击链接：
<https://example.com> 自动转为可点击链接
<someone@example.com> 自动转为邮箱链接（带 mailto:）
5. 图片（Image）
图片语法就是链接语法前面加一个感叹号：
带 title（图注 / 悬停提示）：
网络图片：
注意：感叹号 ! 必须紧贴中括号，不能有空格。
关键点：
- 感叹号紧贴中括号，中间不能有空格。
- 中括号里写"替代文字"（alt）——这是无障碍和 SEO 的关键，图片加载失败时也会显示这段文字。
- 小括号里写图片路径——可以是本地相对路径、绝对路径、或网络 URL。
6. 图片做链接（Image as Link）
点击图片跳转——把图片语法整体放进链接的中括号里即可：
[](https://example.com)
图片外面套一层链接：
- 内层是图片语法
- 外层是链接语法
点击图片就跳转到指定地址。
常用于：徽章、Logo 跳主页、截图跳大图。
这种写法常用于：徽章（如 build passing 跳到 CI）、Logo 跳到主页、截图跳到大图。
7. 锚点跳转（Anchor）
站内跳转用 # + 锚点 ID。GitHub 自动为每个标题生成锚点：
[跳到安装](#安装)
锚点规则（GitHub）：
- 标题文字转小写
- 空格替换为连字符
- 移除标点
- 中文保留
例如标题 "## 1. 安装步骤"
对应锚点 "#1-安装步骤"
手动锚点需要写 HTML 的 <a name="..."> 或 <span id="...">，但通常直接用标题即可。
8. 最佳实践
✅ 推荐：URL 中带空格用 %20 编码
[文档](/my%20doc/)
✅ 推荐：长链接用引用式
正文更清爽，链接集中管理。
✅ 推荐：图片一定写替代文字
- 无障碍（屏幕阅读器）
- 图片加载失败时有占位文字
- SEO 加分
❌ 避免：链接文字写"点击这里"
（无障碍工具会读出"点击这里"，无意义）
9. 常见坑
- URL 含空格：渲染时被截断。必须用
%20编码。 - 感叹号后有空格：
! [alt](url)不渲染为图片，而是字面文本。 - 替代文字留空：
渲染没问题，但无障碍工具读不出，SEO 也减分。 - 外链没加 https：
//example.com协议相对，可能跨域。建议始终写完整协议。 - 图片用绝对路径但发布到子目录：本地能看，上线后 404。推荐用相对路径。
10. 实战：写一个项目徽章
开源项目 README 顶部常见的 build passing、license、downloads 徽章，本质就是图片 + 链接：
- 内层图片指向徽章服务（如 shields.io）。
- 外层链接指向 CI 服务（如 GitHub Actions）。
- 替代文字写"build status"，无障碍友好。
这种"图片套链接"是 Markdown 的经典模式，必须熟练。
小结
链接和图片让文档从"独白"变成"对话"——能引用、能跳转、能插图。下一篇讲代码，让文档里出现漂亮的语法高亮。
← 上一篇 列表
下一篇 代码 →