markdown最全基本语法（初学者必备）

---

个人blog-1： 拾忆生活
个人blog-2： 极简-拾忆生活
欢迎大家来踩，同步更新

---

markdown基本语法

> （区块,有阴影+有竖线）
tab（代码区块,有阴影+无竖线）
\ (取消转义，无阴影+无竖线)

空格

•    不换行空格
  它是按下space键产生的空格,在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）
•    半角空格en
  其占据的宽度正好是1/2个中文宽度，1个英文字母，基本不受字体影响
•    全角空格em
  其占据的宽度正好是1个中文宽度，2个英文字母，基本不受字体影响。

颜色

方法1

<font color="red">red</font>

演示

red

方法2

$\color{#FF3030}red$

演示

$red$

标题

方法1

使用 = 和 - 标记一级和二级标题

演示

我展示的是一级标题
=================
我展示的是二级标题
-----------------

方法2

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

---

段落

段落的换行：使用两个以上空格加上回车
重新开始一个段落：段落后面使用一个空行

---

字体

*斜体文本*
**粗体文本**
***粗斜体文本***
_斜体文本_
__粗体文本__
___粗斜体文本___

演示

斜体文本
粗体文本
粗斜体文本
斜体文本
粗体文本
粗斜体文本

---

分隔线

一行中用三个及以上的星号*、减号-、底线_来建立分隔线
行内不能有其他东西(除了空格)。
***
—
___

演示

---

---

---

删除线

两个波浪线 ~~

演示

文本

---

下划线

<u>带下划线文本</u>

演示

带下划线文本

---

脚注

注意：（x必须相同，可以数字等）
这是一段话[^x]。
[^x]: 脚注说明内容，用来说明那段话

这是一段话,看最下面。[^x]
[^x]: 脚注说明内容，用来说明那段话

---

列表

一、无序列表

无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记
* 第一项
* 第二项
+ 第一项
+ 第二项
- 第一项
- 第二项

演示

• 第一项
• 第二项

• 第一项
• 第二项

• 第一项
• 第二项

二、有序列表

使用数字并加上 ”.“ 号来表示

1. 第一项
2. 第二项
3. 第三项

三、列表嵌套

在子列表中的选项添加四个空格是白色，没有空格是黑色(即没有嵌套)

语法

1. 第一项：
   - 第一项嵌套的第一个元素
   - 第一项嵌套的第二个元素
2. 第二项：
   - 第二项嵌套的第一个元素
   - 第二项嵌套的第二个元素

演示

1. 第一项：
   • 第一项嵌套的第一个元>素
   • 第一项嵌套的第二个元素
2. 第二项：

• 第二项嵌套的第一个元素
• 第二项嵌套的第二个元素

---

区块

>符号（引用块注释,有阴影+有竖线）

演示1：嵌套区块

一个 > 符号是最外层
两个 > 符号是第一层嵌套

最外层

第一层嵌套

第二层嵌套

演示2：列表中使用区块

• 第一项

  菜菜
  菜菜

• 第二项

演示3：区块中使用列表

1. 第一项
2. 第二项

• 第一项
• 第二项

---

代码

第一种：“ ` ”反引号，代码的前后一共两个反引号包围代码
第二种：用 ```包裹一段代码，并指定一种语言

语法

`printf()` 函数
或
```javascript
$(document).ready(function () {
alert(‘RUNOOB’);
});
```

演示1

printf() 函数

演示2

$(document).ready(function () {  
    alert('RUNOOB');  
});

代码区块

tab键（代码区块,有阴影+无竖线）

演示

这个的外框

---

链接

方法1：[链接名称](链接地址)
实现：这是一个链接 [百度](https://www.baidu.com)
或者
方法2：<链接地址>
实现：<https://www.baidu.com>

演示1

这是一个链接 百度

演示2

https://www.baidu.com

高级链接

链接也可以用变量来代替，文档末尾附带变量地址，然后在文档的结尾为变量赋值（网址）： (注意两行之间要空一行)
这个链接用 2 作为网址变量 [Google][1]
[1]: https://www.baidu.com
这个链接用 a 作为网址变量 [Runoob][a]
[a]: https://www.baidu.com

演示1

这个链接用 2 作为网址变量 百度

这个链接用 a 作为网址变量 还是百度

---

图片

方法1

• 开头一个感叹号 !
• 接着一个方括号，里面放上图片的替代文字
• 接着一个普通括号，里面放上图片的网址
  • 实现:
    

方法2

• 开头一个感叹号 !
• 接着一个方括号，里面放上图片的替代文字
• 接着一个普通括号，里面放上图片的网址和引号包住的 ‘title’ 属性的文字。
  • 实现:
    

演示1

演示2（请鼠标悬停在图片上方）

图片指定宽高

使用普通的 <img> 标签
<img src=“http://static.runoob.com/images/runoob-logo.png” width=“50%”>

演示

---

表格

• 基本
  • 使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行
  • :- 设置内容和标题栏居左对齐。
  • -: 设置内容和标题栏居右对齐。
  • :-: 设置内容和标题栏居中对齐。
• 其他
  • 单元格内为空：&nbsp;
  • 单元格内换行：<br>

基本表格实现

| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |

演示

表头	表头
单元格	单元格
单元格	单元格

对齐表格实现

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

演示

左对齐	居中对齐	右对齐
单	元	格
单	元	格

---

高级技巧

支持的 HTML 元素

<kbd><b><i><em><sup><sub><br>

实现:<kbd>

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

演示

使用 Ctrl+Alt+Del 重启电脑

---

公式

使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式

实现:x+y=z

$$  
x+y=Z  
$$  

演示

$$x+y=z$$

---

流程图

实现:横向流程图

```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
```

演示

---

实现:竖向流程图

```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
```

演示

---

实现:竖向标准流程图

```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```

演示

---

实现:横向标准流程图

```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

演示

---

实现:UML时序图

```mermaid
sequenceDiagram
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B–>对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
```
```mermaid
sequenceDiagram
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B–>对象A: 我很好(响应)
对象B->小三: 你好吗
小三–>>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```

演示1

演示2

---

实现:UML标准时序图

```mermaid
%% 时序图例子,-> 直线，–>虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生…
李四–>>张三: 很好!
王五->李四: 你怎么样?
李四–>王五: 很好!
```

演示

---

实现:甘特图

演示