第 4 章：链接与图片

超链接是互联网的基石，图片让文档不再枯燥。本章学习 Markdown 中链接与图片的多种插入方式。

---

学习目标

• 掌握三种链接写法：行内式、参考式、自动链接
• 理解相对路径与绝对路径的使用场景
• 熟练插入图片并控制其显示效果
• 了解图片和链接的进阶技巧

---

4.1 行内链接

最常用的链接写法，语法格式：

[显示文本](URL "可选标题")

示例：

[GitHub](https://github.com)

[百度一下](https://www.baidu.com "这是鼠标悬停时显示的标题")

渲染：GitHub、百度一下

语法拆解

部分	含义	是否必须
[ ]	链接显示的文字	✅ 必须
(URL)	链接的目标地址	✅ 必须
"标题"	鼠标悬停时的提示文字	❌ 可选

链接内包含格式

链接文字本身也可以带格式：

这是一个[**粗体链接**](https://example.com)

这是一个[*斜体链接*](https://example.com)

这是一个[`代码链接`](https://example.com)

渲染：这是一个粗体链接、这是一个斜体链接、这是一个代码链接。

---

4.2 参考式链接

当文档中出现大量链接时，行内链接会让源码变得杂乱。参考式链接把 URL 「提取」到别处定义：

这是一个指向[GitHub][1]的链接，以及另一个指向[百度][baidu]的链接。

[1]: https://github.com
[baidu]: https://www.baidu.com

渲染：这是一个指向GitHub的链接，以及另一个指向百度的链接。

参考式 vs 行内式

方式	适用场景	示例
行内式	链接少、URL 短	[文字](https://...)
参考式	链接多、重复引用	[文字][id] + [id]: url

行内式（源码杂乱）：
这个[项目](https://github.com/user/project)使用了[React](https://react.dev)框架，
部署在[Vercel](https://vercel.com)上。

参考式（源码干净）：
这个[项目][repo]使用了[React][react]框架，部署在[Vercel][vercel]上。

[repo]: https://github.com/user/project
[react]: https://react.dev
[vercel]: https://vercel.com

隐式参考链接

当链接文本和定义的 ID 相同时，可以省略第二组方括号：

这是我的 [GitHub][] 主页。

[GitHub]: https://github.com

---

4.3 自动链接

用 <> 包裹 URL 或邮箱，自动转为可点击的链接：

访问 <https://www.example.com> 了解更多。

联系邮箱：<hello@example.com>

渲染：访问 https://www.example.com 了解更多。联系邮箱：hello@example.com。

---

4.4 路径选择

相对路径（推荐）

引用同仓库内的文件时，使用相对路径：

[下一章](03-lists.md)
[示例文件](../examples/syntax/basic-syntax-demo.md)
![图片](../images/diagrams/link-syntax.svg)

绝对路径

指向外部资源时使用完整 URL：

[GitHub](https://github.com)
![外链图片](https://example.com/photo.png)

路径选择原则

场景	使用	原因
同仓库文件	相对路径	换仓库/分支仍可用，离线可查看
外部资源	绝对 URL	唯一引用方式
GitHub 上的图片	相对路径	clone 后在本地也可见

---

4.5 图片

基本语法

与链接类似，前面加一个 !：

![替代文本](图片URL "可选标题")

示例：

![Markdown 图标](https://markdown-here.com/img/icon256.png)

替代文本的重要性

[ ] 中的内容叫「替代文本」（Alt Text），在以下场景显示：

• 图片加载失败时
• 使用屏幕阅读器（无障碍访问）时
• 纯文本环境查看源码时

❌ 差：![](https://example.com/chart.png)       ← 没有替代文本
✅ 好：![2024年Q4营收增长图表](https://example.com/chart.png)

图片尺寸控制（HTML 方式）

标准 Markdown 不支持设置图片尺寸，但可以用 HTML：

<img src="https://example.com/photo.png" width="300" alt="描述文字">

<!-- 或用百分比 -->
<img src="https://example.com/photo.png" width="50%" alt="描述文字">

<!-- 也可用 style 属性 -->
<img src="https://example.com/photo.png" style="width:300px" alt="描述文字">

图片对齐

<!-- 居中 -->
<p align="center">
  <img src="https://example.com/photo.png" width="300" alt="居中图片">
</p>

<!-- 右对齐 -->
<p align="right">
  <img src="https://example.com/photo.png" width="200" alt="右对齐图片">
</p>

💡 部分编辑器（如 Typora）支持 ![描述|300](url) 语法设置尺寸，但这不是通用标准，GitHub 上不生效。要兼容 GitHub，使用 HTML <img> 标签。

图片作为链接

让图片可点击：

[![替代文本](图片URL)](链接URL)

示例：

[![GitHub Logo](https://github.githubassets.com/favicons/favicon.png)](https://github.com)

---

4.6 链接与图片的注意事项

使用相对路径（GitHub 仓库）

✅ 正确（GitHub 仓库内）：
![截图](../images/screenshot.png)

❌ 错误（使用本地绝对路径）：
![截图](C:/Users/Lenovo/Pictures/screenshot.png)

使用稳定的图片托管

GitHub 仓库中的图片建议直接放在仓库内，不要依赖外部图床（图床可能失效）。

避免裸链接

虽然没有语法错误，但在可读性上推荐：

❌ 不推荐：https://github.com/user/repo
✅ 推荐：[GitHub 仓库](https://github.com/user/repo)

---

4.7 语法速查

语法	写法	说明
行内链接	[文字](URL)	最常用
带标题链接	[文字](URL "标题")	鼠标悬停提示
参考式链接	[文字][id] + [id]: URL	链接多的文档
自动链接	<URL>	直接可点击
邮箱链接	<email@example.com>	自动转为 mailto
图片		! + 链接语法
图片链接	[](链接URL)	可点击的图片
图片居中	<p align="center"><img ...></p>	HTML 实现

---

本章小结

要点	说明
行内链接	[文字](URL)，最常用
参考式链接	适合链接密集的文档，源码更干净
图片语法	，别忘了替代文本
路径	仓库内用相对路径，外部用绝对 URL
图片尺寸	标准 Markdown 不支持，用 HTML <img>
图片托管	放在仓库内最稳定

---

下一章预告

链接和图片让文档「活」了起来。接下来学习如何在文档中引出重要内容——引用块，以及用分隔线组织章节。

👉 第 5 章：引用与分隔线