写博客一般都会使用markdown进行编辑，除了排版等基本的markdown语法，在markdown中插入图片音视频也是必不可少的技能。 因为演示用的链接可能会失效，以防万一，贴出链接以便检测链接是否失效：
动态图片链接

静态图片链接

一. 图片

动图

<iframe height=500 width=500 src="gif地址"></iframe>

静态图

![text](图片链接 "optional title")

需要说明的是一般情况是不会显示text的，我的博客上会显示text(即"静态图”)的原因是LeaveIt的博客主题的设置。

<img src="图片链接" height="50" width="50" align=right alt="图片名称">
使用这种语法，对图片有更多可选的操作，其中alt是图片链接失效的时候会显示的文字;align是对齐方式，默认是center。

在src="“的引号内可以插入svg，这样就不用担心图片链接失效的问题了。具体方式是将图片转化成svg,将data:image/png;base64,iVBOR…这一串代码写入图片链接的位置。
p.s.在线jpg,png图片转SVG工具

二. 视频

<iframe height=500 width=510 src="视频地址" allowfullscreen></iframe>"
以b站为例
Step 1. 通过b站分享功能获取视频链接(部分视频由于版权原因是不能获取视频链接的)
Step 2. 将视频地址插入上面的代码的src中

Step 3. 感觉外观不好看，而且不能最大化。进行外观优化: `` # 三. 音频

有外链的音乐：

<iframe frameborder="no" width="100%" height="86" src="音频链接"></iframe>

需要说明的是**音频链接**怎么获取，以网易云音乐为例(不得不说网易云提供的接口还是很好用的)： ### 最直接的方式： 进入下面的链接，直接复制粘贴给的代码，其他歌同理。 music.163.com/#/outchain/2/1374051000/m/use

另一个方法：

Step 1. 安装好PC端网易云音乐(手机版也可以),找到分享按钮，点击复制链接。
此时会得到像这样的链接：
http://music.163.com/m/song?id=1374051000&userid=xxxxxxxxx
如果是手机版，分享的链接是像这样：
http://music.163.com/song/1374051000/userid=xxxxxxxxx.)
Step 2. 将id取出来(在上面的例子里,id是1374051000,注意不是userid),替换下面链接的id, 这样就得到了音频链接:
//music.163.com/outchain/player?type=2&id=1374051000&auto=1&height=66

关于音乐自动播放：在音频链接中,把auto=1改成auto=0，跳转到带有音频的页面，音频就不会自动播放了。

自己的音频

如果你想用自己的音频，可以试试下面链接中介绍的方法：
姑苏流白·用CSS和JS实现的简易的音乐播放器

总结

以上实现主要都是使用HTML的iframe标签。
部分功能实现是依靠外链的，像网易云、b站、qq音乐等平台一般都会在分享按钮提供外链地址，可能没有涵盖到没有外链的应用场景，欢迎评论区补充。