Markdown 列表语法
本文最后更新于156 天前,其中的信息可能已经过时,如有错误请发送邮件到jimmy6646az@outlook.com

一、列表语法

在 Markdown 中,列表是非常常用的元素,用于组织和展示信息。Markdown 支持可以将多个条目组织成有序或无序列表。

二、有序列表

要创建有序列表,请在每个列表项前添加数字并紧跟一个英文句点。 数字不必按数学顺序排列,但是列表应当以数字 1 起始。

示例一:

1. 第一项
2. 第二项
3. 第三项
4. 第四项

预览效果:

html 相同效果代码:

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ol>

示例二:

1. 第一项 
1. 第二项 
1. 第三项 
1. 第四项

预览效果:

html相同效果代码:

<ol start="1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ol>

示例三:

1. 第一项 
6. 第二项 
3. 第三项 
7. 第四项

预览效果:

html相同效果代码:

<ol>
    <li value="1">第一项</li>
    <li value="6">第二项</li>
    <li value="3">第三项</li>
    <li value="7">第四项</li>
</ol>

示例四:

1. 第一项
2. 第二项
3. 第三项
    1. 缩进的项目
    2. 缩进的项目
4. 第四项

预览效果:

html相同效果代码:

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项
    <ol>
      <li>缩进的项目</li>
      <li>缩进的项目</li>
    </ol>
  </li>
  <li>第四项</li>
</ol>

三、有序列表最佳实践

✅  Do this❌  Don’t do this
1. 第一项
2. 第二项
1) 第一项
2) 第二项

四、无序列表

要创建无序列表,可在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。缩进一个或多个列表项可创建嵌套列表。

示例一:

使用破折号:
- 第一项
- 第二项
- 第三项
- 第四项


预览效果:

html相同效果代码:

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>

示例二:

使用星号:
* 第一项
* 第二项
* 第三项
* 第四项

预览效果:

html相同效果代码:

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>

示例三:

使用加号:
+ 第一项
+ 第二项
+ 第三项
+ 第四项

预览效果:

html相同效果代码:

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>

示例四:

- 第一项
- 第二项
- 第三项
    - 缩进的项目
    - 缩进的项目
- 第四项

html相同效果代码:

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项
<ul>
<li>缩进的项目</li>
<li>缩进的项目</li>
</ul>
</li>
<li>第四项</li>
</ul>

五、无序列表最佳实践

✅  Do this❌  Don’t do this
- 第一项
- 第二项
- 第三项
- 第四项
+ 第一项
* 第二项
- 第三项
+ 第四项

六、在列表中嵌套其他元素

要在保留列表连续性的同时在列表中添加另一种元素,请将该元素缩进四个空格或一个制表符。

段落示例:

*  这是第一个列表项。
*  这是第二个列表项。
   我需要在第二个列表项下方添加另一个段落。
*  这是第三个列表项。

引用块示例:

* 这是第一个列表项。
* 这是第二个列表项。

   >引用块放在第二个列表项下方会很不错。

* 这是第三个列表项。

代码块示例:

代码块通常采用四个空格或一个制表符缩进。当它们被放在列表中时,请将它们缩进八个空格或两个制表符。

1.  Open the file.
2.  Find the following code block on line 21:

        &lt;html>
          &lt;head>
            &lt;title>Test&lt;/title>
          &lt;/head>

3.  Update the title to match the name of your website.

预览效果:

图片示例:

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![Tux, the Linux mascot](/assets/images/tux.png)

3.  Close the file.

预览效果

列表实例:

1. First item
2. Second item
3. Third item
    - Indented item
    - Indented item
4. Fourth item

预览效果

本文参考文献

Markdown 列表语法 | Markdown 教程

上一篇
下一篇