Markdown教程

本文来自 Markdown 教程

Markdown教程Markdown标题文本格式字体分割线脚注行内代码标记文本高亮段落和换行段落的基本规则强制换行技巧最佳实践建议列表无序列表有序列表列表嵌套无序列表嵌套：有序列表嵌套：混合嵌套嵌套规则任务列表使用技巧高级列表技巧引用块多级嵌套引用区块中使用列表列表中使用区块引用块内的其他元素包含标题包含列表包含代码包含链接和图片代码行内代码代码区块缩进式代码块三反引号代码块语言标识和语法高亮代码块的高级特性显示行号代码差异对比链接锚点链接图片图片alt文本图片尺寸控制链接和图片的高级用法图片链接组合相对路径与绝对路径图片居中对齐方法一：HTML+CSS方法二：使用HTML对齐属性方法三：创建图片画廊性能优化建议常见问题表格对齐方式复杂表格元格内容格式化处理长文本换行处理缩写和链接表格中的特殊字符表格美化建议使用Emoji和符号数据表格最佳实践财务数据表格技术对比表格响应式表格处理高级技巧支持的HTML元素转义公式流程图、时序图、甘特图横向流程图竖向流程图标准流程图源码格式标准流程图源码格式（横向）UML时序图源码样例UML时序图源码复杂样例UML标准时序图样例甘特图样例分割线水平分割线数学公式基本语法结构常用LaTeX命令多行公式常用数学符号基本运算符号比较符号集合符号希腊字母特殊函数和符号矩阵图表绘制流程图时序图和甘特图时序图甘特图饼图

Markdown标题

使用井号 # 号创建标题

一个#号为一级标题、两个#为二级标题，共六级。

井号必须在行首，且若干个井号后面必须跟一个空格：


xxxxxxxxxx
# 正确写法
#错误写法

推荐的标题层次结构应该遵循逻辑顺序，而不应该跳级使用：


xxxxxxxxxx
# 主标题
### 直接跳到三级标题（不推荐）
## 然后才是二级标题

标题长度一般不超过10个汉字或20个英文字符
使用描述性词语，避免模糊的标题
可以使用冒号来分割主标题和副标题

文本格式

字体

前后各一个星号或前后各一个下划线包围的文字，会以斜体显示
前后各两个星号或前后各两个下划线包围的文字，会以粗体显示
前后各三个星号或前后各三个下划线包围的文字，会以 斜粗体 显示
前后各两个波浪线包围的文字，会以 ~~删除的文字~~ 显示
和 包围的文字，会议带下划线文字显示

推荐使用星号，下划线在各种Markdown解析器中可能会引起误解，且下划线不易分辨个数。

建议在强调符号前后添加空格以提高可读性。

分割线

三个以上星号（*）或减号（-）或下划线（_）可以创建一个分割线。

分割线的行内不能有其他字符。

脚注

使用 [^文字] 设置[^脚注]

使用和设置 _下角标

使用和设置 ^上角标

行内代码标记

使用反引号包围 代码 。

当代码内包含反引号时，使用两个反引号`包围` 。

应用场景：

技术文档中的API名称、函数名
配置文件中的参数名
命令行指令
键盘快捷键，如 Ctrl+C

文本高亮

文本高亮不是标准的Markdown语法，有些平台支持【前后各两个等号包围的文字，会以 == 高亮 == 显示】。

HTML替代方案是以 和 将需要高亮的文本包围起来。

段落和换行

段落的基本规则

段落由一个或多个连续的文本行组成
段落之间由一个或多个空行分割
普通段落不应该用空格或制表符缩进

强制换行技巧

行尾两个空格，类似于 shift+enter 的效果
使用 标签
使用反斜杠（仅部分解析器支持）

最佳实践建议

在标题和内容之间留空行
在列表前后留空行
在代码块前后留空行
保持一致的空行使用习惯

列表

无序列表

无序列表使用星号（*）、加号（+）、或减号（-）作为列表标记，在这些标记后面添加一个空格，然后填写内容。例如：


x
* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项
- 第一项
- 第二项
- 第三项

建议：

建议同一使用减号，因为它在视觉上更清晰
在同一文档中保持一致的标记方式
标记符号后面必须有一个空格

有序列表

使用数字加上英文句号作为列表标记，在标记后面添加一个空格，然后填写内容。例如：


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

数字可以不连续，例如：


xxxxxxxxxx
1. 第一项
3. 第二项（实际显示为2）
7. 第三项（实际显示为3）

也可以从指定数字开始：


xxxxxxxxxx
5. 第五项
6. 第六项
7. 第七项

列表嵌套

可以创建多层次的结构。

无序列表嵌套：


xxxxxxxxxx
- 水果
  - 苹果
    - 红苹果
    - 绿苹果
  - 香蕉
  - 橙子
- 蔬菜
  - 胡萝卜
  - 白菜

水果
- 苹果
  - 红苹果
  - 绿苹果
- 香蕉
- 橙子
蔬菜
- 胡萝卜
- 白菜

有序列表嵌套：


xxxxxxxxxx
1. 准备阶段
   1. 收集资料
   2. 制定计划
2. 执行阶段
   1. 开始实施
   2. 监控进度
3. 总结阶段

准备阶段
1. 收集资料
2. 制定计划
执行阶段
1. 开始实施
2. 监控进度
总结阶段

混合嵌套


xxxxxxxxxx
1. 主要任务
   - 子任务A
   - 子任务B
     1. 详细步骤1
     2. 详细步骤2
   - 子任务C
2. 次要任务

主要任务
- 子任务A
- 子任务B
  1. 详细步骤1
  2. 详细步骤2
- 子任务C
次要任务

列表混合嵌套只需在子列表中的选项前面添加两个或四个空格即可：


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

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

嵌套规则

子列表需要缩进2-4个空格（推荐2个）
保持一致的缩进长度
可以限制嵌套，但不建议超过3层

任务列表

任务列表是GitHub风格的Markdown扩展功能：


xxxxxxxxxx
- [ ] 未完成的任务
- [x] 已完成的任务
- [ ] 另一个未完成的任务

未完成的任务
已完成的任务
另一个未完成的任务

实例：


xxxxxxxxxx
## 项目待办清单
### 设计阶段
- [x] 需求分析
- [x] 原型设计
- [ ] UI 设计
### 开发阶段
- [ ] 前端开发
  - [x] 页面布局
  - [ ] 交互功能
  - [ ] 响应式适配
- [ ] 后端开发
  - [ ] 数据库设计
  - [ ] API 开发
  - [ ] 性能优化
### 测试阶段
- [ ] 单元测试
- [ ] 集成测试
- [ ] 用户验收测试

显示效果如下：

使用技巧

方括号内的空格和x很重要，即 [ ] 和 [x]
可以与嵌套列表结合使用
在项目管理、学习计划、生活清单中特别有用
某些编辑器支持点击复选框来切换状态

高级列表技巧

若列表项包含多段，可以在第二段头部使用回退键消除掉自动生成的列表标记。

可以在列表项中使用引用。

引用块

在段落开头使用 > 符号，然后紧跟一个空格，例如：


xxxxxxxxxx
> 区块引用
> 菜鸟教程
> 学的不仅是技术更是梦想

区块引用菜鸟教程学的不仅是技术更是梦想

对于多行引用，也可以用如下写法：


xxxxxxxxxx
> 这是一个长引用，
包含多行内容，
只需要在第一行使用 > 符号。

这是一个长引用，包含多行内容，只需要在第一行使用 > 符号。

多级嵌套引用

另外区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推：


xxxxxxxxxx
> 最外层
> > 第一层嵌套
> > > 第二层嵌套

最外层
第一层嵌套
第二层嵌套

区块中使用列表


xxxxxxxxxx
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

区块中使用列表
第一项
第二项
第一项
第二项
第三项

列表中使用区块


xxxxxxxxxx
* 第一项
    > 菜鸟教程
    > 学的不仅是技术更是梦想
* 第二项

第一项
菜鸟教程学的不仅是技术更是梦想
第二项


xxxxxxxxxx
> ## 重要提醒
> 
> 请在操作前仔细阅读文档，避免数据丢失。

引用块内的其他元素

引用块内可以包含几乎所有其他Markdown元素。

包含标题


xxxxxxxxxx
> ## 重要提醒
> 
> 请在操作前仔细阅读文档，避免数据丢失。

重要提醒
请在操作前仔细阅读文档，避免数据丢失。

包含列表


xxxxxxxxxx
> ### 注意事项
> 
> 1. 备份重要数据
> 2. 检查系统兼容性
> 3. 准备回滚方案
> 
> - 测试环境验证
> - 生产环境部署
> - 监控系统状态

注意事项
备份重要数据
检查系统兼容性
准备回滚方案
测试环境验证
生产环境部署
监控系统状态

包含代码


xxxxxxxxxx
> 要运行这个脚本，请使用以下命令：
> 
> ```bash
> npm install
> npm start
> ```
> 
> 执行后会在 `http://localhost:3000` 看到结果。

要运行这个脚本，请使用以下命令：
xxxxxxxxxx
npm install
npm start
执行后会在 http://localhost:3000 看到结果。

包含链接和图片


xxxxxxxxxx
> &#x1f4da; **推荐阅读**
> 
> 详细信息请参考 [官方文档](https://example.com)
> 
> ![示例图片](./images/example.png)

📚 推荐阅读
详细信息请参考官方文档

&#x 后面跟的是十六进制数表示的Unicode表情符号（可在 Emoji Unicode Tables 中查找）。

代号	含义
&#x2705	✅
&#x26a0	⚠
&#xfe0f	️ （可能是个空格）
&#x274c	❌
&#x2139	ℹ
&#x1f4da	📚

代码

行内代码

反引号包围的代码片段，例如：


xxxxxxxxxx
`printf()` 函数

printf() 函数


xxxxxxxxxx
``使用 `反引号` 包围代码``

使用 `反引号` 包围代码


xxxxxxxxxx
```包含 `` 双反引号的代码```

包含 `` 双反引号的代码

其他特殊字符处理：

HTML标签 <div> 元素
数字符号
特殊符号，使用   表示空格

代码区块

缩进式代码块

【此方法在Typora内似乎不支持】

代码区块使用4个空格或者一个制表符。


xxxxxxxxxx
正常文本段落
    这是缩进式代码块
    每行前面有四个空格
    保持代码的原始格式
    
继续正常文本

正常文本段落


xxxxxxxxxx
这是缩进式代码块
每行前面有四个空格
保持代码的原始格式

继续正常文本

三反引号代码块

使用```包裹一段代码，并指定一种语言（也可以不指定）：


xxxxxxxxxx
```
多行代码内容
可以包含空行
保持原有缩进
```


xxxxxxxxxx
多行代码内容
可以包含空行
保持原有缩进

若指定语言，支持语法高亮：


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


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

缩进式代码块前后需要空行分割
所有代码行必须保持一致的缩进
不支持语法高亮
在列表中使用时需要8个空格缩进

语言标识和语法高亮

在三反引号后添加语言标识符可以启用语法高亮功能。常用的语言标识符列表：

javascript / js - JavaScript
python / py - Python
html - HTML
css - CSS
sql - SQL
json - JSON
xml - XML
yaml / yml - YAML
bash / shell - Shell脚本
java - Java
cpp / c++ - C++
csharp / c# - C#
php - PHP
ruby / rb - Ruby
go - Go语言
rust - Rust
typescript / ts - TypeScript

代码块的高级特性

显示行号

某些Markdown渲染器支持显示行号，通过特定的语法或配置实现。


xxxxxxxxxx
```javascript {.line-numbers}
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10));
```

或者：


xxxxxxxxxx
```javascript showLineNumbers
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
const sum = doubled.reduce((a, b) => a + b, 0);
console.log(`总和: ${sum}`);
```

【Typora不支持】

代码差异对比


xxxxxxxxxx
```diff
function calculateTotal(items) {
-   let total = 0;
+   let total = 0.0;
    
    for (let item of items) {
-       total += item.price;
+       total += parseFloat(item.price);
    }
    
+   // 保留两位小数
+   total = Math.round(total * 100) / 100;
    return total;
}
```


xxxxxxxxxx
function calculateTotal(items) {
-   let total = 0;
+   let total = 0.0;
    
    for (let item of items) {
-       total += item.price;
+       total += parseFloat(item.price);
    }
    
+   // 保留两位小数
+   total = Math.round(total * 100) / 100;
    return total;
}


xxxxxxxxxx
@@ -1,5 +1,8 @@
 function greetUser(name) {
-    console.log("Hello " + name);
+    if (!name) {
+        throw new Error("Name is required");
+    }
+    console.log(`Hello, ${name}!`);
 }


xxxxxxxxxx
// 之前的代码
const oldFunction = () => {
    var x = 10;  // &#x274c; 使用 var
    console.log("Value: " + x);  // &#x274c; 字符串拼接
}
// 改进后的代码  
const newFunction = () => {
    const x = 10;  // &#x2705; 使用 const
    console.log(`Value: ${x}`);  // &#x2705; 模板字符串
}

链接

链接语法如下：


xxxxxxxxxx
[链接名称](链接地址)
[链接文字](链接地址 "可选的标题")

或者：


xxxxxxxxxx
<链接地址>

示例：


xxxxxxxxxx
这是一个链接 [菜鸟教程](https://www.runoob.com)

这是一个链接菜鸟教程


xxxxxxxxxx
<https://www.runoob.com>

https://www.runoob.com

邮箱链接：


xxxxxxxxxx
markdown联系我：[发送邮件](mailto:example@email.com)
电话联系：[拨打电话](tel:+86-138-0013-8000)

markdown联系我：发送邮件电话联系：拨打电话

锚点链接

锚点链接用于在同一个文档内跳转，适合长文档的导航。

跳转到标题：


xxxxxxxxxx
## 目录
- [第一章：介绍](#第一章介绍)
- [第二章：安装](#第二章安装)
- [第三章：使用方法](#第三章使用方法)
# 第一章：介绍
这里是介绍内容...
# 第二章：安装
这里是安装说明...
# 第三章：使用方法
这里是使用说明...

标题会自动生成锚点
锚点名称通常时标题的小写形式
空格替换为连字符
移除特殊字符

手动创建锚点：


xxxxxxxxxx
<a id="custom-anchor"></a>
## 自定义锚点位置
[跳转到自定义位置](#custom-anchor)

【似乎没用】

图片

图片语法格式如下：


xxxxxxxxxx
![替代文字](图片路径)
![替代文字](图片路径 "图片标题")

开头一个感叹号
接着一个方括号，里面放图片的替代文字
接着一个圆括号，里面放图片路径，可以是url，可以是相对路径，后面可以用引号附加'title'属性的文字

建议：

推荐使用相对路径，便于项目移植
建议创建专门保存图片的文件夹，例如images/、assets/
使用有意义的文件名
注意路径分隔符在不同操作系统中的差异

也可以像网址那样对图片网址使用变量：


xxxxxxxxxx
这个链接用 1 作为网址变量 [RUNOOB][1].
然后在文档的结尾为变量赋值（网址）
[1]: https://static.jyshare.com/images/runoob-logo.png

Markdown无法指定图片的高度和宽度，只能用 <img> 标签来解决：


xxxxxxxxxx
<img src="https://static.jyshare.com/images/runoob-logo.png" width="50%">

建议本地备份重要图片

图片alt文本

alt文本（替代文字）在图片无法显示时提供替代信息。

应简洁但有描述性
描述图片的主要内容和用途
考虑上下文，提供有意义的信息
对于装饰性图片，可以使用空白alt文本

图片尺寸控制

使用HTLM img标签：


xxxxxxxxxx
<img src="image.jpg" alt="描述文字" width="300" height="200">
<img src="image.jpg" alt="描述文字" width="50%">
<img src="image.jpg" alt="描述文字" style="width: 300px; height: auto;">

响应式图片：


xxxxxxxxxx
<img src="image.jpg" alt="描述文字" style="max-width: 100%; height: auto;">

图片对齐：


xxxxxxxxxx
<!-- 居中对齐 -->
<div align="center">
  <img src="image.jpg" alt="居中图片" width="400">
</div>
<!-- 左对齐（默认） -->
<img src="image.jpg" alt="左对齐图片" style="float: left; margin-right: 20px;">
<!-- 右对齐 -->
<img src="image.jpg" alt="右对齐图片" style="float: right; margin-left: 20px;">

链接和图片的高级用法

图片链接组合

将图片作为链接的可点击元素：


xxxxxxxxxx
[![图片alt文本](图片URL)](链接URL)

相对路径与绝对路径

相对路径的优势：


xxxxxxxxxx
<!-- 项目结构 -->
project/
├── README.md
├── docs/
│   ├── guide.md
│   └── images/
│       └── screenshot.png
└── assets/
    └── logo.png
<!-- 在 README.md 中 -->
![Logo](./assets/logo.png)
<!-- 在 docs/guide.md 中 -->
![Screenshot](./images/screenshot.png)
![Logo](../assets/logo.png)

建议：

在项目根目录创建统一的资源文件夹
使用描述性的文件夹名称
保持路径结构的一致性
考虑静态网址生成器的路径规则

图片居中对齐

方法一：HTML+CSS


xxxxxxxxxx
<div style="text-align: center;">
  <img src="image.jpg" alt="居中图片" style="max-width: 100%;">
</div>

方法二：使用HTML对齐属性


xxxxxxxxxx
<p align="center">
  <img src="image.jpg" alt="居中图片" width="400">
</p>

方法三：创建图片画廊


xxxxxxxxxx
<div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
  <img src="image1.jpg" alt="图片1" style="width: 30%; margin: 10px;">
  <img src="image2.jpg" alt="图片2" style="width: 30%; margin: 10px;">
  <img src="image3.jpg" alt="图片3" style="width: 30%; margin: 10px;">
</sdiv>

示例：


xxxxxxxxxx
## 产品展示
### 主要功能
<table>
  <tr>
    <td align="center">
      <img src="./images/feature1.png" width="200" alt="功能1">
      <br>
      <strong>智能识别</strong>
      <br>
      <sub>AI驱动的图像识别技术</sub>
    </td>
    <td align="center">
      <img src="./images/feature2.png" width="200" alt="功能2">
      <br>
      <strong>快速处理</strong>
      <br>
      <sub>毫秒级响应速度</sub>
    </td>
  </tr>
</table>
### 界面预览
| 移动端 | 桌面端 |
|:---:|:---:|
| ![移动界面](./images/mobile.png) | ![桌面界面](./images/desktop.png) |
| 响应式设计，完美适配 | 大屏体验，功能齐全 |

性能优化建议

优化图片大小和格式（WebP > PNG > JPG）
使用适当的图片尺寸，避免在网页中缩放大图
考虑使用图片压缩工具
为不同设备准备不同尺寸的图片

常见问题

链接无法点击：检查语法格式，确保各种括号正确配对
图片无法显示：验证图片路径和文件存在性
图片过大：使用HTML控制尺寸或优化图片文件
链接在新窗口打开：使用 HTML <a target="_blank"> 标签

表格

表格语法格式如下：


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

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

语法要点：

表头和数据行之间必须有分割线
分割线至少需要三个连字符 ---
两端的竖线 | 是可选的，但建议保留以提高可读性
不需要严格对齐，但对齐后会更美观

对齐方式

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

示例：


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

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

复杂表格

元格内容格式化

语法：


xxxxxxxxxx
| 功能 | 描述 | 状态 |
|------|------|:----:|
| **用户登录** | 支持邮箱和手机号登录 | &#x2705; |
| *密码重置* | 通过邮箱重置密码 | &#x26a0;&#xfe0f; |
| `API接口` | RESTful API 设计 | &#x2705; |
| [文档链接](https://example.com) | 查看详细文档 | &#x1f4d6; |

功能	描述	状态
用户登录	支持邮箱和手机号登录	✅
密码重置	通过邮箱重置密码	⚠️
`API接口`	RESTful API 设计	✅
文档链接	查看详细文档	📖

处理长文本

换行处理


xxxxxxxxxx
| 项目 | 详细说明 |
|------|----------|
| 需求分析 | 1. 收集用户需求<br>2. 分析业务场景<br>3. 确定功能范围 |
| 技术选型 | 前端：React + TypeScript<br>后端：Node.js + Express<br>数据库：MongoDB |

项目	详细说明
需求分析	1. 收集用户需求 2. 分析业务场景 3. 确定功能范围
技术选型	前端：React + TypeScript 后端：Node.js + Express 数据库：MongoDB

缩写和链接


xxxxxxxxxx
| 技术栈 | 说明 | 官网 |
|--------|------|------|
| React | 用户界面库 | [链接](https://reactjs.org) |
| Vue.js | 渐进式框架 | [链接](https://vuejs.org) |
| Angular | 完整的框架 | [链接](https://angular.io) |

技术栈	说明	官网
React	用户界面库	链接
Vue.js	渐进式框架	链接
Angular	完整的框架	链接

表格中的特殊字符

某些字符在表格中有特殊含义，需要转义：


xxxxxxxxxx
| 字符 | 转义方法 | 示例 |
|------|----------|------|
| 竖线 | `\|` | 显示 \| 符号 |
| 反斜杠 | `\\` | 显示 \\ 符号 |
| HTML | 直接使用 | <code>&lt;div&gt;</code> |

字符	转义方法	示例
竖线	`\\|`	显示 \| 符号
反斜杠	`\\`	显示 \ 符号
HTML	直接使用	`<div>`

表格美化建议

使用Emoji和符号


xxxxxxxxxx
| 状态 | 图标 | 说明 |
|:----:|:----:|------|
| 完成 | &#x2705; | 任务已完成 |
| 进行中 | &#x1f504; | 正在处理 |
| 待处理 | &#x23f3; | 等待开始 |
| 错误 | &#x274c; | 出现问题 |
| 警告 | &#x26a0;&#xfe0f; | 需要注意 |

状态	图标	说明
完成	✅	任务已完成
进行中	🔄	正在处理
待处理	⏳	等待开始
错误	❌	出现问题
警告	⚠️	需要注意

数据表格最佳实践

财务数据表格


xxxxxxxxxx
| 月份 | 收入 | 支出 | 利润 | 增长率 |
|:----:|-----:|-----:|-----:|-------:|
| 1月 | ¥50,000 | ¥35,000 | ¥15,000 | - |
| 2月 | ¥55,000 | ¥38,000 | ¥17,000 | +13.3% |
| 3月 | ¥62,000 | ¥42,000 | ¥20,000 | +17.6% |
| **总计** | **¥167,000** | **¥115,000** | **¥52,000** | **+31.1%** |

月份	收入	支出	利润	增长率
1月	¥50,000	¥35,000	¥15,000	-
2月	¥55,000	¥38,000	¥17,000	+13.3%
3月	¥62,000	¥42,000	¥20,000	+17.6%
总计	¥167,000	¥115,000	¥52,000	+31.1%

技术对比表格


xxxxxxxxxx
| 特性 | React | Vue.js | Angular | 评分 |
|------|:-----:|:------:|:-------:|:----:|
| 学习曲线 | 中等 | 简单 | 复杂 | Vue &#x2b50;&#x2b50;&#x2b50; |
| 性能表现 | 优秀 | 优秀 | 良好 | 平分 &#x2b50;&#x2b50;&#x2b50; |
| 生态系统 | 丰富 | 成长中 | 完整 | React &#x2b50;&#x2b50;&#x2b50; |
| 企业支持 | Facebook | 社区 | Google | Angular &#x2b50;&#x2b50;&#x2b50; |

特性	React	Vue.js	Angular	评分
学习曲线	中等	简单	复杂	Vue ⭐⭐⭐
性能表现	优秀	优秀	良好	平分 ⭐⭐⭐
生态系统	丰富	成长中	完整	React ⭐⭐⭐
企业支持	Facebook	社区	Google	Angular ⭐⭐⭐

响应式表格处理

对于复杂的表格，可以考虑分解成多个简单表格。

移动端友好的设计：


xxxxxxxxxx
- 基本信息
| 项目 | 值 |
|------|-----|
| 姓名 | 张三 |
| 年龄 | 25 |
| 职业 | 工程师 |
- 联系方式
| 类型 | 信息 |
|------|------|
| 邮箱 | zhang@example.com |
| 电话 | 138-0013-8000 |
| 地址 | 北京市朝阳区 |

基本信息

项目	值
姓名	张三
年龄	25
职业	工程师

联系方式

类型	信息
邮箱	zhang@example.com
电话	138-0013-8000
地址	北京市朝阳区

高级技巧

支持的HTML元素

不在Markdown涵盖范围内的标签，都可以直接在文档中用HTML撰写。

目前支持的HTML元素有： <kbd> 、 、 、 、 、 、 等。


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

使用 Ctrl+Alt+Del 重启电脑

转义

Markdown使用反斜杠转义特殊字符（或特殊位置的特殊字符）：


xxxxxxxxxx
**文本加粗** 
\*\* 正常显示星号 \*\*

文本加粗 ** 正常显示星号 **

Markdown支持以下符号的转义：


xxxxxxxxxx
\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

公式

Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。

KaTeX比MathJax更快，但特性较少。

默认分隔符：

$...$ 或者 $...$ 中的数字表达式将会在行内显示。【Typora似乎不支持此方法】
$$...$$ 或者 \[...\] 或者 ```match 中的数学表达式将在块内显示


xxxxxxxxxx
$$
\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
$$
$$
\begin{CD}
   A @>a>> B \\
@VbVV @AAcA \\
   C @= D
\end{CD}
$$

\begin{Bmatrix} a & b \\ c & d \end{Bmatrix}

\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD}

流程图、时序图、甘特图

横向流程图


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

竖向流程图


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

标准流程图源码格式


xxxxxxxxxx
```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
```

标准流程图源码格式（横向）


xxxxxxxxxx
```flow
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时序图源码样例


xxxxxxxxxx
```sequence
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
```

UML时序图源码复杂样例


xxxxxxxxxx
```sequence
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: 没人陪我玩
```

UML标准时序图样例


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

甘特图样例


xxxxxxxxxx
```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求 :done, des1, 2014-01-06,2014-01-08
        原型 :active,  des2, 2014-01-09, 3d
        UI设计 : des3, after des2, 5d
    未来任务 :   des4, after des3, 5d
        section 开发
        学习准备理解需求 :crit, done, 2014-01-06,24h
        设计框架 :crit, done, after des2, 2d
        开发 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
```

分割线

水平分割线

Markdown支持三种分割线：

使用三个连字符
```
xxxxxxxxxx
---
```
使用三个星号
```
xxxxxxxxxx
***
```
使用三个下划线
```
xxxxxxxxxx
___
```

可以使用更多的符号，但最少三个；符号之间可以有空格

避免使用过度。

数学公式

在Markdown中，数学公式通过LaTeX语法来显示。

基本语法结构

命令：以反斜杠开头，如 \alpha 、\sum
参数：用花括号{}包围，如 \frac{a}{b}
下标：使用 _ ，如 x_1
上标：使用 ^ ，如 x^2
分组：用花括号将多个字符组合，如 x_{i+1}

常用LaTeX命令


xxxxxxxxxx
\alpha, \beta, \gamma  % 希腊字母
\sum, \prod, \int      % 求和、乘积、积分
\frac{分子}{分母}      % 分数
\sqrt{表达式}          % 平方根
\sqrt[n]{表达式}       % n次根

【Typora不支持行内公式】

块级公式以$$开头，Typora会自动补齐尾部的$$，并生成公式块。


xxxxxxxxxx
$$
E = mc^2
$$

E = mc^2


xxxxxxxxxx
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

多行公式

使用align环境创建多行对齐公式：


xxxxxxxxxx
$$
    \begin{align}
    f(x) &= ax^2 + bx + c \\
    f'(x)  &= 2ax + b \\
    f''(x)  &= 2a
    \end{align}      
    $$

\begin{align} f(x) &= ax^2 + bx + c \\ f'(x) &= 2ax + b \\ f''(x) &= 2a \end{align}

常用数学符号

基本运算符号

加减乘除：+、- 、\times、\div
分数：\frac{a}{b}
根号：\sqrt{x}，\sqrt[n]{x}
指数：x^2，e^{i\pi}

比较符号

等于： = 、\neq（不等于）、\equiv（恒等于）
大小： < 、> 、\leq（小于等于）、 \geq（大于等于）
约等于： \approx（双波浪）、 \sim（单波浪）

集合符号

属于： \in 、\notin
包含：\subset、\supset
交并：\cap 、\cup
空集： \emptyset

希腊字母

常用希腊字母及其LaTeX表示：

字母	代码	字母	代码
A	`A`	α	`\alhpa`
B	`B`	β	`\beta`
Γ	`\Gamma`	γ	`\gamma`
Δ	`\Delta`	δ	`\delta`
E	`E`	ϵ	`\epsilon`
Z	`Z`	ζ	`\zeta`
H	`H`	η	`\eta`
Θ	`\Theta`	θ	`\theta`
I	`I`	ι	`\iota`
K	`K`	κ	`\kappa`
Λ	`\Lambda`	λ	`\lambda`
M	`M`	μ	`\mu`
N	`N`	ν	`\nu`
Ξ	`\Xi`	ξ	`\xi`
O	`O`	ο	`\omicron`
Π	`\Pi`	π	`\pi`
P	`P`	ρ	`\rho`
Σ	`\Sigma`	σ	`\sigma`
T	`T`	τ	`\tau`
Υ	`\Upsilon`	υ	`\upsilon`
Φ	`\Phi`	ϕ	`\phi`
X	`X`	χ	`\chi`
Ψ	`\Psi`	ψ	`\psi`
Ω	`\v`	ω	`\omega`

特殊函数和符号

三角函数：\sin, \cos, \tan
对数：\log, \ln
极限：\lim_{x \to 0}
求和：\sum_{i=1}^{n}
积分：\int_{a}^{b}
无穷：\infty

矩阵

使用matrix环境：


xxxxxxxxxx
$$
    \begin{pmatrix}
    a & b \\
    c & d
    \end{pmatrix}
    $$

\begin{vmatrix} a & b \\ c & d \end{vmatrix}

不同括号类型的矩阵：

pmatrix：圆括号
bmatrix：方括号
vmatrix：行列式

图表绘制

Mermaid是Markdown中最流行的图表工具之一。

支持的图表类型：

流程图（Flowchart）
序列图（Sequence Diagram）
类图（Class Diagram）
状态图（State Diagram）
甘特图（Gantt Chart）
饼图（Pie Chart）

流程图


xxxxxxxxxx
```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|Yes| C[执行操作A]
    B ==>|No| D[执行操作B]
    C --> E>结束]
    D -.-> E
```

流程图方向：

TD或TB：从上到下
BT：从下到上
RL：从右到左
LR：从左到右

节点形状：

[方形]：矩形
(圆角矩形)：圆角矩形
{菱形}：菱形
((圆形))：圆形
>旗帜形]：旗帜形

连接线类型：

--> 实线箭头
-.-> 虚线箭头
==> 粗实线箭头
-- 实线
-. 虚线

时序图和甘特图

时序图


xxxxxxxxxx
```mermaid
sequenceDiagram
    participant A as 用户
    participant B as 系统
    participant C as 数据库
    
    A->>B: 登录请求
    B->>C: 验证用户信息
    C-->>B: 返回验证结果
    B-->>A: 登录成功/失败
```

时序图语法要点：

participant 定义参与者
->> 实线箭头
-->> 虚线箭头
note 添加注释

甘特图


xxxxxxxxxx
```mermaid
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析      :done,    des1, 2024-01-01,2024-01-15
    UI设计       :active,  des2, 2024-01-10, 30d
    section 开发阶段
    前端开发      :         dev1, after des2, 45d
    后端开发      :         dev2, 2024-02-01, 60d
    section 测试阶段
    单元测试      :         test1, after dev1, 15d
    集成测试      :         test2, after dev2, 10d
```

甘特图语法要点：

title 设置标题
dateFormat 定义日期格式
section 定义阶段
任务状态： done （已完成）、active （进行中）、crit （关键）

饼图


xxxxxxxxxx
```mermaid
pie
    title 浏览器市场份额
    "Chrome" : 65
    "Safari" : 15
    "Firefox" : 10
    "其他" : 10
```