Markdown学习笔记 on Hobin's Blog

1.1 标题

Thu, 09 Apr 2026 12:05:00 +0800

标题语法概览

Markdown 标题有两种常见写法：

ATX 风格：使用 #，支持 1 到 6 级标题（推荐）。
Setext 风格：使用 = 和 -，只支持 1、2 级标题。

ATX 风格（`#`）

这是最常用、兼容性最好的标题写法。

基本语法

1
2
3
4
5
6


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

渲染效果：

# 一级标题（示例）
## 二级标题（示例）
### 三级标题（示例）
#### 四级标题（示例）
##### 五级标题（示例）
###### 六级标题（示例）

书写规则

# 必须在行首。
# 与标题文字之间建议保留一个空格。
一般不建议在标题末尾再补很多 #（可读性较差）。

Setext 风格（`=` / `-`）

Setext 只支持两级标题：

一级标题：下一行用 ===
二级标题：下一行用 ---

1
2
3
4
5


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

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

这种写法在短文档中也很常见，但在复杂文档里通常不如 # 风格直观。

标题层级结构

标题层级应遵循从大到小的逻辑，不建议随意跳级。
良好的标题结构就像一本书的目录。

不推荐结构

1
2
3


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

常见错误

# 不在行首，导致无法识别为标题。
标题层级跳跃（如 # 后直接 ###），结构不清晰。
把普通短句都写成标题，导致文档层级过深、阅读困难。
同一篇文档混用过多风格（# 与 =/-）且无规律，影响一致性。

1.2 文本格式

Thu, 09 Apr 2026 12:05:00 +0800

文本格式语法概览

本节整理 Markdown 中最常见的文本格式能力：

换行与分段
强调（粗体、斜体、粗斜体）
分割线
删除线、下划线、高亮
脚注
行内代码

换行与分段

行内换行（行尾两个空格）

1
2


第一行文本
第二行文本

渲染效果：
第一行文本
第二行文本

分段（空一行）

1
2
3


第一段文本

第二段文本

渲染效果：
第一段文本

第二段文本

强调语法

Markdown 提供粗体、斜体和粗斜体的简洁写法。

粗体

使用 **文本** 或 __文本__。

1
2


这是 **粗体文字**（星号写法）
这是 __粗体文字__（下划线写法）

渲染效果：
这是 粗体文字（星号写法）
这是 粗体文字（下划线写法）

斜体

使用 *文本* 或 _文本_。

1
2


这是 *斜体文字*（星号写法）
这是 _斜体文字_（下划线写法）

渲染效果：
这是 斜体文字（星号写法）
这是 斜体文字（下划线写法）

粗斜体

使用 ***文本*** 或 ___文本___。

1
2


***粗斜体文本***
___粗斜体文本___

渲染效果：
粗斜体文本
粗斜体文本

分割线

一行中使用 3 个及以上的 *、- 或 _ 可创建分割线。
符号间可以带空格。

1
2
3
4
5


***
* * *
-----
- - -
___

渲染效果：

删除线、下划线与高亮

删除线

使用 ~~文本~~。

1

~~这段内容会显示为删除线~~

渲染效果：
~~这段内容会显示为删除线~~

下划线（HTML 写法）

标准 Markdown 没有原生下划线语法，通常使用 HTML 标签：

1

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

渲染效果：
带下划线文本

高亮（HTML 写法）

部分 Markdown 扩展支持高亮；为兼容性更稳，常用 <mark>：

1

这是 <mark>高亮文本</mark>

渲染效果：
这是高亮文本

脚注

脚注用于补充说明，正文中用引用标记，文末写定义。

1
2
3


这是一个脚注示例[^note-1]。

[^note-1]: 这是脚注内容。

渲染效果：
这是一个脚注示例¹。

行内代码

基本写法

使用一个反引号包围代码片段。

1
2
3


使用 `git commit` 命令提交代码。
变量 `userName` 存储用户名。
在终端中输入 `npm install` 安装依赖。

渲染效果：
使用 git commit 命令提交代码。
变量 userName 存储用户名。
在终端中输入 npm install 安装依赖。

代码中包含反引号

当内容本身包含反引号时，外层使用更多反引号包裹。

1

要显示反引号，使用 `` `code` `` 这样的格式。

渲染效果：
要显示反引号，使用 `code` 这样的格式。

常见错误

行尾换行忘记加两个空格，导致换行不生效。
强调符号前后紧贴中文或英文时，个别解析器可能出现渲染差异，建议留意结果。
把全角符号当作语法符号使用（如全角 ＊、＿），会导致格式失效。
在不支持脚注或 HTML 标签的解析器中，[^脚注]、<u>、<mark> 可能无法按预期渲染。

这是脚注内容。 ↩︎

1.3 列表

Thu, 09 Apr 2026 12:05:00 +0800

列表语法概览

Markdown 中常用的列表有 3 种：

无序列表：-、*、+
有序列表：1.、2.、3.
任务列表（GFM 扩展）：- [ ]、- [x]

无序列表

无序列表可以使用 -、* 或 + 作为标记，后面需要加一个空格。
实际写作中建议统一使用一种符号（通常是 -），保持文档风格一致。

1
2
3


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

渲染效果：

第一项
第二项
第三项

有序列表

有序列表使用“数字 + 英文句点 + 空格”。

1
2
3


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

渲染效果：

第一项
第二项
第三项

自动编号技巧

很多 Markdown 解析器会自动重排序号，因此你也可以都写成 1.。

1
2
3


1. 需求分析
1. 原型设计
1. 开发实现

渲染效果：

需求分析
原型设计
开发实现

列表嵌套

嵌套列表依赖缩进，建议使用 2 或 4 个空格，并在全文保持一致。

无序列表嵌套

1
2
3
4
5
6
7
8
9


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

渲染效果：

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

有序列表嵌套

1
2
3
4
5
6
7


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

渲染效果：

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

混合嵌套

1
2
3
4
5
6
7


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

渲染效果：

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

任务列表

任务列表属于 GitHub Flavored Markdown（GFM）扩展，常用于 TODO 清单。

基本语法

1
2
3


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

渲染效果：

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

实战示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


### 项目待办清单

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

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

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

渲染效果：

项目待办清单

设计阶段

需求分析
原型设计
UI 设计

开发阶段

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

测试阶段

单元测试
集成测试
用户验收测试

常见错误

列表标记后漏写空格，例如 -第一项，会导致列表不生效。
嵌套层级缩进不一致，导致结构错位。
无序列表混用 -、*、+，文档风格不统一。
任务列表的复选框写成 - [] 或 - [X ]，应使用 - [ ] 或 - [x]。

1.4 引用块

Thu, 09 Apr 2026 12:05:00 +0800

引用块语法概览

引用块（Blockquote）用于标记“引用内容”或“补充说明”。
核心写法是在行首使用 >，后面加一个空格。

1

> 这是一段引用

单级引用

基本写法

1
2


> 区块引用
> 学的不仅是技术，更是思路

渲染效果：

区块引用学的不仅是技术，更是思路

多行与多段落

多段落时，空行也建议带上 >，可读性更好，也更稳定。

1
2
3
4


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

渲染效果：

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

这是引用的第二段。

懒惰续行（可选写法）

CommonMark 支持“懒惰续行”：段落续行可以省略 >。
但为了兼容不同解析器，实际写作中仍建议每一行都写 >。

1
2
3


> 这是一个长引用，
包含多行内容，
这是懒惰续行写法。

渲染效果：

这是一个长引用，包含多行内容，这是懒惰续行写法。

多级嵌套引用

一个 > 是第一层，两个 >> 是第二层，三个 >>> 是第三层。

1
2
3


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

渲染效果：

最外层

第一层嵌套

第二层嵌套

实际应用示例

1
2
3
4
5


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

渲染效果：

用户反馈：这个功能很有用！

开发团队回复：感谢反馈，我们会继续优化。

项目经理补充：预计下个版本会增加更多改进。

引用块与其他元素组合

引用块中使用列表

1
2
3
4
5
6
7
8


> 今日计划：
> 1. 阅读文档
> 2. 整理笔记
> 3. 输出总结
>
> 待办清单：
> - 完成示例
> - 提交修改

渲染效果：

今日计划：

阅读文档

整理笔记

输出总结

待办清单：

完成示例

提交修改

列表中使用引用块

在列表项中放引用块时，要注意缩进对齐。

1
2
3
4


1. 第一项
 > 这是第一项的补充说明
 > 这是第二行说明
2. 第二项

渲染效果：

第一项

这是第一项的补充说明这是第二行说明
第二项

引用块中使用代码块

1
2
3
4
5
6


> 执行以下命令启动项目：
>
> ```bash
> npm install
> npm run dev
> ```

渲染效果：

执行以下命令启动项目：
1
2
npm install
npm run dev

常见错误

> 后面忘记加空格，导致语法可读性差或渲染不一致。
使用全角符号 ＞ 代替半角 >，导致引用失效。
列表中嵌套引用时缩进不足，导致结构错位。
多段落引用时空行没带 >，在部分解析器中可能意外“跳出引用块”。

1.5 代码

Thu, 09 Apr 2026 21:25:00 +0800

代码语法概览

Markdown 中常用的代码相关语法有 4 类：

行内代码：反引号包裹
围栏代码块：使用 ``` 或 ~~~
缩进代码块：每行前 4 个空格（或 1 个 Tab）
diff 代码块：```diff 用于展示增删改

行内代码

在段落中表示函数名、变量名、命令时，使用单反引号 ` 包裹。

1

请调用 `printf()` 输出结果。

渲染效果：
请调用 printf() 输出结果。

行内代码中包含反引号

原则：内容里有几个连续反引号，外层就用更多个反引号包裹。

1

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

渲染效果：
使用 `反引号` 包裹代码

1

```这里包含 `` 双反引号 ```

渲染效果：
这里包含 `` 双反引号

代码块

缩进式代码块

每行前添加 4 个空格（或 1 个 Tab）即可形成代码块。

1
2
3
4
5
6
7


正常文本段落

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

继续正常文本

渲染效果：
正常文本段落

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

继续正常文本

围栏代码块（三反引号）

推荐写法：使用三反引号，并在首行声明语言类型，方便语法高亮。

1
2
3
4
5


```javascript
document.addEventListener("DOMContentLoaded", () => {
 console.log("Hello Markdown");
});
```

渲染效果：

1
2
3


document.addEventListener("DOMContentLoaded", () => {
 console.log("Hello Markdown");
});

代码块嵌套

在文档里讲解 Markdown 语法时，常常需要“在代码块里展示代码块”。

核心原则：外层围栏符号数量要大于内层。

外层使用更多反引号

1
2
3
4
5


````markdown
```javascript
console.log("nested block");
```
````

渲染效果：

1
2
3


```javascript
console.log("nested block");
```

外层使用波浪号 `~~~`

1
2
3
4
5


~~~markdown
```javascript
console.log("nested block");
```
~~~

渲染效果：

1
2
3


```javascript
console.log("nested block");
```

代码差异对比（diff）

diff 代码块用于展示版本变更：
+ 表示新增，- 表示删除。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


```diff
function calculateTotal(items) {
- let total = 0;
+ let total = 0.0;

 for (const item of items) {
- total += item.price;
+ total += Number(item.price);
 }

+ // 保留两位小数
+ total = Math.round(total * 100) / 100;
 return total;
}
```

渲染效果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


function calculateTotal(items) {
- let total = 0;
+ let total = 0.0;

 for (const item of items) {
- total += item.price;
+ total += Number(item.price);
 }

+ // 保留两位小数
+ total = Math.round(total * 100) / 100;
 return total;
}

常见错误

行内代码分隔符数量不够，导致反引号提前闭合。
代码块前后缺少空行，影响渲染稳定性（不同解析器表现可能不同）。
外层与内层都用三反引号，造成嵌套代码块断裂。
混用 Tab 和空格，导致缩进式代码块格式错乱。

1.6 链接

Thu, 09 Apr 2026 22:23:00 +0800

链接基础语法

Markdown 中最常见的链接写法有 3 种：

行内链接：[链接文字](URL)
带标题的链接：[链接文字](URL "可选标题")
自动链接：<URL>

1. 行内链接

1

这是一个链接 [Hobin's Blog](https://bhb6.top)

渲染效果：
这是一个链接 Hobin’s Blog

2. 带标题的链接

标题会在鼠标悬停时显示。

1
2


欢迎访问 [GitHub](https://github.com "全球最大的代码托管平台") 官网
这是 [百度搜索](https://www.baidu.com "百度一下，你就知道")

渲染效果：
欢迎访问 GitHub 官网
这是百度搜索

3. 自动链接

1

<https://bhb6.top>

渲染效果：
https://bhb6.top

参考式链接

参考式链接适合在文档中重复使用同一 URL，让正文更干净。

基本语法

1
2
3


[链接文字][参考标签]

[参考标签]: URL "可选标题"

示例：

1
2
3
4
5


这个链接用 google 作为参考标签 [Google][google]
这个链接用 hobin 作为参考标签 [Hobin][hobin]

[google]: https://www.google.com/ "Google 搜索"
[hobin]: https://bhb6.top/ "Hobin 的博客"

渲染效果：
这个链接用 google 作为参考标签 Google
这个链接用 hobin 作为参考标签 Hobin

简化写法

当参考标签与链接文字相同时，可以省略第二个方括号。

1
2
3


我喜欢使用 [GitHub][] 来管理代码。

[GitHub]: https://github.com/

常见错误

把 [] 或 () 写成全角符号，会导致链接无法解析。
URL 和可选标题之间必须有空格：(URL "标题")。
方括号与圆括号必须成对出现，少一个都会失效。
示例中建议优先使用 https://，避免使用不安全的 http://。

Markdown学习笔记 on Hobin's Blog

1.1 标题

标题语法概览

ATX 风格（#）

基本语法

书写规则

Setext 风格（= / -）

标题层级结构

推荐结构

不推荐结构

常见错误

1.2 文本格式

文本格式语法概览

换行与分段

行内换行（行尾两个空格）

分段（空一行）

强调语法

粗体

斜体

粗斜体

分割线

删除线、下划线与高亮

删除线

下划线（HTML 写法）

高亮（HTML 写法）

脚注

行内代码

基本写法

代码中包含反引号

常见错误

1.3 列表

列表语法概览

无序列表

有序列表

自动编号技巧

列表嵌套

无序列表嵌套

有序列表嵌套

混合嵌套

任务列表

基本语法

实战示例

项目待办清单

设计阶段

开发阶段

测试阶段

常见错误

1.4 引用块

引用块语法概览

单级引用

基本写法

多行与多段落

懒惰续行（可选写法）

多级嵌套引用

实际应用示例

引用块与其他元素组合

引用块中使用列表

列表中使用引用块

引用块中使用代码块

常见错误

1.5 代码

代码语法概览

行内代码

行内代码中包含反引号

代码块

缩进式代码块

围栏代码块（三反引号）

代码块嵌套

外层使用更多反引号

外层使用波浪号 ~~~

代码差异对比（diff）

常见错误

1.6 链接

链接基础语法

1. 行内链接

2. 带标题的链接

3. 自动链接

参考式链接

基本语法

简化写法

ATX 风格（`#`）

Setext 风格（`=` / `-`）

外层使用波浪号 `~~~`