domain: markdown

第 04 节：链接与图片

本节 objectives:

• 能用 [显示文字](网址) 写出可点击的链接。
• 能用 ![替代文字](图片地址) 插入一张图片，并说清它和链接语法只差一个符号。
• 能看懂并写出带标题提示（hover 文字）的链接。

先修：会写列表（第 03 节） ｜ 上一节 << 03 列表 ｜ 下一节 05 代码、引用与分割线 >>

一个感叹号，决定文字是"可以点"还是"变成图"

上一节你学会了把信息整理成清单。但一份好的笔记或文档，往往还需要"跳出去"——指向一篇参考文章、一个官网，或者直接嵌入一张截图。Markdown 里，"写一段可点击的文字"和"嵌入一张图片"的语法几乎一模一样，唯一的区别只是开头有没有一个感叹号 !。这一节会让你彻底记住这个区别，不再写反。

讲解

链接（Link）：写成方括号包住"显示文字"，紧跟着圆括号包住"网址"，中间不能有空格¹：

渲染后，读者看到的是"点击查看 Markdown 官方指南"这几个字，点击后会跳转到括号里的网址；网址本身不会直接显示出来。

带提示文字的链接：如果想让读者鼠标悬停在链接上时看到一句额外说明，可以在网址后面加一个空格，再用英文引号包住提示文字¹：

图片（Image）：语法和链接几乎一样，只是前面多了一个感叹号 !，方括号里写的不是"显示文字"，而是"替代文字"（图片加载不出来时显示的备用说明，也方便屏幕阅读器给视障用户朗读）¹：

渲染后，这里会直接显示出图片本身，而不是一段可点击的文字。记住这个对比：[文字](地址) 是"点了才跳转"，![文字](地址) 是"直接显示出来"——那个感叹号就是唯一的区别。

给图片加链接：如果想让一张图片本身也可以点击跳转，把图片语法整个包进链接语法的方括号里：

这行看起来符号有点密集，但拆开看就是：外层是链接 [...](跳转地址)，方括号里塞的不是普通文字，而是一整个图片语法 ![...](图片地址)。

跟我做一遍(worked example)

在编辑器里敲下面这段（图片地址用的是一张公开的示例图片）：

观察要点：前两项是可点击的蓝色文字（链接），点击会跳到对应网址；鼠标悬停在第一个链接上时会弹出"免费的语法参考网站"这句提示；最后一行直接显示出一张图片，而不是文字。

换你补全(faded example)

下面这段笔记想表达："推荐一个链接，再嵌入一张图片"，但符号还没写全：

提示：链接部分需要哪两种括号，图片部分和链接比多了什么符号。

答案：

（链接是方括号包文字、圆括号包地址；图片在方括号前多一个感叹号 !，其余写法和链接一致。）

小结 + 通向下一节

这一节你学会了链接和图片语法，记住了那个决定性的感叹号。到目前为止你已经能写标题、强调、列表、链接和图片——这些覆盖了日常笔记的大部分需求。下一节你会学怎么展示一段代码或命令而不被当成普通文字解析、怎么引用别人的话，以及怎么用一条横线分隔内容区块。