第7章：链接与图片

7.1 链接排版

基础链接

链接用于跳转到其他页面或资源，在Markdown中，使用 [链接文本](链接地址) 语法。

语法：

[链接文本](链接地址)

示例：

[Markdown官网](https://daringfireball.net/projects/markdown/)

跳转本地文档

链接也可以用于跳转到本地的Markdown文档，使用相对路径或绝对路径。

语法：

[链接文本](本地文档路径)

示例：

[第一章](part1/introduction.md)
[图片资源](../assets/images/)

链接标题

你可以为链接添加标题，当鼠标悬停在链接上时会显示这个标题。

语法：

[链接文本](链接地址 "链接标题")

示例：

[Markdown官网](https://daringfireball.net/projects/markdown/ "Markdown官方网站")

适用场景

• 引用网页：在文档中引用外部网页资源
• 关联文档：在多个Markdown文档之间建立链接
• 导航跳转：在长文档中创建内部导航链接
• 资源引用：引用图片、视频等外部资源

7.2 图片排版

基础图片

图片用于在文档中插入图像，在Markdown中，使用 ![图片alt文本](图片地址) 语法。其中，alt文本是当图片无法加载时显示的替代文本。

语法：

![图片alt文本](图片地址)

示例：

![测试图片](https://via.placeholder.com/150)

本地图片

你可以插入本地存储的图片，使用相对路径或绝对路径。

语法：

![图片alt文本](本地图片路径)

示例：

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

网络图片

你可以直接使用网络图片的URL，这样图片会从网络上加载。

示例：

![Flutter Logo](https://flutter.dev/assets/flutter-lockup-4cb0ee072ab312e59784d9fbf4fb79c81676466d433101ec58d94e5685c2781f.svg)

图片大小调整

Markdown本身没有直接调整图片大小的语法，但你可以使用HTML标签来实现。

语法：

<img src="图片地址" alt="图片alt文本" width="宽度" height="高度">

示例：

<img src="https://via.placeholder.com/300" alt="测试图片" width="200" height="150">

实操案例：添加链接和图片

示例文档

# 我的Markdown文档

## 外部链接

- [Google](https://www.google.com/)
- [GitHub](https://github.com/)
- [Markdown Guide](https://www.markdownguide.org/ "Markdown官方指南")

## 本地链接

- [第一章](part1/introduction.md)
- [图片资源](../assets/images/)

## 图片展示

### 网络图片

![Flutter Logo](https://flutter.dev/assets/flutter-lockup-4cb0ee072ab312e59784d9fbf4fb79c81676466d433101ec58d94e5685c2781f.svg)

![测试图片](https://via.placeholder.com/300)

### 调整大小的图片

<img src="https://via.placeholder.com/400" alt="调整大小的图片" width="200" height="150">

## 图片与链接结合

你可以将图片作为链接，点击图片跳转到指定地址。

[![Flutter Logo](https://flutter.dev/assets/flutter-lockup-4cb0ee072ab312e59784d9fbf4fb79c81676466d433101ec58d94e5685c2781f.svg)](https://flutter.dev/)

效果预览

通过上面的操作，你应该可以看到一个包含链接和图片的Markdown文档，链接可以正常跳转，图片可以正常显示。

新手易错点

链接地址错误

• 错误：链接地址拼写错误
• 错误：链接地址缺少协议（如 https://）
• 错误：本地链接路径错误，导致无法找到目标文档

图片地址错误

• 错误：网络图片链接不可访问
• 错误：本地图片路径错误，导致图片无法显示
• 错误：图片格式不支持或文件损坏

Alt文本遗漏

• 错误：没有添加图片的alt文本，影响可访问性
• 错误：alt文本描述不清晰，无法准确表达图片内容

本地路径错误

• 错误：使用了错误的相对路径
• 错误：混用了正斜杠和反斜杠（在Windows系统中）

正确示例：

• 相对路径：![图片](images/logo.png)
• 绝对路径：![图片](/full/path/to/image.png)

链接格式错误

• 错误：[链接文本](链接地址) 中间没有空格
• 错误：链接地址没有用括号包裹

正确示例：

[正确链接](https://example.com/)

练习建议

• 尝试添加不同类型的链接（外部链接、本地链接）
• 练习为链接添加标题
• 尝试插入不同来源的图片（网络图片、本地图片）
• 练习调整图片大小
• 尝试将图片作为链接使用

通过练习，你应该能够熟练掌握Markdown链接和图片的使用方法，创建内容丰富、图文并茂的文档。