Chapter 04 / 10

链接与图片

内联链接、引用链接、图片语法与徽章(Badge)的完整用法

内联链接

最常用的链接语法:文字在方括号中,URL 在圆括号中:

源码
[古法编程](https://gufacode.com)

[GitHub](https://github.com "GitHub 首页")
# 第三个参数是悬停提示(title)
渲染效果

相对路径链接

# 链接到同目录文件
[安装指南](./install.md)

# 链接到上级目录
[返回首页](../README.md)

# 链接到页面内锚点
[跳转到安装章节](#安装)

引用链接

当同一链接在文档中多次出现时,引用风格更易维护:

# 在文本中使用引用
[古法编程][gufacode] 是一个编程教程网站。
你可以在 [古法编程][gufacode] 找到更多教程。

# 在文档底部(任意位置)定义引用
[gufacode]: https://gufacode.com "古法编程"
TIP引用链接的定义可以放在文档的任意位置,通常集中放在文档末尾,类似参考文献列表。引用标识符不区分大小写。

自动链接

用尖括号可以让 URL 自动变成可点击的链接:

<https://gufacode.com>
<user@example.com>

GFM 还支持自动识别链接(不需要尖括号):

https://gufacode.com 会自动变成链接

图片

图片语法与链接非常相似,在前面加一个 !

![替代文字](图片URL)
![替代文字](图片URL "图片标题")
![替代文字](./images/photo.png)
INFO替代文字(alt text)在图片无法加载时显示,也被屏幕阅读器使用。请提供有意义的描述,而不是留空或写 "image"。

图片链接

将链接语法和图片语法嵌套,创建可点击的图片:

[![徽章图片](https://img.shields.io/badge/版本-1.0-blue)](https://example.com)

控制图片尺寸

原生 Markdown 不支持设置图片尺寸,需要使用 HTML:

<img src="image.png" alt="说明" width="300">
<img src="image.png" alt="说明" width="50%">

徽章(Badge)

GitHub README 常见的彩色小徽章,通过图片链接实现。常用服务:

服务用途示例
shields.io自定义徽章版本、许可证、构建状态
GitHub ActionsCI 状态徽章自动生成于工作流设置
codecov.io代码覆盖率显示测试覆盖百分比
img.shields.ionpm/PyPI 版本显示包版本号
# shields.io 自定义徽章格式
![标签-内容-颜色](https://img.shields.io/badge/标签-内容-颜色)

# 示例:许可证徽章
![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)

# GitHub Actions 构建状态
![CI](https://github.com/用户名/仓库名/workflows/CI/badge.svg)

链接最佳实践

1. 用有意义的链接文字

# ❌ 不好
更多信息请[点击这里](https://example.com)

# ✅ 好
查看[完整 API 文档](https://example.com)

2. 检查外部链接有效性

使用工具如 markdown-link-check 或 GitHub Action 定期检查断链:

npm install -g markdown-link-check
markdown-link-check README.md

3. 相对路径 vs 绝对路径

小结