介绍

主要介绍各种Markdown的标签。汇总一下自己在Markdown中编辑中的常用标签。

本篇内容的标签，全部是在Typora的环境下自测使用过。

1.基础标签

主要介绍Markdown中的一些基础标签，只要大家markdown那么就会用到的标签

2. 进阶标签

在上面基本标签外，我们如果还有其他的需求。也有更多的标签。

但是这种进阶的标签。有部分是需要前端做适配的如果前端没有做好适配。你可能看不到效果。

2.1 表格示例

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

<span id="table_style"></span>

我们在上面简单了解了表格。同时我们可以针对表格的内容做布局调整：例如左对齐，右对齐，居中对齐等

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

详细介绍对齐方式

表格的对齐方式：

• -: 设置内容和标题栏居右对齐。
• :- 设置内容和标题栏居左对齐。
• :-: 设置内容和标题栏居中对齐。

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>