1、markdown 简介

  • Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

  • Markdown 编写的文档后缀为 .md, .markdown

  • 简单易学容易上手,十分钟左右即可上手

  • 有助于作者专心写作(各种在线博客编辑坑太多,文档丢失、广告太多,可移植性差)

2、插入图片

我们在写博客的时候总免不了要插入各种图片,下面就是markdown插入图片的语法

![这里填写图片的描述信息](这里填写图片的路径,相对或决定路径都可以)

插入图片列子:

我们经常需要将一篇费劲心思写好的文章发布到各大平台<微信公众号、头条、掘金、今日头条。。。以上插入图片语法虽然简单,但是图片存放就成了一个问题。 图片存在本地的话,上传到各个网站就没法显示了,就算一个一个复制粘贴上去,移植到其他平台,如果平台没有自动保存图片功能,图片就会消失。这时候我们就需要一个图床。

什么是图床呢?

  • 图床就是一个便于在博客中插入在线图片的个人图片仓库。设置图床之后,我们可以随时将我们用到的图片上传到仓库,方便在博文中使用,预览。并且只要不亲自删除,就可以随时随地预览

下面介绍一个 PicGo + Gitee(码云)实现markdown图床 免费

PicGo + Gitee(码云)实现免费markdown图床

3、插入音频

3.1 使用audio 标签

语法

<audio id="audio" controls="" preload="none">
<source id="mp3" src="音频地址">
</audio>

3.2 使用iframe标签

下面我们以获取网易云音乐为例

  1. 首先在网易云音乐播放界面,点击生成外链播放器

  1. 选择自己想要的大小的iframe代码块

  1. 复制iframe代码块

    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1488737309&auto=1&height=66"></iframe>

加好之后效果如下

4、引入视频

我们小破站为例

1.找到我们想插入的视频,然后点击下面的分享

  1. 加入一个自适应iframe

    <iframe src="//player.bilibili.com/player.html?aid=59317437&bvid=BV1Pt411G7qh&cid=103365806&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

加好之后如下

g="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">


加好之后如下 <iframe src="//player.bilibili.com/player.html?aid=59317437&bvid=BV1Pt411G7qh&cid=103365806&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

markdown插入图片、音频视频的更多相关文章

  1. MarkDown插入图片

    MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...

  2. 【转】android如何浏览并选择图片 音频 视频

    转自:http://www.cnblogs.com/top5/archive/2012/03/06/2381986.html   这几天 在学习并开发android系统的图片浏览 音频 视频 的浏览 ...

  3. 关于Markdown插入图片路径错误的问题

    关于Markdown插入图片路径错误的问题 开发问题 解决方法  妈耶,连续一天写2篇博客,也是醉了,这篇博客主要是介绍关于Markdown插入图片路径错误的问题 在上篇中,我介绍了一下Markdow ...

  4. 【Tips】有道云笔记中Markdown插入图片

    在有道云笔记中用MarkDown插入图片 新建一个文档专门用来放图片 把所有要用的图片专门放在一个笔记里,用普通模式先同步笔记,然后用分享笔记 会有一个链接,用浏览器打开这个分享的笔记就能找到所有的图 ...

  5. 优雅地在markdown插入图片

    markdown 中插入图片,好烦!!!   喜欢用Markdown写文字,但是它的图片引用是一个大问题(当然csdn不会遇到这个问题).借用第三方将图片储存在印象笔记上是一个好办法.但是会出现的一个 ...

  6. 在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频)

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...

  7. Markdown 插入图片技巧

    在使用Markdown编写博客或文件的时候,经常会需要插入图片.如果使用Markdown语法,我们会发现调整图片的大小会是个问题. 所以推荐使用另一种办法插入图片,使用HTML语法,示例如下: < ...

  8. markdown 插入图片太大?怎么设定图片大小?

    你一定在插入图片的时候,遇到图片太大,影响观感的问题. Markdown中,图片大小的设定方式有两种 第一种: ![](https://img2018.cnblogs.com/blog/1735896 ...

  9. 有道云笔记MarkDown 插入图片

    前言: 在网上找了很多有道云笔记的markdown笔记如何插入本地图片,试了好几种方式都是一时可以显示而已,只要电脑重启或者换终端查看就无法显示图片了.网上常用的方法无非两种有效:github.博客. ...

  10. day10 多媒体(文字 图片 音频 视频)

    1计算机表示图形的几种方式     bmp:以高质量保存     用于计算机     jpg:以良好的质量保存    用于计算机或者网络     png:以高质量保存     图片大小的计算公式:图片 ...

随机推荐

  1. 不同页面的 body设置

    由于SPA页面的特性,传统的设置 body 背景色的方法并不通用. 解决方案:利用组件内的路由实现 第一种方式 // 实例创建之前 beforeCreate(){ document.querySele ...

  2. 【BUUCTF]ACTF2020 新生赛Exec1write up

    根据题目分析,俺们要用ping命令! 打开靶机,输入127.0.0.1尝试提交,直接出现无过滤: 尝试管道符执行命令,常见管道符: 1.|(就是按位或),直接执行|后面的语句 2.||(就是逻辑或), ...

  3. 解决手机浏览器上input 输入框导致页面放大的问题

    加入以下代码在head 区,可解决此问题 <meta name="viewport" content="width=device-width, initial-sc ...

  4. VMware虚拟机迁移至Xen

    1.VMware虚拟机导出OVF文件. 2.从Citrix Xencenter导入OVf文件 3.导入时,检查Local storage disk 下disk是否正确,如果曾导入失败,重复导入会产生多 ...

  5. Linux高并发服务器之Linux多线程开发

    本文源自C++高薪面试项目的学习笔记,主要记录Liunx多线程的学习,主要知识点是线程概述等基础概念以外,还有线程相关Liunx系统函数以及对应练手代码,除此之外还有线程同步问题的讲解以及实战多线程买 ...

  6. 痞子衡嵌入式:MCUXpresso IDE下生成镜像文件的方法及其与IAR,MDK差异

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是MCUXpresso IDE下生成镜像文件的方法及其与IAR,MDK差异. 痞子衡很久以前写过一篇文章 <ARM Cortex-M ...

  7. RPA主流厂商有哪些?

    RPA(机器人流程自动化(Robotic Process Automation)是一种能够自动化基于规则.结构化和重复的业务流程的技术.机器人流程自动化降低了成本,同时防止了人为错误,该技术目前已应用 ...

  8. D3和X6

    D3 版本 d3已经更新到v7版本,中文文档只更新到v4版本,存在部分api不适用和过时问题 使用d3-darge插件布局,插件适配d3版本为v5,近年未更新 API 使用darge中setNode和 ...

  9. Jmeter——性能测试的认知以及思考bug(一)

    前言 性能测试是一个全栈工程师/架构师必会的技能之一,只有学会性能测试,才能根据得到的测试报告进行分析,找到系统性能的瓶颈所在,而这也是优化架构设计中重要的依据. 测试流程: 需求分析→环境搭建→测试 ...

  10. redo log的用处

    redo log用途 1. 用途 保证数据的更新操作不丢失,同时保证了性能 2. 如何没有redo log,如何保证数据库的更新操作不会由于数据库的宕机而丢失? 对数据库进行修改,应该是先从磁盘读取数 ...