介绍
主要介绍各种Markdown的标签。汇总一下自己在Markdown中编辑中的常用标签。
本篇内容的标签，全部是在Typora的环境下自测使用过。
1.基础标签
主要介绍Markdown中的一些基础标签，只要大家markdown那么就会用到的标签
| 标签 | 介绍 | 描述 |
|---|---|---|
# xxx | 标题 | # 一级标题。 ## 二级标题。 符号越多，标题等级越低。建议大家不要超过5级 |
**xx** | 加粗 | 加粗效果。如果我们要给文字加粗 |
`` | 行内代码 | 主要是给段落句子中的部分代码词使用的。 |
```java <br />``` | 代码块 | 我们可以在代码块开头区域，添加代码块的语言格式。 |
*x* | 倾斜 | 倾斜 。相较于加粗，只有一个*号 |
|xxxx|xxxx|xxxx| | 表格 | 表格主要是通过| 符号来进行定义的 ，而如果要定义表头那么在表头下一行使用：|------|------| 然后它就会区分了。 表格示例 |
 | 图像 | 我们如果给插入图片的话，图片的插入格式就是上面的了。 |
[链接说明]( 链接地址) | 链接地址 | 相较于图像插入，只是少了一个!而已。 |
------ | 水平分割线 | ------ |
2. 进阶标签
在上面基本标签外，我们如果还有其他的需求。也有更多的标签。
但是这种进阶的标签。有部分是需要前端做适配的如果前端没有做好适配。你可能看不到效果。
| 标签 | 介绍 | 描述 |
|---|---|---|
[TOC] | 目录 | Markdown支持内置目录，我们只需要添加目录标签后。就会自动生成目录。 |
- 内容 | 无序列表 | 在 段落前面添加 - 就可以创建无序列表效果 |
+ 内容 | 无序列表 | 在 段落前面添加 + 就可以创建无序列表效果。两个是一样的效果 |
1. | 有序列表 | 输入数字1. 然后加空格，就会自动创建有序列表了。回车换行就会自动创建新的序列。 |
> | 引用 | 我们在需要标注为“引用”的内容前，输入"> " 加上空格，就可以将内容标注为引用了。 |
- [ ] | 倾斜 | 任务列表效果，通过该标签 会自动在内容前面添加一个复选框效果 |
$$ 内容 <br /> $$ | 公式块 | markdown 要显示数学等公式效果，可以通过$$ 标签来实现 |
```mermaid graph ``` | 流程图 | 我们除了标签以外，我们还可以通过mermaid graph 标签实现流程图的自动生成。具体的可以参考下面的流程图示例 |
~~内容~~ | 中划线效果 | |
[^角注词]:角注内容 | 角注效果 | 默认情况下，角注内容不显示，只有当鼠标移动到角注上才会显示内容。(PS 需要你的前端适配支持该功能) |
2.1 表格示例
Markdown 制作表格使用 | 来分隔不同的单元格，使用 -来分隔表头和其他行。
我们在上面简单了解了表格。同时我们可以针对表格的内容做布局调整：例如左对齐，右对齐，居中对齐等
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
详细介绍对齐方式
表格的对齐方式：
- -: 设置内容和标题栏居右对齐。
- :- 设置内容和标题栏居左对齐。
- :-: 设置内容和标题栏居中对齐。
2.2 流程图 甘特图，UML时序图示例
主要介绍一些流程图和甘特图等效果。我们在实现了markdown的脚本后，如果前端解析没有正确配置的话，这种流程图等等也可能会在网页上无法正确显示。
流程图1：
代码配置：
```mermaid
graph LR
A[开始] -->B(打开网页)
B --> C{输入查询}
C -->|搜索zin| D(zinyan.com)
C -->|搜索yan| E[zinyan.com]
```
效果图：
流程图2：
代码配置：
```flow
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
gantt
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :des1, 2022-01-06,2022-01-08
原型 :des2, 2022-01-09, 3d
UI设计 :des3, after des2, 5d
UE设计 :des4, after des3, 5d
section 开发
技术准备 :crit, done, 2022-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, done, 8d
发布 :crit, 2d
section 测试
功能测试 :done, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
```
效果
还有我们经常会碰见的UML 时序图
```mermaid
sequenceDiagram
participant 登录
participant 接口
登录->>接口: 我把密码账户传给你
接口-->>后台:将数据通过https传给你
loop 信息检测
后台->后台: 判断账户信息是否正确
end
Note right of 后台: 用户信息等存在，我将数据改改后返回给你
后台-->>接口: 用户信息
接口-->>登录: 给你数据，你自己判断
登录->>主界面: 访问成功
```
3. Html标签的直接使用
我们除了上面的md标签外，还可以直接使用html的标签。
例如：我们输入按钮的效果： <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 显示效果为：Ctrl+Alt+Del
我们自定义锚点：例如在任意地方添加 ：<span id="react"></span>
然后在需要跳转到该区域的文字后添加：[内容介绍](#react)。 然后就能实现点击后页面自动滑动。
如果是需要下划线的话，由于md没有定义。所以我们如果想使用只能是html的标签来实现了
带下划线文本 <u>带下划线文本</u>
评论区