Markdown 任務(wù)列表

1. 前言

To-do 任務(wù)列表是一種很常見(jiàn)的時(shí)間管理工具，它適用于工作計(jì)劃、個(gè)人生活以及家庭學(xué)習(xí)。使用 Markdown 語(yǔ)法我們也可以實(shí)現(xiàn)一個(gè)基本的 To-do 任務(wù)列表。

Markdown 的 To-Do List 的內(nèi)容是由無(wú)序列表，復(fù)選框，圖標(biāo)幾種功能的組合。

環(huán)境說(shuō)明：
考慮到 Markdown 工具之間的不兼容，有的內(nèi)容直接從頁(yè)面復(fù)制粘貼到本地不會(huì)正常顯示，大家學(xué)習(xí)時(shí)自己動(dòng)手寫(xiě)是肯定沒(méi)問(wèn)題的。本節(jié)所有實(shí)例代碼及演示效果均使用 Typora 工具完成。
本節(jié)所有截圖均為 Typora 導(dǎo)出 Html 后效果。

2. 語(yǔ)法詳解

在 Markdown 文件中，在 " 無(wú)序列表 -,+,* " 后面使用 「中括號(hào) []」 聲明復(fù)選框。在中括號(hào)中寫(xiě)入 x ，便可實(shí)現(xiàn)選中效果。

實(shí)例 1：

#### 復(fù)選框 checkbox

- [ ] Java
- [x] Php

或者

#### 復(fù)選框 checkbox

+ [ ] Java
+ [x] Php

或者

#### 復(fù)選框 checkbox

* [ ] Java
* [x] Php

這三種語(yǔ)法渲染后的結(jié)果相同，渲染結(jié)果如下：

其轉(zhuǎn)換后的 html 的內(nèi)容如下：

<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. 使用場(chǎng)景及應(yīng)用實(shí)例

To-Do List 可以用于工作計(jì)劃、學(xué)習(xí)管理等。非常適合小型協(xié)作團(tuán)隊(duì)，用來(lái)制定任務(wù)計(jì)劃、分配任務(wù)執(zhí)行人、跟蹤任務(wù)完成情況等。

實(shí)例 2：

做一個(gè)團(tuán)隊(duì)協(xié)作的任務(wù)列表。

• 第一步：規(guī)劃任務(wù)、責(zé)任人

  做一個(gè)學(xué)生管理系統(tǒng)為主題的課程設(shè)計(jì)，有四個(gè)主要參與者，小甲負(fù)責(zé)前端，小乙負(fù)責(zé)后端開(kāi)發(fā)，小丙負(fù)責(zé)數(shù)據(jù)庫(kù)，小丁測(cè)試和編寫(xiě)文檔。因此整個(gè)任務(wù)也相應(yīng)的分為了四個(gè)部分：前端、后端、數(shù)據(jù)庫(kù)和統(tǒng)籌。

  此時(shí)代碼如下：

#### 學(xué)生管理系統(tǒng)

- [ ] 數(shù)據(jù)庫(kù)設(shè)計(jì) 責(zé)任人: 小丙
- [ ] 服務(wù)端開(kāi)發(fā) 責(zé)任人: 小乙
- [ ] 前端開(kāi)發(fā) 責(zé)任人: 小甲
- [ ] 系統(tǒng)測(cè)試 責(zé)任人: 小丁
- [ ] 文檔編寫(xiě) 責(zé)任人: 小丁

• 第二步：補(bǔ)充任務(wù)詳情、完成時(shí)間

  有了大致任務(wù)分工和責(zé)任人，此時(shí)需要每個(gè)責(zé)任人對(duì)自己的模塊做補(bǔ)充，并預(yù)估完成時(shí)間。

  這一步代碼如下 (片段)：

#### 學(xué)生管理系統(tǒng)（二）

- [ ] **數(shù)據(jù)庫(kù)設(shè)計(jì)**  
  責(zé)任人：小丙  
  任務(wù)描述：搭建 Mysql 數(shù)據(jù)庫(kù)環(huán)境；設(shè)計(jì)數(shù)據(jù)表；數(shù)據(jù)庫(kù)設(shè)計(jì)滿足三范式。  
  預(yù)計(jì)完成時(shí)間 5 天

• 第三步：責(zé)任人分解任務(wù)

  將任務(wù)分解為一件件可完成的工作，并輸出為任務(wù)列表。

  這一步代碼如下（片段）

#### 學(xué)生管理系統(tǒng)（三）

- [ ] **數(shù)據(jù)庫(kù)設(shè)計(jì)**  
  責(zé)任人：小丙  
  任務(wù)描述：搭建 Mysql 數(shù)據(jù)庫(kù)環(huán)境；設(shè)計(jì)數(shù)據(jù)表；數(shù)據(jù)庫(kù)設(shè)計(jì)滿足三范式。  
  預(yù)計(jì)完成時(shí)間 5 天
  - [ ] 搭建數(shù)據(jù)庫(kù)環(huán)境
  - [ ] 整理數(shù)據(jù)表名、主要字段
  - [ ] 設(shè)計(jì) E-R 圖
  - [ ] 使數(shù)據(jù)表符合范式要求
  - [ ] 應(yīng)用到數(shù)據(jù)庫(kù)中
  - [ ] 整理此部分文檔筆記

• 第四步：隨時(shí)更新任務(wù)狀態(tài)

  根據(jù)進(jìn)展情況更新任務(wù)的狀態(tài)，即在中括號(hào)中用 x 替換 “空格”。

  這一步代碼如下（片段）

#### 學(xué)生管理系統(tǒng)（四）

- [ ] **數(shù)據(jù)庫(kù)設(shè)計(jì)**  
  責(zé)任人：小丙  
  任務(wù)描述：搭建 Mysql 數(shù)據(jù)庫(kù)環(huán)境；設(shè)計(jì)數(shù)據(jù)表；數(shù)據(jù)庫(kù)設(shè)計(jì)滿足三范式。  
  預(yù)計(jì)完成時(shí)間 5 天
  - [x] 搭建數(shù)據(jù)庫(kù)環(huán)境
  - [x] 整理數(shù)據(jù)表名、主要字段
  - [x] 設(shè)計(jì) E-R 圖
  - [x] 使數(shù)據(jù)表符合范式要求
  - [ ] 應(yīng)用到數(shù)據(jù)庫(kù)中
  - [ ] 整理此部分文檔筆記

最后，我們可以看到完成的成果如下：

4. 小結(jié)

1. 復(fù)選框只有跟在 “無(wú)序列表” 之后才能顯示；
2. 復(fù)選框語(yǔ)法 中括號(hào) [] 之間只能是 空格 或者 x，其他情況下，不會(huì)渲染成復(fù)選框標(biāo)簽。

當(dāng)我們用 Markdown 撰寫(xiě)自己的文檔時(shí)，可以首先用 “任務(wù)列表” 的方式在文章的開(kāi)頭將整篇文章的寫(xiě)作安排寫(xiě)好，這樣當(dāng)我們寫(xiě)作篇幅較長(zhǎng)時(shí)，這一習(xí)慣將會(huì)非常有利于思路的整理和延續(xù)。