跳到主要内容

链接与图片

链接和图片是 Markdown 文档中重要的交互元素。本章详细介绍各种链接和图片的使用方法。

链接​

链接让读者可以跳转到其他页面或网站，是文档交互性的核心。

基本语法​

链接的基本语法是 [链接文字](链接地址)：

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

渲染效果：访问 GitHub

链接标题​

可以在链接地址后添加标题，鼠标悬停时显示：

[访问 GitHub](https://github.com "GitHub 官方网站")

渲染效果：鼠标悬停在链接上可以看到提示文字。

引用式链接​

当链接较长或需要多次引用时，可以使用引用式链接，将链接定义放在文档末尾：

这是一个 [引用链接][ref]。

[ref]: https://github.com "GitHub 官方网站"

引用定义的完整格式：

[链接文字][引用标识]

[引用标识]: 链接地址 "可选标题"

引用标识不区分大小写，以下写法等效：

[链接][GitHub]
[链接][github]
[链接][GITHUB]

[GitHub]: https://github.com

简写语法​

如果链接文字本身可以作为引用标识，可以省略第二对方括号：

[GitHub][]

[GitHub]: https://github.com

自动链接​

URL 和邮箱地址可以用尖括号包围，自动转换为可点击的链接：

<https://github.com>
<[email protected]>

渲染效果会显示一个可点击的链接：https://github.com

GFM 扩展支持无需尖括号的自动链接：

https://github.com

图片​

图片语法与链接类似，只需在前面添加感叹号 !。

基本语法​

![替代文字](图片地址)

替代文字在图片无法显示时展示，也有助于无障碍访问。

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

图片标题​

与链接一样，图片也可以添加标题：

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

引用式图片​

图片同样支持引用式语法：

![Markdown Logo][logo]

[logo]: https://markdown-here.com/img/icon256.png "Markdown 标志"

图片尺寸​

标准 Markdown 不支持设置图片尺寸，但可以通过 HTML 实现：

<img src="https://markdown-here.com/img/icon256.png" alt="Markdown Logo" width="100">

部分 Markdown 渲染器支持扩展语法：

![图片](image.png =100x50)
![图片](image.png =100x)

图片链接​

将图片包裹在链接中，实现点击图片跳转：

[![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)](https://github.com)

相对路径​

在项目文档中，推荐使用相对路径引用本地资源。

相对路径示例​

假设项目结构如下：

project/
├── README.md
├── docs/
│   ├── guide.md
│   └── images/
│       └── screenshot.png
└── assets/
    └── logo.png

在 README.md 中引用资源：

![Logo](assets/logo.png)
[指南文档](docs/guide.md)

在 docs/guide.md 中引用资源：

![截图](images/screenshot.png)
![Logo](../assets/logo.png)

相对路径的优点​

  • 文档可在本地离线查看
  • 项目迁移后链接仍然有效
  • 便于版本控制管理

锚点链接​

锚点链接用于跳转到同一页面的特定位置。

标题锚点​

Markdown 会自动为标题生成锚点 ID。锚点规则：

  • 转换为小写
  • 空格替换为连字符
  • 移除特殊字符
## 用户指南

跳转到 [用户指南](#用户指南)

英文标题示例：

## Getting Started

跳转到 [Getting Started](#getting-started)

自定义锚点​

可以使用 HTML 锚点标签创建自定义锚点：

<a name="custom-anchor"></a>

### 某个章节

跳转到 [自定义锚点](#custom-anchor)

邮件链接​

创建邮件链接使用 mailto: 协议：

[联系我们](mailto:[email protected])

可以预设邮件主题和正文：

[发送邮件](mailto:[email protected]?subject=帮助&body=请描述您的问题)

最佳实践​

链接文字​

链接文字应该具有描述性，避免使用"点击这里"：

错误：点击 [这里](https://github.com) 查看。
正确：查看 [GitHub 官方网站](https://github.com) 了解更多。

图片替代文字​

替代文字应该准确描述图片内容：

错误：![图片](screenshot.png)
正确：![用户登录界面截图](screenshot.png)

链接管理​

对于长文档或需要多次引用的链接：

  • 使用引用式链接
  • 将链接定义放在文档末尾
  • 使用有意义的引用标识

链接检查​

定期检查链接是否有效：

  • 使用链接检查工具
  • 更新失效的链接
  • 考虑使用相对路径引用内部资源

小结​

本章学习了链接和图片的使用方法：

  1. 行内链接：[文字](地址)
  2. 引用式链接：分离定义，便于管理
  3. 自动链接：URL 自动转换
  4. 图片语法：与链接类似，添加 ! 前缀
  5. 相对路径：项目文档推荐使用
  6. 锚点链接：页内跳转

练习​

  1. 创建一个包含多个外部链接的文档
  2. 使用引用式链接管理所有链接
  3. 插入一张图片并添加替代文字
  4. 创建一个点击图片跳转的链接