Markdown 列表（完整教程）

Markdown 列表：让内容结构更清晰的实用技巧

在日常写作、技术文档编写或项目笔记整理中，我们常常需要展示一系列有序或无序的信息。比如列出功能点、操作步骤、配置项、学习计划等。这时候，Markdown 列表就是最高效、最简洁的工具之一。它不仅语法简单，还能在各种平台（如 GitHub、Typora、VS Code、Notion）中完美渲染，让信息一目了然。

你可能已经用过 Markdown 写过 README 文件，但未必深入理解它的列表机制。今天我们就来系统梳理一下 Markdown 列表的用法，从基础语法到高级技巧，手把手带你掌握这一核心技能。

无序列表：自由排列的项目清单

无序列表用星号（*）、加号（+）或减号（-）开头，表示一组没有明确顺序的项目。它们就像购物清单、待办事项，顺序不重要，重点是把内容列出来。

- 学习 Vue 3.0
- 熟悉 TypeScript
- 阅读源码文档
- 写一篇技术博客

这段代码渲染后会显示为：

学习 Vue 3.0
熟悉 TypeScript
阅读源码文档
写一篇技术博客

✅ 小贴士：虽然 *、+、- 都能创建无序列表，但建议统一使用一种符号，保持风格一致。通常推荐用 -，因为它的视觉辨识度高，且在多数编辑器中默认被识别为列表符号。

嵌套无序列表：层级分明的结构设计

有时候，一个大项下还包含多个子项。这时可以使用嵌套列表，通过缩进（4 个空格或 1 个 Tab）实现层级关系。

- 前端开发
  - HTML + CSS 基础
  - JavaScript 进阶
    - 闭包与作用域
    - 异步编程（Promise / async-await）
  - 框架学习
    - Vue 3.0
    - React 18
- 后端开发
  - Node.js 18
  - Express 框架
  - 数据库设计

渲染效果如下：

前端开发
- HTML + CSS 基础
- JavaScript 进阶
  - 闭包与作用域
  - 异步编程（Promise / async-await）
- 框架学习
  - Vue 3.0
  - React 18
后端开发
- Node.js 18
- Express 框架
- 数据库设计

💡 形象比喻：可以把嵌套列表想象成“文件夹结构”——外层是主文件夹，内层是子文件夹，每个子项都是一个具体的文件或任务。

有序列表：按步骤执行的清晰指引

当你需要强调顺序时，比如安装流程、开发流程、教程步骤，有序列表就非常合适。它使用数字加英文句点（1.、2.、3.）开头，自动编号，即使你手动修改数字，渲染时也会自动调整。

1. 下载 Node.js 18.17.0
2. 安装 npm 包管理器
3. 创建项目目录：mkdir my-project
4. 初始化项目：npm init -y
5. 安装依赖：npm install vue@3.3.4

渲染结果：

下载 Node.js 18.17.0
安装 npm 包管理器
创建项目目录：mkdir my-project
初始化项目：npm init -y
安装依赖：npm install vue@3.3.4

⚠️ 注意：虽然你写了 1.、2.，但如果中间插入新步骤，Markdown 会自动重新编号。所以你无需手动维护数字，只需写 1.、2. 就行，系统会自动处理。

有序列表的嵌套：复杂流程的分步拆解

当某个步骤本身包含多个子步骤时，嵌套有序列表非常有用。例如配置开发环境的流程：

1. 安装开发环境
   1. 下载并安装 Visual Studio Code
   2. 安装 Node.js 18.17.0
   3. 配置 Git 全局信息
      1. git config --global user.name "Your Name"
      2. git config --global user.email "your.email@example.com"
2. 初始化项目
   1. 创建项目文件夹
   2. 使用 npm init 创建 package.json
3. 安装核心依赖
   1. npm install vue@3.3.4 --save
   2. npm install @vue/cli -g

渲染后结构清晰，适合写教程或操作手册。

列表中嵌入代码与链接：提升信息密度

在 Markdown 列表中，你可以自由插入代码块、链接、图片等元素，让信息更丰富、更实用。

嵌入代码块

- 使用 Python 3.11 编写脚本
  - 示例代码：
    ```python
    def hello(name):
        print(f"Hello, {name}!")  # 打印欢迎信息
    hello("World")
    ```
- 运行命令：
  - python main.py

这段代码会渲染出带有语法高亮的代码块，非常适合技术文档。

嵌入链接

- 学习资源推荐
  - Vue 3.0 官方文档：[https://vuejs.org](https://vuejs.org)
  - TypeScript 官方手册：[https://www.typescriptlang.org/docs/](https://www.typescriptlang.org/docs/)
  - GitHub 学习指南：[https://guides.github.com/](https://guides.github.com/)

链接会以蓝色可点击的形式显示，极大提升可读性和实用性。

列表中插入图片与复杂内容

虽然 Markdown 列表本身不支持直接插入图片（需用 ![](url) 语法），但你可以将图片嵌入列表项中，实现图文结合的效果。

- 项目架构图
  ![项目结构图](project-structure.png)
  - src 目录：存放源代码
  - public：静态资源
  - config：配置文件

📌 提示：图片路径应为相对路径或可访问的 URL。若在本地写作，建议使用相对路径，确保文档可迁移。

列表与段落混合：更灵活的内容组织

有时你希望在列表项中加入一段文字说明，而不是只列关键词。这时可以在列表项后换行，插入普通段落。

- 项目初始化
  项目启动前，需完成以下准备：
  
  1. 确保 Node.js 版本不低于 16
  2. 安装依赖包：npm install
  3. 启动开发服务器：npm run dev

- 环境变量配置
  请在根目录创建 `.env` 文件，内容如下：

VUE_APP_API_URL=https://api.example.com NODE_ENV=development

这种写法让信息更完整，适合写技术文档、部署手册或团队协作规范。

实用案例：编写一份完整的开发任务清单

下面我们用一个真实场景，综合运用所有知识点，编写一份“Vue 3.0 项目初始化清单”。

## Vue 3.0 项目初始化任务清单

- 项目准备
  - 确认已安装 Node.js 18.17.0
  - 检查 npm 版本：npm -v

- 创建项目
  1. 创建项目目录：mkdir vue3-demo
  2. 进入目录：cd vue3-demo
  3. 初始化项目：npm init -y

- 安装依赖
  - 核心框架
    ```bash
    npm install vue@3.3.4 --save
    ```
  - 开发工具
    ```bash
    npm install @vue/cli -g
    npm install @vue/cli-service --save-dev
    ```

- 项目结构初始化
  - 创建 src 目录
  - 在 src 下创建：
    - App.vue
    - main.js
    - components/
    - views/

- 启动项目
  1. 在 package.json 中添加脚本：
     ```json
     "scripts": {
       "dev": "vue-cli-service serve"
     }
     ```
  2. 运行开发服务器：npm run dev
  3. 浏览器打开：http://localhost:8080

- 验证成功
  - 页面显示 "Hello Vue 3.0!"
  - 控制台无报错

这份清单结构清晰、信息完整，可直接用于团队交接或个人学习记录。

总结与建议

Markdown 列表不仅是“列项目”的工具，更是组织信息、提升文档质量的核心手段。掌握它，意味着你能够：

清晰表达逻辑结构（如流程、步骤、分类）
提高文档可读性与专业度
为团队协作、技术分享、个人笔记打下良好基础

无论是写技术文档、学习笔记，还是整理工作计划，Markdown 列表都能让你的表达更高效、更准确。只要记住：简洁、有序、层次分明，就是它的核心价值。

在日常开发中，不妨养成“先列清单，再执行”的习惯。把任务拆解成列表项，每完成一项就打个勾，效率提升看得见。

从今天起，让每一个 Markdown 文件都从一个清晰的列表开始吧。