今天简简单单水一篇文章, 教大家如何用 Markdown实现图片超链接 (太水了)

  • 了解图片和链接的使用

首先要了解如何在 Markdown 中显示图片和链接 –这是基础

链接的插入

1
[链接](https://blog.333375.xyz/img/mdimghref/1.webp)

图片的插入

1
![img](https://blog.333375.xyz/img/mdimghref/1.webp)

从上面可以看出来, 图片和链接之间使用的差别很小只需一个 ! 就可以区别它们, 但是记住要使用英文状态的 !

而其中用中括号 [] 包着的文字就是描述, 这个东西在链接状态就会显示出来比如这样 链接 这个就是上面代码块里的链接

如果是图片状态就不会直接显示描述, 而是会直接显示图片, 例如

img

你甚至可以不用填写描述, 但是当图片显示错误的时候就会显示这个描述, 建议还是写上

至于小括号的内容就必须是链接了, 而且显示图片的链接必须是纯图片链接, 就是后面必须加上 .jpg .png .webp 等后缀 (但是有些图床的图片没有后缀, 这个要靠自己辨别)

  • 了解图片超链接的逻辑

这是 HTML 中的图片超链接

1
2
3
<a href="/">
<img src="https://blog.333375.xyz/img/mdimghref/1.webp" alt="img">
</a>

我大概讲解一下, 这个 <a href=""></a> 就相当于Markdown中的链接, [](), 这个href后的””里面就是链接, 而><中间要添加描述, <img src="" alt="">, src后面添加图片链接, alt后面添加描述, 就大概是这样

而从这个HTML代码可以看出, 是把图片添加到了链接的描述中, 这样就可以实现图片超链接

  • 正确使用

那么好了, 现在开始使用吧

1
[![img](https://blog.333375.xyz/img/mdimghref/1.webp)](https://blog.333375.xyz)

效果

img