手把手教会你使用Markdown【从入门到精通一篇就够了】

<a href="#_4">前言</a> <a href="#Markdown_11">一、Markdown是什么</a> <a href="#Markdown_26">二、Markdown优点</a> <a href="#Markdown_37">三、Markdown的基本语法</a>

<a href="#31__38">3.1 标题</a>    <a href="#32__55">3.2 字体</a>    <a href="#33__70">3.3 换行</a>    <a href="#34__75">3.4 引用</a>    <a href="#35__96">3.5 链接</a>    <a href="#36__111">3.6 图片</a>    <a href="#37__124">3.7 列表</a>    <a href="#38__169">3.8 分割线</a>    <a href="#39__189">3.9 删除线</a>    <a href="#310__198">3.10 下划线</a>    <a href="#311__207">3.11 代码块</a>    <a href="#312__248">3.12 表格</a>    <a href="#313__270">3.13 脚注</a>    <a href="#314__285">3.14 特殊符号</a>      <a href="#Markdown_304">四、Markdown的高级用法</a>   

<a href="#41__305">4.1 个人看法</a>    <a href="#42__307">4.2 制作待办事项</a>    <a href="#43__324">4.3 书写公式</a>    <a href="#44__334">4.4 绘制流程图</a>    <a href="#45__350">4.5 绘制序列图</a>    <a href="#46__361">4.6 绘制甘特图</a>    <a href="#47_Html_386">4.7 Html</a>      <a href="#Markdown_431">五、Markdown工具</a>   <a href="#_437">六、总结</a>

<hr>

前言

大家好，我是卷不动的小白，如名我可能和大部分人一样是个什么都要学习的小白，当自己潜下心来要记笔记写博客的时候接触到了Markdown语法。Markdown 是一种轻量级标记语言，通俗的说你记笔记写博客的时候不用管排版如何，只要将自己的内容写上去，Markdown语法就可以给你搞定一切。

<hr>

一、Markdown是什么

在这里插入图片描述

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 Markdown 允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的HTML文档。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后缀为 .md, .markdown。我个人认为Markdown是现在现在是互联网上最流行的写作语言！！！许多网站平台的文章、博客、论文都是基于它写的！！！

例如：国外的GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等；国内的CSDN、简书、掘金、博客园、知乎等。

推荐一款 Markdown 编辑器Typora（下载链接我放到文末）。这款软件足够轻量级，同时功能做到了尽可能的简单。至于Web编辑器必然是最好的CSDN哈哈哈。

<hr>

二、Markdown优点

好多人看到Markdown的标签是【轻量级】【标记】【语言】就直接放弃，想着自己学习了非常多的语言，为了记个笔记写个博客还要再学习一门语言吗？实则不然，Markdown的语言非常非常简单，如果想学，10分钟你完全可以学完90%的常用的语法，而且你从此摆脱排版的折磨，属实是强迫症党的福利了。它的优点不仅限于此：

纯文本编辑，只要是支持Markdown编辑的都能获得同样的结果，摆脱排版苦恼学习成本低，常用的语法很少，简单易学快速上手支持跨平台同步数据支持插入图片、视频等随时修改，不必担心word等工具出现排版错误

废话不多说，进入干货阶段

<hr>

三、Markdown的基本语法

3.1 标题

使用#号标记，可以表示1-6级标题，随#的个数递增，一级标题字号最大，六级标题字号最小。代码如下：

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果如下：在这里插入图片描述

注意：

最后一个#字符与标题中间留一个空格标题应该置于行首，如果放入表格中可能无法正确解析

3.2 字体

星号与下划线都可以，单是斜体，双是粗体，三是粗斜体

<table> <thead> <tr> <th align="center">代码</th> <th align="center">效果</th> </tr> </thead> <tbody> <tr> <td align="center">这是斜体</td> <td align="center">这是斜体</td> </tr> <tr> <td align="center">这是斜体</td> <td align="center">这是斜体</td> </tr> <tr> <td align="center">这是粗体</td> <td align="center">这是粗体</td> </tr> <tr> <td align="center">这是粗体</td> <td align="center">这是粗体</td> </tr> <tr> <td align="center">这是粗斜体</td> <td align="center">这是粗斜体</td> </tr> <tr> <td align="center">这是粗斜体</td> <td align="center">这是粗斜体</td> </tr> </tbody> </table>nn >

快捷键：加粗Ctrl+B 斜体Ctrl+I

3.3 换行

Markdown换行的方式有很多种:

直接在一句话后敲两个空格两句话之间加一个空行如果你在编辑的时候，想让一行文字在显示的时候换行，就在中间加<br/>

3.4 引用

Markdown 中引用通过符号 > 来实现。> 符号后的空格，可有可无。在引用的区块内，允许换行存在，换行并不会终止引用的区块。如果要结束引用，需要一行空白行，来结束引用的区块。代码：

>这是一个引用

效果

这是一个引用此外，引用还可以嵌套使用：代码：

>这是一个引用：
>>这是一个引用的引用
>>>这是一个引用的引用的引用

效果：

这是一个引用：

这是一个引用的引用

这是一个引用的引用的引用

3.5 链接

Markdown中插入链接的使用方式是：代码：

[链接名称](链接地址)
<链接地址>
即是：
[这是小白的主页](https://blog.csdn.net/qq_40818172?type=lately)
或者
<https://blog.csdn.net/qq_40818172?type=lately>

效果：

<a href="https://blog.csdn.net/qq_40818172?type=lately">这是小白的主页</a> <a href="https://blog.csdn.net/qq_40818172?type=lately">https://blog.csdn.net/qq_40818172?type=lately</a>

3.6 图片

Markdown中插入图片的使用方式是：代码：

![图片描述，可写可不写，但是中括号要有](图片地址，本地链接或者URL地址。)
比如我此文章的图片：
![卷不动的小白](https://img-blog.csdnimg.cn/8bbc653f3f854023856762ed2c8e43e9.png)
)

效果：卷不动的小白

博主自己经常Ctrl+v粘贴图片更为便捷

3.7 列表

列表分为有序列表和无序列表

无序列表，使用*、+、-，再加一个空格作为列表的标记有序列表，使用数字并加上.号，再加一个空格作为列表的标记代码：

* 无序列表 1
+ 无序列表 2
- 无序列表 3

1. 有序列表 1
2. 有序列表 2
3. 有序列表 3

效果：

无序列表 1

无序列表 2

无序列表 3

有序列表 1 有序列表 2 有序列表 3

如果想要控制列表的层级，则需要在列表符号前使用Tab 代码：

+ 无序列表 1
+ 无序列表 2
    + 无序列表 2.1
    + 无序列表 2.2

1. 有序列表 1
    1.1 有序列表 1.1
2. 有序列表 2
    2.1 有序列表2.1

效果：

无序列表 1 无序列表 2

无序列表 2.1 无序列表 2.2

有序列表 1

有序列表 1.1 有序列表 2

有序列表2.1

3.8 分割线

Markdown中给出了多种分割线的样式，我们可以使用分割线让文章结构更加的清晰。分割线的使用，可以在一行中用三个-or*来建立一个分割线，但是注意：在分割线的上面空一行！！！

代码：

分割线：

---
***
- - -
* * *

效果：

<hr> <hr> <hr> <hr>

注意：写分割线前，要空一行之后写，否则会导致前一行字体放大。

3.9 删除线

删除线的的使用，可以在要添加删除线的文字前后添加两个~ 代码：

~~这是要被删除的文字~~

效果：

<s>这是要被删除的文字</s>

3.10 下划线

下划线的使用和html中类似，在需要添加下划线的文字首尾添加<u>文本</u> 代码：

<u>这行文字已被添加下划线</u>

效果：

<u>这行文字已被添加下划线</u>

3.11 代码块

Markdown中代码块有两种：如果在一行内需要引用代码，只需要用反引号`引起来就好了。代码：

`Hello` World.

效果：

Hello World.

如果是在一个块内需要引用代码，则在需要引用的代码块的前一行和后一行使用三个反引号，同时在前一个反引号后写入代码的语言。代码：在这里插入图片描述效果：

#include<iostream>
int main(){
   printf("HelloWorld");
}

支持以下语言：

bash
c，clojure，cpp，cs，css
dart，dockerfile, diff
erlang
go，gradle，groovy
haskell
java，javascript，json，julia
kotlin
lisp，lua
makefile，markdown，matlab
objectivec
perl，php，python
r，ruby，rust
scala，shell，sql，swift
tex，typescript
verilog，vhdl
xml
yaml

3.12 表格

表格使用|来分割不同的单元格，使用-来分隔表头和其他行

:-：将表头及单元格内容左对齐 -:：将表头及单元格内容右对齐 :-:：将表头及单元格内容居中

代码：

| 项目      | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机    | \$1600 |   5    |
| 手机      |   \$12   |   12   |
| 管线      |   \$1   |  234  |

效果：

<table> <thead> <tr> <th>项目</th> <th align="left">价格</th> <th align="center">数量</th> </tr> </thead> <tbody> <tr> <td>计算机</td> <td align="left">$1600</td> <td align="center">5</td> </tr> <tr> <td>手机</td> <td align="left">$12</td> <td align="center">12</td> </tr> <tr> <td>管线</td> <td align="left">$1</td> <td align="center">234</td> </tr> </tbody> </table>nn## 3.13 脚注

脚注是对文本的备注，我们时长在论文中看到脚注，在Markdown中的使用方法代码：

使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Typora[^T] 编辑器进行书写。
[^1]:Markdown是一种纯文本标记语言
[^2]:HyperText Markup Language 超文本标记语言
[^T]:NEW WAY TO READ &amp; WRITE MARKDOWN.

效果：使用 Markdown<sup class="footnote-ref"><a href="#fn1" id="fnref1">1</a></sup>可以效率的书写文档, 直接转换成 HTML<sup class="footnote-ref"><a href="#fn2" id="fnref2">2</a></sup>,

注意：脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。

3.14 特殊符号

对于Markdown中的语法符号，前面家反斜线\即可以显示符号本身。代码：

\\
\*
\_
\+
\.
等等

效果：

* _ + .

<hr>

四、Markdown的高级用法

4.1 个人看法

Markdown 是非常厉害的，但是我认为它建立的初衷是为了方便大家记笔记写博客，它具有很强大的功能，例如流程图、复杂的公式呈现，虽然看起来很有用，但是我认为这些功能与它创立的初衷是违背的，而且做流程图和复杂的公式是有专门的工具，而且十分便捷。所以个人认为，Markdown的一些高级用法了解一下即可，博主也不是很会使用参考了其他资料稍微来整理一下笔记。此处只简要提一下，如果想要了解更多详细的高级用法：<a href="https://www.runoob.com/markdown/md-advance.html">菜鸟教程Markdown高级用法</a>、<a href="https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#cmd-markdown-%E9%AB%98%E9%98%B6%E8%AF%AD%E6%B3%95%E6%89%8B%E5%86%8C">Cmd Markdown 简明语法手册</a>

4.2 制作待办事项

我们可以使用Markdown来制作一个待办事项，格式为、-[] 表示未完成；-[x]表示已完成代码：

- [ ] 支持以 PDF 格式导出文稿
- [ ] 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
- [x] 新增 Todo 列表功能
- [x] 修复 LaTex 公式渲染问题
- [x] 新增 LaTex 公式编号功能

效果：

<input type="checkbox" class="task-list-item-checkbox" disabled> 支持以 PDF 格式导出文稿 <input type="checkbox" class="task-list-item-checkbox" disabled> 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率 <input type="checkbox" class="task-list-item-checkbox" checked="true" disabled> 新增 Todo 列表功能 <input type="checkbox" class="task-list-item-checkbox" checked="true" disabled> 修复 LaTex 公式渲染问题 <input type="checkbox" class="task-list-item-checkbox" checked="true" disabled> 新增 LaTex 公式编号功能

4.3 书写公式

Markdown支持书写公式，例如书写一个质能守恒公式。 $$表示整行公式代码：

$$E=mc^2$$

效果：

E = m c 2 E=mc^2 E=mc2

4.4 绘制流程图

代码: 在这里插入图片描述效果：

4.5 绘制序列图

代码：在这里插入图片描述

效果：

</path> </symbol> </defs> <defs> <symbol id="database" fill-rule="evenodd">

</path> </symbol> </defs> <defs> <symbol id="clock" width="24" height="24">

</path> </symbol> </defs> <g> </line> <g id="root-24"> <rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="75" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="75" dy="0"> Alice </tspan> </text> </g> </g> <g> </line> <g id="root-25"> <rect x="256" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="331" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="331" dy="0"> Bob </tspan> </text> </g> </g> <defs> <marker id="arrowhead" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">

</path> </marker> </defs> <defs> <marker id="crosshead" markerwidth="15" markerheight="8" orient="auto" refx="16" refy="4">

</path>

</path> </marker> </defs> <defs> <marker id="filled-head" refx="18" refy="7" markerwidth="20" markerheight="28" orient="auto">

</path> </marker> </defs> <defs> <marker id="sequencenumber" refx="15" refy="15" markerwidth="60" markerheight="40" orient="auto"> <circle cx="15" cy="15" r="6"></circle> </marker> </defs> <text x="203" y="80" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 16px; font-weight: 400;"> Hello Bob, how are you? </text> </line> <g> <rect x="356" y="127" fill="#EDF2AE" stroke="#666" width="150" height="36" rx="0" ry="0" class="note"></rect> <text x="431" y="132" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 14px; font-weight: 400;"> <tspan x="431"> Bob thinks </tspan> </text> </g> <text x="203" y="178" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 16px; font-weight: 400;"> I am good thanks! </text> </line> <g> <rect x="0" y="235" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="75" y="267.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="75" dy="0"> Alice </tspan> </text> </g> <g> <rect x="256" y="235" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="331" y="267.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="331" dy="0"> Bob </tspan> </text> </g> </svg>

4.6 绘制甘特图

代码：在这里插入图片描述

效果：

</path> </g> <g> <rect x="0" y="48" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="72" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="96" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="120" width="462.5" height="24" class="section section1"></rect> <rect x="0" y="144" width="462.5" height="24" class="section section1"></rect> <rect x="0" y="168" width="462.5" height="24" class="section section1"></rect> <rect x="0" y="192" width="462.5" height="24" class="section section1"></rect> <rect x="0" y="216" width="462.5" height="24" class="section section2"></rect> <rect x="0" y="240" width="462.5" height="24" class="section section2"></rect> </g> <g> <rect rx="3" ry="3" x="75" y="50" width="26" height="20" class="task task0"></rect> <rect rx="3" ry="3" x="101" y="74" width="44" height="20" class="task task0"></rect> <rect rx="3" ry="3" x="145" y="98" width="44" height="20" class="task task0"></rect> <rect rx="3" ry="3" x="189" y="122" width="44" height="20" class="task task1"></rect> <rect rx="3" ry="3" x="215" y="146" width="88" height="20" class="task task1"></rect> <rect rx="3" ry="3" x="276" y="170" width="88" height="20" class="task task1"></rect> <rect rx="3" ry="3" x="338" y="194" width="43" height="20" class="task task1"></rect> <rect rx="3" ry="3" x="381" y="218" width="18" height="20" class="task task2"></rect> <rect rx="3" ry="3" x="399" y="242" width="26" height="20" class="task task2"></rect> <text font-size="11" x="106" y="63.5" text-height="20" class="taskTextOutsideRight taskTextOutside0 "> 需求分析 </text> <text font-size="11" x="150" y="87.5" text-height="20" class="taskTextOutsideRight taskTextOutside0 "> 可行性报告 </text> <text font-size="11" x="194" y="111.5" text-height="20" class="taskTextOutsideRight taskTextOutside0 "> 概念验证 </text> <text font-size="11" x="238" y="135.5" text-height="20" class="taskTextOutsideRight taskTextOutside1 "> 概要设计 </text> <text font-size="11" x="259" y="159.5" text-height="20" class="taskText taskText1 "> 详细设计 </text> <text font-size="11" x="320" y="183.5" text-height="20" class="taskText taskText1 "> 编码 </text> <text font-size="11" x="359.5" y="207.5" text-height="20" class="taskText taskText1 "> 测试 </text> <text font-size="11" x="404" y="231.5" text-height="20" class="taskTextOutsideRight taskTextOutside2 "> 发布 </text> <text font-size="11" x="412" y="255.5" text-height="20" class="taskText taskText2 "> 验收 </text> </g> <g> <text x="10" y="86" class="sectionTitle sectionTitle0"> 项目确定 </text> <text x="10" y="170" class="sectionTitle sectionTitle1"> 项目实施 </text> <text x="10" y="242" class="sectionTitle sectionTitle2"> 发布验收 </text> </g> <g class="today"> </line> </g> <text x="250" y="25" class="titleText"> 项目开发流程 </text> </svg>

如果感兴趣可以去<a href="https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#cmd-markdown-%E9%AB%98%E9%98%B6%E8%AF%AD%E6%B3%95%E6%89%8B%E5%86%8C">Cmd Markdown 简明语法手册</a>这里学习更多。

4.7 Html

Markdown支持原生HTML语法，譬如，你可以用 Html 写一个纵跨两行的表格：代码：

<table>
   <tr>
      <th rowspan="2">值班人员</th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
   </tr>
   <tr>
      <td>李强</td>
      <td>张明</td>
      <td>王平</td>
   </tr>
</table>

效果：

<table> <tbody> <tr> <th rowspan="2">值班人员</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> </tr> <tr> <td>李强</td> <td>张明</td> <td>王平</td> </tr> </tbody> </table> 也可以实现对字体格式的改变

代码：

<font face="楷体" color=#00ffff size=5>改变文字格式</font>

效果：

<font face="楷体" color="#00ffff" size="5"> 改变文字格式</font>

<hr>

五、Markdown工具

本地APP：首推 Typora，当然还有其他一些好用的软件，我用的是Typora；国内博客平台：CSDN、简书、掘金、博客园、知乎等。 Typora下载链接：<a href="http://www.itmind.net/20343.html">Typora下载</a>
<hr>

六、总结

为什么要写这篇博客，不仅是为了分享我的学习过程，也是为了给自己记个笔记，哪里忘记了，回来再看一眼，也可以很快的回想起来。所以快快把Markdown语法学起来吧，一起加油！！！

Markdown是一种纯文本标记语言 <a href="#fnref1" class="footnote-backref">↩︎</a>

HyperText Markup Language 超文本标记语言 <a href="#fnref2" class="footnote-backref">↩︎</a>

</section>

原文地址：https://blog.csdn.net/qq_40818172/article/details/126260661?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905574616800186581319%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168905574616800186581319&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-126260661-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=markdown

HuaShen

手把手教会你使用Markdown【从入门到精通一篇就够了】

目录

手把手教会你使用Markdown【从入门到精通一篇就够了】

前言

一、Markdown是什么

二、Markdown优点

三、Markdown的基本语法

3.1 标题

3.2 字体

3.3 换行

3.4 引用

3.5 链接

3.6 图片

3.7 列表

3.8 分割线

3.9 删除线

3.10 下划线

3.11 代码块

3.12 表格

3.14 特殊符号

四、Markdown的高级用法

4.1 个人看法

4.2 制作待办事项

4.3 书写公式

4.4 绘制流程图

4.5 绘制序列图

4.6 绘制甘特图

4.7 Html

五、Markdown工具

六、总结

推荐阅读

【分享】必应浏览器25.5 🔥纯净版想的到想不到的都能做

QQXML 卡片菜单代码分享

【iapp】手电筒源码

【分享】🔥测量大师🔥测量身高🔥内置众多功能

当前未登陆哦

关于此站

学习网站

优秀排版个人博客

(穷逼博主)在线接单