- 01 Markdown 简介
- 02 Markdown 导出 HTML
- 03 Markdown 分级标题
- 04 Markdown 段落
- 05 Markdown 分割线
- 06 Markdown 列表
- 07 Markdown 引用
- 08 Markdown 强调
- 09 Markdown 辅助线
- 10 Markdown 字体字号
- 11 Markdown 前景色、背景色
- 12 Markdown 行内代码
- 13 Markdown 代码块
- 14 Markdown 超链接
- 15 Markdown 图片
- 16 Markdown 任务列表
- 17 Markdown 特殊符号
- 18 Markdown 代码高亮
- 19 Markdown 注释
- 20 Markdown 表格
- 21 Markdown 流程图
- 22 Markdown 时序图
- 23 Markdown 类图
- 24 Markdown 状态图
- 25 Markdown 甘特图
- 26 Markdown 饼图
- 27 Markdown 上标、下标
- 28 Markdown 数学公式
- 29 Markdown 脚注尾注
- 30 Markdown 生成目录
- 31 Markdown 综合实例
06 Markdown 列表
1. 前言
关于列表,Markdown 作者给出了如下定义:
中文解释:Markdown 支持有序和无序两种列表,无序列表使用
「星号 "*"」
、「加号 "+"」
、「减号 "-"」
表示,有序列表使用数字定义,如:1. xxx 2.xxx 3.xxx
等。原文出处:daringfireball.net。
列表是一种将同类内容进行结构化编排输出的显示方式。列表分为有序列表和无序列表,单级列表和多级列表。
环境说明:
考虑到 Markdown 工具之间的不兼容,有的内容直接从页面复制粘贴到本地不会正常显示,大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
2. 语法详解
2.1 无序列表
在 Markdown 文件中,我们可以通过 *
、+
、-
,三种方式定义无序列表,这三种方式的发布后的效果一样,都会被转换成:
<ul>
<li></li>
</ul>
实例 1:
### 无序列表
使用星号生成无序列表
* 项目1
* 项目2
* 项目3
使用加号生成无序列表
+ 项目1
+ 项目2
+ 项目3
使用减号生成无序列表
- 项目1
- 项目2
- 项目3
渲染结果如下:
2.2 有序列表
在 Markdown 文件中,通过「数字 + .
」的形式定义有序列表,有序列表在发布后会被转化为:
<ol>
<li></li>
</ol>
实例 2:
### 有序列表
使用数字实现有序列表
1. 项目1
2. 项目2
3. 项目3
源码中的数字与渲染后的数字并不一一对应,但可以决定列表的开始序号
例如,让 Markdown 渲染器自动安排序号:
0. 项目1
0. 项目2
0. 项目3
让有序列表以 “2” 开头:
2. 项目1
1. 项目2
0. 项目3
其渲染结果如下:
2.3 列表的嵌套
Markdown 文件的列表支持多层嵌套,即每个列表里面允许增加下级列表,而且这个层级并没有限制。
实例 3:
无序列表嵌套无序列表
### 无序列表的嵌套
无序列表可以通过缩进实现嵌套
* 项目 1
* 项目 1-1
* 项目2
* 项目 2-1
* 项目 2-2
* 项目3
无序列表的嵌套是没有层数限制的
* 第一层 1
* 第二层 1
* 第三层 1
* 第四层 1
* 第五层 1
* 第三层 2
* 第二层 2
其渲染结果如下:
实例 4:
有序列表嵌套有序列表
### 有序列表的嵌套
有序列表可以通过缩进实现嵌套
1. 项目 1
1. 项目 1-1
1. 项目 2
1. 项目 2-1
1. 项目 2-2
1. 项目 3
无序列表的嵌套是没有层数限制的
1. 第一层 1
1. 第二层 1
1. 第三层 1
1. 第四层 1
1. 第五层 1
1. 第三层 2
1. 第二层 2
其渲染结果如下:
实例 5:
有序列表和无序列表的混合嵌套
### 有序列表和无序列表混合嵌套
* 无序项目1-1
1. 有序项目2-1
1. 有序项目2-2
- 无序项目3-1
- 无序项目3-1
1. 有序项目2-3
渲染结果如下:
实例 6:
在列表中嵌套其他内容
### 列表中嵌套其他内容
段落、图片、引用等内容可以通过缩进的方式进入到列表的结构中。
* 带段落的列表项
在列表项中的段落
* 带段落的列表项
在列表项中的段落
* 带图片的列表项
![](https://www.imooc.com/static/img/index/logo.png)
* 带图片的列表项
![](https://www.imooc.com/static/img/index/logo.png)
* 带引用的列表项
> 引用内容
* 带引用的列表项
> 引用内容
其渲染结果如下:
3. 使用场景及应用实例
列表的作用是有条理的显示内容,是一种非常方便的布局形式。
在一篇文章中,通常会用多级有序列表的方式来呈现文章的目录结构。通常会用无序列表呈现没有明显级别关系的分类,例如菜单项等。
实例 7:
如何用列表展示咖啡的制作说明
### 如何制作一杯咖啡
拿铁咖啡是意大利浓缩咖啡与牛奶的经典混合。
炎炎夏日,来一杯冰咖啡不仅可以提神醒脑,更是身心的一种享受。
#### 用料
+ 主料
- 咖啡粉
- 牛奶
+ 辅料
- 白砂糖
- 热水一杯
#### 做法
1. 准备好材料
2. 把咖啡粉和热水冲在一起搅和
3. 把牛奶放进盘里用手动打蛋器打。记住!要一直打,打出细腻的奶泡。
4. 把打好的奶泡放入咖啡中,奶泡浮在上面就可以了。
其渲染结果如下:
4. 小结
- 需要注意的是,书写有序列表时,源码中的顺序号并不代表输出后的序号,如果希望重新定义有序列表的起始数字,需要在两个列表间插入两个空行;
- Markdown 的列表支持分段,即一个列表项的后续内容,如果保持了同样的缩进,后续内容也是划归在列表里的。
列表是文章中用于呈现观点的很好方式,也是常见的辅助功能项,例如文章目录、或者树形菜单、步骤图等。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论