teaching

只讲最常用的办法来实现某种写法,像一些非常冷门的方法本文不讲,基本都会被另一种常用的写法实现.

Title

Usage

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

重要注意事项：

标题写法

符号与文字间的空格：# 号和标题文字之间必须有一个空格。这是标准的 Markdown 语法要求。

# 正确写法
#错误写法

标题的嵌套结构

标题的层次结构应该遵循逻辑顺序，不应该跳级使用。良好的标题结构就像一本书的目录：

推荐的层次结构：

# 主题：人工智能概述

## 第一部分：基础概念
### 什么是人工智能
### 发展历史
#### 早期发展（1950-1980）
#### 现代发展（1980至今）

## 第二部分：应用领域
### 自然语言处理
### 计算机视觉
### 机器学习
#### 监督学习
#### 无监督学习
#### 强化学习

避免的错误结构：

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

标题编号的最佳实践

自动编号 vs 手动编号：

许多 Markdown 处理器和编辑器支持自动生成标题编号，因此在源码中通常不需要手动添加编号：

# 引言
## 背景
## 目标
# 方法论
## 数据收集
## 分析方法

标题锚点：

大多数 Markdown 处理器会自动为标题创建锚点（anchor），便于页面内跳转：

[跳转到方法论部分](#方法论)

标题长度建议：

• 保持标题简洁明了，一般不超过 10 个汉字或 20 个英文字符

• 使用描述性词语，避免模糊的标题如"其他"、"杂项"

• 可以使用冒号来分隔主题和副主题

文本格式

换行用法

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格 或者 回车(常用)。

字体用法

文本强调是写作中的重要技巧，Markdown 提供了简洁的方式来实现粗体和斜体效果。

Markdown 可以使用以下几种字体：粗体和斜体。

**粗体语法：**使用两个星号 ** (常用) 或两个下划线 __ 包围文字：

这是**粗体文字**使用星号

**斜体语法：**使用一个星号 * (常用) 或一个下划线 _ 包围文字：

这是*斜体文字*使用星号

**粗斜体组合：**使用三个星号 *** (常用) 或三个下划线 ___。

***粗斜体文本***

列表

无序列表

无序列表使用星号(*)、加号(+)或是**减号(-)**作为列表标记，这些标记后面要添加一个空格，然后再填写内容：

* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项


- 第一项
- 第二项
- 第三项

Selection suggestions:

• 建议统一使用减号 -，因为它在视觉上更清晰

• 在同一文档中保持一致的标记方式

• 标记符号后必须有一个空格

有序列表

Usage

有序列表用于展示有顺序要求的步骤或项目。

有序列表使用数字并加上 . 号来表示，如：

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

Precautions

数字可以不连续:

Markdown 会自动修正数字顺序：

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

从指定数字开始：(但必须连续)

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

列表嵌套

嵌套规则：

• 子列表需要缩进 2-4 个空格（推荐 4 个,即 1 个TAB）

• 保持一致的缩进长度

• 可以无限层嵌套，但实际使用中建议不超过 3 层

列表嵌套技巧

列表可以嵌套使用，创建多层次的结构：

无序列表嵌套：

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

有序列表嵌套：

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

混合嵌套：

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

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

任务列表（复选框列表）

任务列表是 GitHub 风格 Markdown 的扩展功能，现在被广泛支持：

基本语法：

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

-,[,]以及后面的文字之间都有一个空格.

实际应用示例：

## 项目待办清单

### 设计阶段
- [x] 需求分析
- [x] 原型设计
- [ ] UI 设计

### 开发阶段
- [ ] 前端开发
  - [x] 页面布局
  - [ ] 交互功能
  - [ ] 响应式适配
- [ ] 后端开发
  - [ ] 数据库设计
  - [ ] API 开发
  - [ ] 性能优化

### 测试阶段
- [ ] 单元测试
- [ ] 集成测试
- [ ] 用户验收测试

使用技巧：

• 方括号内的空格和 x 很重要： 和 x

• 可以与嵌套列表结合使用

• 在项目管理、学习计划、生活清单中特别有用

• 某些编辑器支持点击复选框来切换状态

高级列表技巧

列表项中包含多段内容：

1. 第一项

   这是第一项的详细说明，需要与列表项对齐缩进。
   
   还可以包含第二段内容。

2. 第二项

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

列表项中的换行：

- 这是一个很长的列表项，
  需要换行显示，注意第二行需要与第一行对齐
- 另一个列表项

通过掌握这些基础语法，你已经能够创建结构清晰、格式规范的 Markdown 文档了。这些语法是日常写作中最常用的，熟练掌握它们将大大提高你的文档编写效率。

引用块

引用块用于突出显示重要信息、引用他人观点或创建视觉层次。

单级引用的使用

基本语法：

Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号：

> 区块引用1
> 区块引用2

多行引用：

> 这是引用的第一行。
> 这是引用的第二行。
> 
> 这是引用的第二段。

简化写法(不推荐)：

只在第一行使用 > ，其余行会自动包含在引用中：

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

多级嵌套引用

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

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

实际应用示例：

> **用户反馈**：这个功能很有用！
> 
> > **开发团队回复**：感谢您的反馈，我们会继续优化。
> > 
> > > **项目经理补充**：预计下个版本会有更多改进。

引用块内的其他元素

区块中使用列表

区块中使用列表实例如下：

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

列表中使用区块

如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。

列表中使用区块实例如下：

- 第一项
    > 区块引用1
    > 区块引用2
- 第二项

其他元素

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

包含标题：

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

包含代码：

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

包含链接和图片：

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

引用的最佳实践

名言警句引用

> "在软件开发中，最昂贵的错误就是构建正确的系统错误的方式，或者构建错误的系统正确的方式。"
> 
> — Barry Boehm，软件工程专家

重要信息提示

> ✅ **成功**
> 
> 配置已保存并生效。系统将在下次重启时应用新设置。


> ⚠️ **警告**
> 
> 此操作不可逆转，请确保已备份重要数据。


> ❌ **错误**
> 
> 连接数据库失败，请检查网络连接或联系系统管理员。


> ℹ️ **提示**
> 
> 首次使用需要进行账户验证，验证邮件已发送到您的邮箱。

文档结构中的引用

章节摘要：

# 第一章：项目概述

> **本章要点**
> 
> - 了解项目背景和目标
> - 掌握核心功能特性
> - 熟悉技术架构设计

版本更新说明：

## v2.1.0 更新内容

> **重大变更**
> 
> ⚠️ API 接口路径已调整，旧版本客户端需要更新
> 
> 详见 [迁移指南](./migration-guide.md)

代码

Markdown 提供了多种方式来展示代码，从简单的行内代码到复杂的代码块，满足不同场景下的代码展示需求。

行内代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`），例如：

C++23打印使用`std::print()` 函数

常见用法示例：

• 函数名：使用 console.log() 输出信息

• 变量名：将值赋给 userName 变量

• 命令行：运行 npm install 安装依赖

• 键盘按键：按 Ctrl+C 复制内容

• 文件名：编辑 index.html 文件

特殊字符转义

当需要在行内代码中显示反引号或其他特殊字符时，需要进行转义处理。

1. 显示反引号的方法：

*使用**双反引号**包围**单反引号**：*

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

![](https://cdn.tungchiahui.cn/tungwebsite/assets/images/2025/12/25/1787040282795-b65487ef.webp)

2. 其他特殊字符处理：
<!-- i18n-missing: en-us -->

• HTML 标签：
  元素

• 数学符号：计算 x + y = z

• 特殊符号：使用   表示空格

代码区块

缩进式代码块(几乎不用)

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

Syntax format:

正常文本段落

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

    #include <print>

    int main(int argc,char ** argv)
    {
        (void)argc;
        (void)argv;
        
        std::print("Hello World!\n");
        std::println("Hello World!");
        return 0;
    }

三反引号代码块(常用)

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

不指定语言

多行代码内容

可以包含空行

保持原有缩进

Notes:

• 缩进式代码块前后需要空行分隔

• 所有代码行必须保持一致的缩进

• 不支持语法高亮

• 在列表中使用时需要8个空格缩进

语言标识和语法高亮

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

例如C++:

#include <print>

int main(int argc,char ** argv)
{
    (void)argc;
    (void)argv;
        
    std::print("Hello World!\n");
    std::println("Hello World!");
    return 0;
}

常用编程语言

|语言 / 类型|推荐标识符|常用标识符 / 别名|Here is the translation of the provided Simplified Chinese Markdown fragment into natural American English, following all specified rules.

Example|

|---|---|---|---| |C|c|C|```c| |C++|cpp|c++, cc, cxx|```cpp| |C#|csharp|cs, c#|```csharp| |Objective-C|objective-c|objc|```objective-c| |Java|java|—|```java| |Kotlin|kotlin|kt|```kotlin| |Python|python|py|```python| |JavaScript|javascript|js|```javascript| |TypeScript|typescript|ts|```typescript| |JSX|jsx|—|```jsx| |TSX|tsx|—|```tsx| |Go|go|golang|```go| |Rust|rust|rs|```rust| |Swift|swift|—|```swift| |Dart|dart|—|```dart| |PHP|php|—|```php| |Ruby|ruby|rb|```ruby| |Lua|lua|—|```lua| |Perl|perl|pl|```perl| |Scala|scala|—|```scala| |Groovy|groovy|—|```groovy| |Haskell|haskell|hs|```haskell| |Elixir|elixir|ex|```elixir| |Erlang|erlang|erl|```erlang| |Julia|julia|jl|```julia| |R|r|—|```r| |MATLAB|matlab|—|```matlab| |Fortran|fortran|f90, f95|```fortran| |Assembly|asm|assembly|```asm| |x86 Assembly|x86asm|x86|```x86asm| |WebAssembly|wasm|wat|```wasm| |Solidity|solidity|sol|```solidity| |Verilog|verilog|v|```verilog| |SystemVerilog|systemverilog|sv|```systemverilog| |VHDL|vhdl|—|```vhdl|

Web / 数据格式

|语言 / 类型|推荐标识符|常用标识符 / 别名|Here is the translation of the provided Simplified Chinese Markdown fragment into natural American English, following all specified rules.

Example|

|---|---|---|---| |HTML|html|—|```html| |CSS|css|—|```css| |SCSS|scss|—|```scss| |Sass|sass|—|```sass| |Less|less|—|```less| |Vue|vue|—|```vue| |Svelte|svelte|—|```svelte| |JSON|json|—|```json| |JSON5|json5|—|```json5| |YAML|yaml|yml|```yaml| |XML|xml|—|```xml| |TOML|toml|—|```toml| |INI|ini|—|```ini| |CSV|csv|—|```csv| |GraphQL|graphql|gql|```graphql| |Protocol Buffers|protobuf|proto|```protobuf| |Markdown|markdown|md|```markdown| |reStructuredText|rst|—|```rst| |LaTeX|latex|tex|```latex| |SVG|svg|xml|```svg|

Shell / 命令行

|语言 / 类型|推荐标识符|常用标识符 / 别名|Here is the translation of the provided Simplified Chinese Markdown fragment into natural American English, following all specified rules.

Example|

|---|---|---|---| |Bash|bash|sh, shell|```bash| |POSIX Shell|sh|shell|```sh| |Zsh|zsh|—|```zsh| |Fish|fish|—|```fish| |PowerShell|powershell|ps1|```powershell| |Windows Batch|batch|bat, cmd|```batch| |Console / 终端会话|console|shell-session|```console|

|纯文本|text|plaintext, txt|```text|

构建 / DevOps / 配置

|语言 / 类型|推荐标识符|常用标识符 / 别名|Here is the translation of the provided Simplified Chinese Markdown fragment into natural American English, following all specified rules.

Example|

|---|---|---|---| |CMake|cmake|—|```cmake| |Makefile|makefile|make|```makefile| |Dockerfile|dockerfile|docker|```dockerfile| |Nginx|nginx|—|```nginx| |Apache|apache|apacheconf|```apache| |Git Config|gitconfig|—|```gitconfig| |Git Ignore|gitignore|—|```gitignore| |Diff|diff|patch|```diff| |Terraform|terraform|tf, hcl|```terraform| |HCL|hcl|—|```hcl| |Ansible|yaml|yml, ansible|```yaml| |GitHub Actions|yaml|yml|```yaml| |Kubernetes|yaml|yml|```yaml| |ROS 2 参数|yaml|yml|```yaml|

|ROS Launch XML|xml|—|```xml| |ROS Launch Python|python|py|```python|

数据库 / 查询语言

|语言 / 类型|推荐标识符|常用标识符 / 别名|Here is the translation of the provided Simplified Chinese Markdown fragment into natural American English, following all specified rules.

Example|

|---|---|---|---| |SQL|sql|—|```sql| |MySQL|sql|mysql|```sql| |PostgreSQL|sql|postgresql, pgsql|```sql| |SQLite|sql|sqlite|```sql| |PL/SQL|plsql|—|```plsql| |T-SQL|tsql|—|```tsql| |Cypher|cypher|—|```cypher| |MongoDB Shell|javascript|js|```javascript|

机器人 / 嵌入式常用

|语言 / 类型|推荐标识符|常用标识符 / 别名|Here is the translation of the provided Simplified Chinese Markdown fragment into natural American English, following all specified rules.

Example|

|---|---|---|---| |STM32 C|c|—|```c| |STM32 C++|cpp|c++, cxx|```cpp| |ROS 2 C++|cpp|c++, cxx|```cpp| |ROS 2 Python|python|py|```python| |CMakeLists.txt|cmake|—|```cmake| |package.xml|xml|—|```xml| |ROS 2 参数文件|yaml|yml|```yaml|

|URDF|xml|—|```xml| |Xacro|xml|xacro|```xml| |SDF|xml|sdf|```xml| |Gazebo World|xml|—|```xml| |Linux 命令|bash|sh, shell|```bash|

|终端命令 + 输出|console|shell-session|```console|

|Dockerfile|dockerfile|docker|```dockerfile| |Docker Compose|yaml|yml|```yaml| |JSON|json|—|```json| |TOML|toml|—|```toml| |INI / Conf|ini|—|```ini| |Makefile|makefile|make|```makefile| |Git Diff|diff|patch|```diff| |日志 / 普通输出|text|plaintext, txt|```text|

代码块的高级特性

行号显示

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

语法示例（部分支持）：

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));

或者使用：

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}`);

代码差异对比

主流方式:

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;
}

Git 风格的差异显示：

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

语言特定的差异对比：

// 之前的代码
const oldFunction = () => {
    var x = 10;  // ❌ 使用 var
    console.log("Value: " + x);  // ❌ 字符串拼接
}

// 改进后的代码  
const newFunction = () => {
    const x = 10;  // ✅ 使用 const
    console.log(`Value: ${x}`);  // ✅ 模板字符串
}

链接

链接是使 Markdown 文档具有交互性的关键元素。

掌握链接语法能让你创建内容丰富、易于导航的文档。

链接使用方法如下：

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

或者:

<链接地址>

比如一个简单的链接：

这是一个链接 [个人网站](https://www.tungchiahui.cn)

直接使用链接地址：

<https://www.tungchiahui.com>

设置可选标题：

这是一个链接 [个人网站](https://tungchiahui.com)
欢迎访问 [GitHub](https://github.com) 官网
这是 [百度搜索](https://baidu.com "百度一下，你就知道")

链接标题的作用：

• 当鼠标悬停在链接上时显示提示信息

• 对搜索引擎优化和无障碍访问有帮助

• 标题文字放在双引号、单引号或括号中都可以

邮箱与电话链接：

markdown联系我：[发送邮件](mailto:tungchiahui@gmail.com)
电话联系：[拨打电话](tel:+86-188-8888-8888)

自动链接识别

现代 Markdown 解析器通常支持自动识别 URL 和邮箱地址：

URL 自动识别：

markdown直接输入网址：https://www.tungchiahui.com
用尖括号包围：<https://www.tungchiahui.com>

邮箱自动识别(但建议邮箱还是要加mailto:)：

markdown联系邮箱：tungchiahui@gmail.com
或者：<tungchiahui@gmail.com>

Notes:

• 自动识别功能依赖于具体的 Markdown 解析器

• 为了确保兼容性，建议使用标准的链接语法

• 某些特殊字符可能影响自动识别

锚点链接的使用(常用)

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

跳转到标题：

## 目录
- [第一章：介绍](#第一章介绍)
- [第二章：安装](#第二章安装)
- [第三章：使用方法](#第三章使用方法)

# 第一章：介绍
这里是介绍内容...

# 第二章：安装
这里是安装说明...

# 第三章：使用方法
这里是使用说明...

锚点规则：

• 标题会自动生成锚点

• 锚点名称通常是标题的小写形式

• 空格替换为连字符

• 移除特殊字符

手动创建锚点：

<a id="custom-anchor"></a>
## 自定义锚点位置

[跳转到自定义位置](#custom-anchor)

页面顶部返回链接：

[回到顶部](#)

图片

Usage

图片能让文档更加生动和易于理解。

Markdown 的图片语法简洁而灵活。

Markdown 图片语法格式如下：

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

• 开头一个感叹号 !

• 接着一个方括号，里面放上图片的替代文字

• 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 'title' 属性的文字。

相对路径示例：

![项目截图](./images/screenshot.png)
![用户界面](../assets/ui-demo.jpg "用户界面演示")
![图标](images/icon.svg "应用图标")

绝对路径示例：

![本地图片](/home/username/Documents/image.png)
![系统截图](/home/username/Pictures/screenshot.png)

路径使用建议：

• 推荐使用相对路径，便于项目移植

• 建议创建专门的图片文件夹（如 images/、assets/）

• 使用有意义的文件名，便于管理

• 注意路径分隔符在不同操作系统中的差异

直接引用网络图片：

![Tung Chia-hui 个人图标](https://cdn.tungchiahui.cn/tungwebsite/assets/images/logo.png)

![ROBOCON 图标](https://ccdn.tungchiahui.cn/site-assets/images/sponsors/robocon-logo.webp "CURC ROBOCON")

网络图片注意事项：

• 确保图片 URL 的稳定性和可访问性

• 注意图片的版权问题

• 考虑加载速度和网络环境

• 建议本地备份重要图片

图片 alt 文本的重要性

Alt 文本（替代文字）在图片无法显示时提供替代信息，同时对无障碍访问和 SEO 很重要：

好的 alt 文本示例：

![苹果公司总部大楼外观，现代玻璃幕墙建筑](./images/apple-headquarters.jpg)
![网站流量统计图表，显示过去六个月的访问量呈上升趋势](./charts/traffic-stats.png)
![用户登录界面，包含用户名和密码输入框](./screenshots/login-page.png)

避免的 alt 文本：

![图片](image.jpg)  // 太简单，没有描述性
![](image.jpg)      // 完全没有 alt 文本
![点击这里](image.jpg)  // 不描述图片内容

alt 文本最佳实践：

• 简洁但有描述性

• 描述图片的主要内容和用途

• 避免使用"图片"、"照片"等冗余词汇

• 对于装饰性图片，可以使用空的 alt 文本

• 考虑上下文，提供有意义的信息

图片尺寸控制（HTML方式）

标准 Markdown 不支持直接控制图片尺寸，但可以使用 HTML 标签。

使用 HTML img 标签：

<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;">

Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 标签。

<img src="https://cdn.tungchiahui.cn/tungwebsite/assets/images/logo.png" width="50%">

响应式图片：

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

图片对齐：

<!-- 居中对齐 -->
<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;">

图片居中和对齐(HTML方式)

方法一：HTML + CSS

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

方法二：使用 HTML 对齐属性

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

方法三：创建图片画廊

<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;">
</div>

性能优化建议：

• 优化图片大小和格式（WebP > PNG > JPEG）

• 使用适当的图片尺寸，避免在网页中缩放大图

• 考虑使用图片压缩工具

• 为不同设备准备不同尺寸的图片

链接和图片的高级用法

图片链接组合

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

基本语法：

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

实际示例：

[![GitHub项目截图](./images/project-screenshot.png)](https://github.com/username/project)
[![访问官网](https://cdn.tungchiahui.cn/tungwebsite/assets/images/logo.png)](https://tungchiahui.cn "点击访问官网")

常见应用场景：

<!-- 项目徽章 -->
[![Build Status](https://travis-ci.org/user/repo.svg?branch=master)](https://travis-ci.org/user/repo)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

<!-- 应用商店下载 -->
[![App Store](./images/app-store-badge.png)](https://apps.apple.com/app/your-app)
[![Google Play](./images/google-play-badge.png)](https://play.google.com/store/apps/details?id=com.yourapp)

表格

表格和引用是 Markdown 中重要的内容组织工具。

表格能够清晰地展示结构化数据，而引用则用于突出重要信息或引用他人观点。

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

Usage

语法格式如下：

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

以上代码显示结果如下：

语法要点：

• 表头和数据行之间必须有分隔线

• 分隔线至少需要三个连字符 ---

• 两端的竖线|是可选的，但建议保留以提高可读性

• 不需要严格对齐，但对齐后更美观

对齐方式

我们可以设置表格的对齐方式：

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

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

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

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

复杂表格的处理技巧

元格内容格式化

表格单元格内可以使用大部分 Markdown 语法：

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

处理长文本

当单元格内容较长时，可以使用以下技巧：

换行处理：

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

缩写和链接：

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

表格中的特殊字符

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

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

表格美化建议

使用 Emoji 和符号

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

分割线

分割线用于在视觉上分隔文档的不同部分，创建清晰的内容层次。

水平分割线的三种写法

Markdown 支持三种方式创建水平分割线：

1. 使用至少三个连字符(常用)：

---

2. 使用至少三个星号：

***

3. 使用至少三个下划线：

___

可以使用更多的符号，但三个是最小要求：

空格的影响：符号之间可以有空格。

- - - - -