有序列表

有序列表用来表达顺序:操作步骤、排查问题的先后、检查清单的优先级。和无序列表不同,它的编号不是装饰,而是一个被渲染器接管的信息——这带来一个反直觉但极其有用的特性:你写在源码里的数字会被忽略,真正显示出来的编号由渲染器按顺序生成。这一页讲清这条规则,以及它在什么时候帮了你、又会在什么时候坑你。

语法

行首写数字、句点(或右括号)、一个空格,然后是内容:

1. 第一步
2. 第二步
3. 第三步
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>

括号也可以换成右括号,1) 同样被识别为有序列表。

编号由渲染器接管

这是有序列表最值得记住的一点:源码里的数字不影响渲染结果。把上面那段写成 1. 1. 1. 也没问题,页面上依然是「第一步、第二步、第三步」。渲染器只关心「这是一个有序列表」和「列表项有几项」,编号自己算。

这条特性带来两个直接的好处。一是插入一项不用重排:在中间加一条新步骤,你只需要给它写任意一个编号,后面的编号会自己往下排。二是编号不会因为编辑而错位:删掉中间一条,剩下的编号自动收紧,不存在「1、2、4、5」这种需要手工修补的情况。

唯一的例外是第一个数字,它决定列表从几开始:

3. 第三步其实是第一步
4. 下一步
<ol start="3">
<li>第三步其实是第一步</li>
<li>下一步</li>
</ol>

打断段落的那条限制

有序列表可以打断它前面的普通段落,但前提是第一个编号是 1:

这是段落
2. 编号不是 1
<p>这是段落
2. 编号不是 1</p>

编号是 2 时,这一行会被当成段落的延续,列表根本没有生成。这条限制是为了避免正文里随手写的「2024. 年的计划」这类文字被误判成列表。只要以 1. 开头,列表就能正常打断段落。

常见坑

写法实际渲染原因
1. 步骤列表项基本用法
1.步骤普通文字句点后必须有空格
1) 步骤列表项右括号也是合法标记
1. 1. 1.编号 1、2、3编号由渲染器接管
段落后接 2. 步骤普通文字打断段落时首编号必须是 1
段落后接 1. 步骤列表首编号为 1 时可打断段落

练习

把下面这段内容改写成 Markdown,要求:四个步骤用一个有序列表表示;在第二步下面加一条子步骤,并把它缩进到正确的层级;第一个编号必须是 1,否则它无法打断前面的段落。

安装依赖
  使用 pnpm install
配置环境变量
启动开发服务器
打断段落

解题思路: 有序列表的编号由渲染器接管,源码里写什么数字都不影响最终显示,所以编号统一从 1 开始写即可——这同时满足了「能打断前面段落」的限制(首编号必须是 1)。子步骤要缩进到父项的内容起始列之后:2. 占三列,所以子项缩进三个空格。

详细步骤:

  1. 四个步骤各写成「数字 + 句点 + 空格 + 内容」的形式,编号依次写 1、2、3、4。实际上写出来的数字只是给人看的,渲染时会自动重排。
  2. 「使用 pnpm install」是第一步的子项,缩进三个空格再写 1. 使用 pnpm install。父项 1. 的内容从第四列开始,子项必须对齐到这一列或更右。
  3. 注意首编号必须是 1:如果写成 2. 安装依赖,这一行会被当成前面段落的延续,整个列表都不会生成。
  4. 检验:渲染后是一个从 1 开始编号的三步列表,第一步下面挂着一个子步骤。

最终答案:

1. 安装依赖
   1. 使用 `pnpm install`
2. 配置环境变量
3. 启动开发服务器

小结

读完这一页,你应当能写出有序列表,能解释编号为什么由渲染器接管、能说出首编号的唯一作用,也能解释为什么编号不是 1 的列表无法打断前面的段落。接下来写步骤说明时,你会放心地在中间插入新步骤,而不再手工重排后面的数字。

发现内容有问题?

告诉我们哪里需要改进。