童雷 ·Markdown 列表
1. 前言
關(guān)于列表，Markdown 作者給出了如下定義：
中文解釋：Markdown 支持有序和無(wú)序兩種列表，無(wú)序列表使用
「星號(hào) "*"」、「加號(hào) "+"」、「減號(hào) "-"」表示，有序列表使用數(shù)字定義，如:1. xxx 2.xxx 3.xxx等。原文出處：daringfireball.net。
列表是一種將同類內(nèi)容進(jìn)行結(jié)構(gòu)化編排輸出的顯示方式。列表分為有序列表和無(wú)序列表，單級(jí)列表和多級(jí)列表。
環(huán)境說(shuō)明：
考慮到 Markdown 工具之間的不兼容，有的內(nèi)容直接從頁(yè)面復(fù)制粘貼到本地不會(huì)正常顯示，大家學(xué)習(xí)時(shí)自己動(dòng)手寫(xiě)是肯定沒(méi)問(wèn)題的。本節(jié)所有實(shí)例代碼及演示效果均使用 Typora 工具完成。
2. 語(yǔ)法詳解
2.1 無(wú)序列表
在 Markdown 文件中，我們可以通過(guò) *、+、-，三種方式定義無(wú)序列表，這三種方式的發(fā)布后的效果一樣，都會(huì)被轉(zhuǎn)換成：
<ul>
<li></li>
</ul>
實(shí)例 1：
### 無(wú)序列表
使用星號(hào)生成無(wú)序列表
* 項(xiàng)目1
* 項(xiàng)目2
* 項(xiàng)目3
使用加號(hào)生成無(wú)序列表
+ 項(xiàng)目1
+ 項(xiàng)目2
+ 項(xiàng)目3
使用減號(hào)生成無(wú)序列表
- 項(xiàng)目1
- 項(xiàng)目2
- 項(xiàng)目3
渲染結(jié)果如下：
2.2 有序列表
在 Markdown 文件中，通過(guò)「數(shù)字 + . 」的形式定義有序列表，有序列表在發(fā)布后會(huì)被轉(zhuǎn)化為：
<ol>
<li></li>
</ol>
實(shí)例 2：
### 有序列表
使用數(shù)字實(shí)現(xiàn)有序列表
1. 項(xiàng)目1
2. 項(xiàng)目2
3. 項(xiàng)目3
源碼中的數(shù)字與渲染后的數(shù)字并不一一對(duì)應(yīng)，但可以決定列表的開(kāi)始序號(hào)
例如，讓 Markdown 渲染器自動(dòng)安排序號(hào)：
0. 項(xiàng)目1
0. 項(xiàng)目2
0. 項(xiàng)目3
讓有序列表以 “2” 開(kāi)頭：
2. 項(xiàng)目1
1. 項(xiàng)目2
0. 項(xiàng)目3
其渲染結(jié)果如下：
2.3 列表的嵌套
Markdown 文件的列表支持多層嵌套，即每個(gè)列表里面允許增加下級(jí)列表，而且這個(gè)層級(jí)并沒(méi)有限制。
實(shí)例 3：
無(wú)序列表嵌套無(wú)序列表
### 無(wú)序列表的嵌套
無(wú)序列表可以通過(guò)縮進(jìn)實(shí)現(xiàn)嵌套
* 項(xiàng)目 1
* 項(xiàng)目 1-1
* 項(xiàng)目2
* 項(xiàng)目 2-1
* 項(xiàng)目 2-2
* 項(xiàng)目3
無(wú)序列表的嵌套是沒(méi)有層數(shù)限制的
* 第一層 1
* 第二層 1
* 第三層 1
* 第四層 1
* 第五層 1
* 第三層 2
* 第二層 2
其渲染結(jié)果如下：
實(shí)例 4：
有序列表嵌套有序列表
### 有序列表的嵌套
有序列表可以通過(guò)縮進(jìn)實(shí)現(xiàn)嵌套
1. 項(xiàng)目 1
1. 項(xiàng)目 1-1
1. 項(xiàng)目 2
1. 項(xiàng)目 2-1
1. 項(xiàng)目 2-2
1. 項(xiàng)目 3
無(wú)序列表的嵌套是沒(méi)有層數(shù)限制的
1. 第一層 1
1. 第二層 1
1. 第三層 1
1. 第四層 1
1. 第五層 1
1. 第三層 2
1. 第二層 2
其渲染結(jié)果如下：
實(shí)例 5：
有序列表和無(wú)序列表的混合嵌套
### 有序列表和無(wú)序列表混合嵌套
* 無(wú)序項(xiàng)目1-1
1. 有序項(xiàng)目2-1
1. 有序項(xiàng)目2-2
- 無(wú)序項(xiàng)目3-1
- 無(wú)序項(xiàng)目3-1
1. 有序項(xiàng)目2-3
渲染結(jié)果如下：
實(shí)例 6：
在列表中嵌套其他內(nèi)容
### 列表中嵌套其他內(nèi)容
段落、圖片、引用等內(nèi)容可以通過(guò)縮進(jìn)的方式進(jìn)入到列表的結(jié)構(gòu)中。
* 帶段落的列表項(xiàng)
在列表項(xiàng)中的段落
* 帶段落的列表項(xiàng)
在列表項(xiàng)中的段落
* 帶圖片的列表項(xiàng)
* 帶圖片的列表項(xiàng)
* 帶引用的列表項(xiàng)
> 引用內(nèi)容
* 帶引用的列表項(xiàng)
> 引用內(nèi)容
其渲染結(jié)果如下：
3. 使用場(chǎng)景及應(yīng)用實(shí)例
列表的作用是有條理的顯示內(nèi)容，是一種非常方便的布局形式。
在一篇文章中，通常會(huì)用多級(jí)有序列表的方式來(lái)呈現(xiàn)文章的目錄結(jié)構(gòu)。通常會(huì)用無(wú)序列表呈現(xiàn)沒(méi)有明顯級(jí)別關(guān)系的分類，例如菜單項(xiàng)等。
實(shí)例 7：
如何用列表展示咖啡的制作說(shuō)明
### 如何制作一杯咖啡
拿鐵咖啡是意大利濃縮咖啡與牛奶的經(jīng)典混合。
炎炎夏日，來(lái)一杯冰咖啡不僅可以提神醒腦，更是身心的一種享受。
#### 用料
+ 主料
- 咖啡粉
- 牛奶
+ 輔料
- 白砂糖
- 熱水一杯
#### 做法
1. 準(zhǔn)備好材料
2. 把咖啡粉和熱水沖在一起攪和
3. 把牛奶放進(jìn)盤(pán)里用手動(dòng)打蛋器打。記?。∫恢贝?，打出細(xì)膩的奶泡。
4. 把打好的奶泡放入咖啡中，奶泡浮在上面就可以了。
其渲染結(jié)果如下：
4. 小結(jié)
- 需要注意的是，書(shū)寫(xiě)有序列表時(shí)，源碼中的順序號(hào)并不代表輸出后的序號(hào)，如果希望重新定義有序列表的起始數(shù)字，需要在兩個(gè)列表間插入兩個(gè)空行；
- Markdown 的列表支持分段，即一個(gè)列表項(xiàng)的后續(xù)內(nèi)容，如果保持了同樣的縮進(jìn)，后續(xù)內(nèi)容也是劃歸在列表里的。
列表是文章中用于呈現(xiàn)觀點(diǎn)的很好方式，也是常見(jiàn)的輔助功能項(xiàng)，例如文章目錄、或者樹(shù)形菜單、步驟圖等。
2025 imooc.com All Rights Reserved |