章节索引 :

Markdown 任务列表

1. 前言

To-do 任务列表是一种很常见的时间管理工具,它适用于工作计划、个人生活以及家庭学习。使用 Markdown 语法我们也可以实现一个基本的 To-do 任务列表。

Markdown 的 To-Do List 的内容是由无序列表,复选框,图标几种功能的组合。

环境说明
考虑到 Markdown 工具之间的不兼容,有的内容直接从页面复制粘贴到本地不会正常显示,大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
本节所有截图均为 Typora 导出 Html 后效果。

2. 语法详解

在 Markdown 文件中,在 " 无序列表 -,+,* " 后面使用 「中括号 []」 声明复选框。在中括号中写入 x ,便可实现选中效果。

实例 1

#### 复选框 checkbox

- [ ] Java
- [x] Php

或者

#### 复选框 checkbox

+ [ ] Java
+ [x] Php

或者

#### 复选框 checkbox

* [ ] Java
* [x] Php

这三种语法渲染后的结果相同,渲染结果如下:

图片描述

其转换后的 html 的内容如下:

<ul>
<li class="task-list-item"><input type="checkbox" disabled=""> Java</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> Php</li>
</ul>

3. 使用场景及应用实例

To-Do List 可以用于工作计划、学习管理等。非常适合小型协作团队,用来制定任务计划、分配任务执行人、跟踪任务完成情况等。

实例 2

做一个团队协作的任务列表。

  • 第一步:规划任务、责任人

    做一个学生管理系统为主题的课程设计,有四个主要参与者,小甲负责前端,小乙负责后端开发,小丙负责数据库,小丁测试和编写文档。因此整个任务也相应的分为了四个部分:前端、后端、数据库和统筹。

    此时代码如下:

#### 学生管理系统

- [ ] 数据库设计 责任人: 小丙
- [ ] 服务端开发 责任人: 小乙
- [ ] 前端开发 责任人: 小甲
- [ ] 系统测试 责任人: 小丁
- [ ] 文档编写 责任人: 小丁
  • 第二步:补充任务详情、完成时间

    有了大致任务分工和责任人,此时需要每个责任人对自己的模块做补充,并预估完成时间。

    这一步代码如下 (片段):

#### 学生管理系统(二)

- [ ] **数据库设计**  
  责任人:小丙  
  任务描述:搭建 Mysql 数据库环境;设计数据表;数据库设计满足三范式。  
  预计完成时间 5 天
  • 第三步:责任人分解任务

    将任务分解为一件件可完成的工作,并输出为任务列表。

    这一步代码如下(片段)

#### 学生管理系统(三)

- [ ] **数据库设计**  
  责任人:小丙  
  任务描述:搭建 Mysql 数据库环境;设计数据表;数据库设计满足三范式。  
  预计完成时间 5 天
  - [ ] 搭建数据库环境
  - [ ] 整理数据表名、主要字段
  - [ ] 设计 E-R 图
  - [ ] 使数据表符合范式要求
  - [ ] 应用到数据库中
  - [ ] 整理此部分文档笔记
  • 第四步:随时更新任务状态

    根据进展情况更新任务的状态,即在中括号中用 x 替换 “空格”。

    这一步代码如下(片段)

#### 学生管理系统(四)

- [ ] **数据库设计**  
  责任人:小丙  
  任务描述:搭建 Mysql 数据库环境;设计数据表;数据库设计满足三范式。  
  预计完成时间 5 天
  - [x] 搭建数据库环境
  - [x] 整理数据表名、主要字段
  - [x] 设计 E-R 图
  - [x] 使数据表符合范式要求
  - [ ] 应用到数据库中
  - [ ] 整理此部分文档笔记

最后,我们可以看到完成的成果如下:

图片描述

4. 小结

  1. 复选框只有跟在 “无序列表” 之后才能显示;
  2. 复选框语法 中括号 [] 之间只能是 空格 或者 x,其他情况下,不会渲染成复选框标签。

当我们用 Markdown 撰写自己的文档时,可以首先用 “任务列表” 的方式在文章的开头将整篇文章的写作安排写好,这样当我们写作篇幅较长时,这一习惯将会非常有利于思路的整理和延续。