Markdown 列表

在 Markdown 中，列表用于展示多个相关的项。Markdown 支持以下 3 种列表：

• 有序列表。
• 无序列表。
• 任务列表。

Markdown 无序列表

在 Markdown 中，我们可以使用星号 (*)、加号 (+) 或减号 (-) 这 3 种标记符来作为无序列表的标记。

语法：

<!--方式1-->
* 列表项1
* 列表项2
* 列表项3

<!--方式2-->
+ 列表项1
+ 列表项2
+ 列表项3

<!--方式3-->
- 列表项1
- 列表项2
- 列表项3

说明：

无序列表中的各项之间是没有顺序关系的，我们可以使用 “*、+ 或 -” 这 3 种标记符的任意一种来表示无序列表。

但为了更好的可读性，我们在同一文档应该只使用其中一种标记，而不要多种标记混合。也就是，要么全部使用 “*”，要么全部使用 “+”，不建议 “*” 和 “+” 混合使用。

<!--推荐-->
* 列表项1
* 列表项2
* 列表项3

<!--不推荐-->
* 列表项1
+ 列表项2
* 列表项3

示例 1：Markdown 定义无序列表

* 苹果
* 香蕉
* 橙子
* 西瓜
* 李子

渲染效果如下图所示。

生成 HTML 代码如下。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>西瓜</li>
    <li>李子</li>
</ul>

分析：

从结果可以看出，Markdown 中的无序列表本质上最终会使用 HTML 中的 “ul + li” 标签来表示。

Markdown 有序列表

在 Markdown 中，有序列表中的各个列表项是有顺序的。有序列表使用 “数字.” 作为列表标记

语法：

1. 列表项1 
2. 列表项2 
3. 列表项3

说明：

有序列表中的各项有指定的顺序，列表项前的数字决定了项目的排列顺序。

不连续的数字不会影响有序列表的显示，Markdown 会自动按照列表项的顺序进行编号。

示例 2：Markdown 定义有序列表

1.  第一步：准备环境
2.  第二步：开始开发
3.  第三步：完成项目

渲染效果如下图所示。

生成 HTML 代码如下。

<ol>
    <li>第一步：准备环境</li>
    <li>第二步：开始开发</li>
    <li>第三步：完成项目</li>
</ol>

分析：

从结果可以看出，Markdown 中的有序列表本质上最终会使用 HTML 中的 “ol + li” 标签来表示。

示例 3：Markdown 定义嵌套列表

1.  水果
    * 苹果
    * 香蕉
2.  蔬菜
    * 胡萝卜
    * 西兰花

渲染效果如下图所示。

生成 HTML 代码如下。

<ol>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>胡萝卜</li>
            <li>西兰花</li>
        </ul>
    </li>
</ol>

Markdown 任务列表（扩展）

在 Markdown 中，我们还可以创建带有复选框的列表，这种列表也称为 “任务列表”。任务列表，一般用于管理 “待办事项（To-Do List）” 或跟踪 “项目进度”。

语法：

- [ ] 待办任务
- [x] 已完成任务

说明：

任务列表的语法是在无序列表符号（-、* 或 +）后面加上一个方括号 []。

• [ ]（中间有空格）：表示未完成的任务。
• [x]（中间是小写 x）：表示已完成的任务。

示例 4：Markdown 定义任务列表

今天的工作计划：
- [x] 撰写 Python 教程
- [ ] 校对 HTML 教程
- [ ] 录制教学视频

渲染效果如下图所示。

生成 HTML 代码如下。

<p>今天的工作计划：</p>
<ul class="contains-task-list">
    <li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox">撰写 Python 教程</li>
    <li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">校对 HTML 教程</li>
    <li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">录制教学视频</li>
</ul>

分析：

从结果可以看出，任务列表最终会被渲染为带有 input type="checkbox" 的 HTML 列表。在网页的阅读模式下，这些复选框是 disabled（不可点击）状态。但在支持交互的编辑器中，直接点击复选框通常会自动更新 Markdown 源码中的 “[ ]” 为 “[x]”。