05 链接与图片¶

基本链接¶

[显示的文字](https://example.com)

效果：显示的文字

方括号 [] 里是别人看到的文字
圆括号 () 里是真实地址
两边都不能有多余空格

三种链接写法¶

写法	语法	适合场景
行内式	`[文字](地址)`	最常用，一目了然
引用式	`[文字][1]` + 文末 `[1]: 地址`	同一地址用很多次，正文更干净
自动链接	`<https://example.com>`	尖括号包住裸地址，防止被当普通文字

引用式完整例子：

本站用 [MkDocs][mk] 搭建，语法是 [GFM][gfm]。

[mk]: https://www.mkdocs.org/
[gfm]: https://github.github.com/gfm/

链接带标题（鼠标悬停显示）¶

[落英文档站](https://docx.ffsmcserver.top/ "FFGS 文档总站")

效果：落英文档站（鼠标放上去能看到提示文字）

站内链接（相对路径）¶

写文档时经常要跳到同目录的别的页面：

[看下一章](06-quotes-code.md)
[回首页](index.md)
[上级目录](../README.md)
```

> 💡 在 MkDocs 这类静态站点里，`.md` 的相对链接会在构建时自动转成对应网页链接；在 GitHub 上点也能直接跳转。**建议统一用相对路径**，换域名也不怕。

## 锚点链接（跳到页面内某处）

````text
[跳到本章末尾](#常见坑)

规则：标题里的空格变 -，英文小写，中文保持原样。

标题	锚点
`## 常见坑`	`#常见坑`
`## 基础语法`	`#基础语法`
`## Getting Started`	`#getting-started`

图片¶

语法比链接多一个感叹号 !：

![图片说明](图片地址.png)

方括号里是 alt 文本（图片加载失败时显示，也对无障碍/SEO 有用）
地址可以是网络 URL，也可以是相对路径

例：

![服务器首页截图](assets/images/homepage.png)
![Logo](https://ffsmcserver.top/assets/logo.png)
```

## 让图片成为「可点击的链接」

把图片语法放进链接的方括号里：

````text
[![点击看原图](缩略图.png)](原图.png)

控制图片大小（原生不支持，靠 HTML）¶

Markdown 本身没有设置宽高的语法，用 HTML 代替：

<img src="banner.png" alt="宣传图" width="600">

💡 MkDocs Material 里也可以用属性写法（需要 attr_list 扩展）： ![说明](banner.png){ width="600" }

图片路径怎么选¶

场景	建议
文档站	放 `docs/assets/images/`，用相对路径 `assets/images/x.png`
GitHub README	放仓库内 `images/` 目录，相对路径即可
临时/外链	用图床 URL（注意别用会过期的临时链接）
本地笔记	用笔记软件自己的附件目录（Obsidian 会自动管理）

常见坑¶

现象	原因	解决
图片不显示，只显示文字	少了 `!`	图片是 `![说明](地址)`
链接点了没反应	地址里有空格	空格写成 `%20`，或改成引用式
中文文件名图片挂了	编码问题	图片文件名用英文（推荐）
括号地址被截断	地址里本身有括号	把地址用 `<>` 包起来：`[文字](<a(b).com>)`
图片太大撑爆页面	没限制宽度	用 HTML `width`

本章练习¶

写一个指向 https://docx.ffsmcserver.top/ 的链接，显示文字为「文档总站」。
插一张图片，alt 文本写「测试图」。
做一个「点击缩略图打开大图」的链接。

下一章：引用与代码——技术文档的核心。