写博客时Markdown列表总用不对 这篇完整制作指南帮你彻底搞懂有序列表和无序列表的正确写法
你是不是也有过这种经历——兴致勃勃写完一篇文章，粘贴到博客平台，结果列表全乱了？要么缩进错乱，要么数字序号莫名消失，要么无序列表变成了一堆奇怪的符号。别急，这篇文章就是为你准备的。我会用最直白的方式，带你彻底搞懂Markdown列表的每一项规则。
先说说为啥列表总出错
我刚开始学写博客的时候，也踩过不少坑。有一次我发了篇技术教程，里面的步骤列表全乱了，评论区一堆人问”第二步是哪一步”。后来我才发现问题出在空格和缩进上——这玩意儿看着简单，其实暗藏玄机。
Markdown列表的核心就两个：无序列表和有序列表。前者用符号标记，后者用数字标记。但它们背后有一套严格的语法规范，违反任何一个细节，渲染结果就可能不是你想要的样子。
无序列表：那些小小的圆点
无序列表是最常用的列表类型，通常用来列举没有顺序要求的项目。
基础写法
最简单的无序列表，用 -、+ 或 * 开头都可以：
- 苹果
- 香蕉
- 橙子
渲染效果：
- 苹果
- 香蕉
- 橙子
注意，减号后面一定要有空格，不然Markdown无法识别。下面这个写法是错误的：
-苹果
-香蕉
-橙子
渲染出来可能是一坨混乱的文字，而不是列表。
嵌套列表：让层次更清晰
有时候我们需要表达层级关系，比如一个主题下面有几个子主题。这时候就需要嵌套列表：
- 水果
- 苹果
- 香蕉
- 橙子
- 蔬菜
- 胡萝卜
- 西兰花
- 菠菜
渲染效果：
- 水果
- 苹果
- 香蕉
- 橙子
- 蔬菜
- 胡萝卜
- 西兰花
- 菠菜
这里的关键是缩进。子项前面要有两个空格（或者一个制表符）。空格不够，嵌套就失效了。
常见错误：缩进不对齐
很多新手会犯这样的错误：
- 第一层
- 第二层（以为和上面平级）
- 第三层
渲染结果可能是：
- 第一层
- 第二层（以为和上面平级）
- 第三层
看起来好像没问题，但实际上第二行和第三行可能被当成同一个层级，导致缩进错乱。
正确的写法应该是：
- 第一层
- 第二层
- 第三层
或者：
- 第一层
- 第二层
- 第一层（回到同层级）
带内容的列表项
有时候列表项内容比较长，需要换行。这时候要小心：
- 这是一段很长的描述文字，
包含了多个句子，
表达了丰富的内容。
注意：第二行和第三行前面要有四个空格（两个用于列表嵌套，两个用于段落续行）。
错误写法：
- 这是一段很长的描述文字，
包含了多个句子，
表达了丰富的内容。
这样渲染出来可能会断开，后面的文字变成新的段落。
有序列表：数字的力量
有序列表用来表达有顺序关系的内容，比如步骤、排名、优先级等。
基础写法
有序列表用数字加点开头：
1. 第一步
2. 第二步
3. 第三步
渲染效果：
- 第一步
- 第二步
- 第三步
重要提示：数字其实不重要，Markdown会自动按顺序编号。你可以随便写：
1. 第一步
5. 第二步
3. 第三步
渲染结果依然是：
- 第一步
- 第二步
- 第三步
这是很多新手不知道的冷知识。
嵌套有序列表
有序列表也可以嵌套，语法和无序列表类似：
1. 准备工作
1. 下载工具
2. 安装依赖
3. 配置环境
2. 开始操作
1. 导入数据
2. 处理数据
3. 保存结果
3. 完成
1. 检查输出
2. 提交报告
渲染效果：
- 准备工作
- 下载工具
- 安装依赖
- 配置环境
- 开始操作
- 导入数据
- 处理数据
- 保存结果
- 完成
- 检查输出
- 提交报告
常见错误：数字编号混乱
有些人在写有序列表时，会犯这样的错误：
1. 第一步
1. 第二步
1. 第三步
虽然渲染结果看起来没问题，但这是不规范写法。正确的做法是每行递增数字，或者只写第一行，让Markdown自动处理。
混合使用：有序和无序列表一起上
有时候一篇文章里既有有序列表，又有无序列表。这时候要注意它们之间的转换：
示例：教程文章的结构
# 如何制作一杯咖啡
## 准备材料
- 咖啡豆
- 磨豆机
- 滤纸
- 热水壶
## 制作步骤
1. 磨豆
- 选择适合的粗细度
- 不要磨得太细
- 也不要磨得太粗
2. 冲泡
- 水温控制在90-95度
- 浸泡时间约4分钟
3. 享用
- 加入牛奶或糖
- 慢慢品味
渲染效果：
如何制作一杯咖啡
准备材料
- 咖啡豆
- 磨豆机
- 滤纸
- 热水壶
制作步骤
- 磨豆
- 选择适合的粗细度
- 不要磨得太细
- 也不要磨得太粗
- 冲泡
- 水温控制在90-95度
- 浸泡时间约4分钟
- 享用
- 加入牛奶或糖
- 慢慢品味
特殊情况：列表中间插入代码块
这是最容易出错的地方。当列表项中包含代码块时，缩进会变得复杂：
1. 安装依赖
运行以下命令：
```bash
npm install express
npm install mongoose
- 创建项目结构
渲染效果：
1. 安装依赖
运行以下命令：
```bash
npm install express
npm install mongoose
- 创建项目结构
关键点：代码块前面要有三个制表符或十二个空格（列表缩进两级 + 代码块缩进一级）。
错误写法：
1. 安装依赖
运行以下命令：
```bash
npm install express
npm install mongoose
- 创建项目结构
这样会导致代码块缩进不够，渲染时可能会断开。
## 列表中的其他元素
### 列表项中包含链接
```markdown
- [GitHub](https://github.com) 是一个代码托管平台
- [GitLab](https://gitlab.com) 提供了完整的CI/CD功能
- [Bitbucket](https://bitbucket.org) 与Jira集成得非常好
渲染效果：
列表项中包含图片
1. 第一步：打开浏览器
2. 第二步：访问网站
注意：图片前面要有适当的缩进，否则可能会破坏列表结构。
列表项中的特殊字符
如果列表项中包含特殊的Markdown字符（如 *、#、_ 等），需要转义：
- 使用 \* 来表示重点
- 使用 \# 来表示标题
- 使用 \_ 来表示斜体
不同平台的兼容性
虽然Markdown是一种通用语法，但不同平台的渲染结果可能略有差异：
GitHub
GitHub对Markdown列表的支持非常好，符合标准规范。
知乎
知乎的Markdown编辑器对缩进比较敏感，建议用两个空格缩进。
博客园
博客园可能对某些特殊字符的处理方式不同，测试时需要注意。
掘金
掘金支持较新的Markdown特性，但列表嵌套时建议用标准写法。
实战演练：完整的列表示例
下面是一个完整的示例，展示了各种列表的用法：
# Markdown列表完全指南
## 基础无序列表
- 第一项
- 第二项
- 第三项
## 基础有序列表
1. 第一步
2. 第二步
3. 第三步
## 嵌套列表
### 第一层
- 水果
- 苹果
- 香蕉
- 橙子
- 蔬菜
- 胡萝卜
- 西兰花
- 菠菜
### 第二层（有序嵌套）
1. 准备工作
- 下载工具
- 安装依赖
2. 执行操作
- 导入数据
- 处理数据
- 保存结果
3. 验证结果
- 检查输出
- 提交报告
## 列表中的特殊元素
### 链接
- [官方网站](https://example.com)
- [文档](https://docs.example.com)
### 代码
1. 安装依赖
```bash
npm install
- 运行项目
npm start
总结
列表是Markdown中最常用的元素之一。掌握正确的写法，能让你的文章结构更清晰，阅读体验更好。
## 常见错误及解决方案
### 错误1：列表中间有空行
```markdown
- 第一项
- 第二项
渲染结果可能是两个独立的列表，而不是一个连续列表。
解决方案：去掉空行。
错误2：缩进不一致
- 第一项
- 第二项
- 第三项（缩进少一个空格）
渲染结果可能混乱。
解决方案：保持一致的缩进。
错误3：列表项内容太长
- 这是一段很长的描述文字，包含了多个句子，表达了丰富的内容，让读者能够全面理解这个主题。
渲染结果可能缩进奇怪。
解决方案：换行时保持适当缩进。
错误4：有序列表数字从1开始
有些新手会这样写：
1. 第一步
1. 第二步
1. 第三步
虽然能渲染，但不规范。
解决方案：递增数字，或只写第一行。
快速参考卡
为了方便记忆，这里整理了一个快速参考表：
| 类型 | 符号 | 示例 |
|---|---|---|
| 无序列表 | - + * |
- 项目一 |
| 有序列表 | 数字. |
1. 项目一 |
| 嵌套无序 | 两个空格 | - 子项目 |
| 嵌套有序 | 两个空格 | 1. 子项目 |
| 列表内代码 | 三个制表符 | \t\t\t代码块 |
最后的小建议
写博客的时候，建议你用Markdown编辑器实时预览。这样能及时发现列表错误。推荐的编辑器有：
- Typora：所见即所得，体验很好
- VS Code + Markdown插件：开发者的首选
- StackEdit：在线编辑器，无需安装
另外，多练习、多测试，是掌握Markdown列表最快的方法。不要怕犯错，每一次错误都是学习的机会。
记住，好的列表能让文章结构清晰，读者阅读起来也更轻松。花点时间打磨列表格式，对你的读者来说是一种尊重，也是对你文章质量的提升。
希望这篇文章能帮你彻底解决Markdown列表的问题。如果还有疑问，欢迎在评论区留言，我会尽力解答。Happy writing！