HTML 有序列表的奥秘：掌握有序显示的秘密

有序列表的语法 要创建有序列表，需要使用 <ol> 开始标签和 </ol> 结束标签。在 <ol> 标签内，每个列表项都用 <li> 元素表示。例如：

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

数字和字母顺序 默认情况下，有序列表中的项目按数字顺序排列。然而，可以通过 <type> 属性指定不同的排序方式。<type> 属性接受以下值：

• 1：数字顺序
• a：小写字母顺序
• A：大写字母顺序

例如：

<!-- 按字母顺序排列 -->
<ol type="a">
  <li>苹果</li>
  <li>香蕉</li>
  <li>樱桃</li>
</ol>

<!-- 按罗马数字顺序排列 -->
<ol type="I">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

起始编号 通过 <start> 属性，可以指定有序列表的起始编号。这在继续现有列表或创建不同排序的嵌套列表时非常有用。

<!-- 从 5 开始编号 -->
<ol start="5">
  <li>第一项</li>
  <li>第二项</li>
</ol>

嵌套列表 嵌套列表允许在一个有序列表中创建子列表。只需将子列表的 <ol> 标签包含在父列表的 <li> 元素内即可。

<ol>
  <li>主列表项</li>
  <li>
    <ol>
      <li>子列表项 1</li>
      <li>子列表项 2</li>
    </ol>
  </li>
</ol>

样式化有序列表 可以使用 CSS 对有序列表进行样式化，以自定义项目符号、缩进和间距。例如：

ol {
  list-style-type: square;
  padding-left: 20px;
}

最佳实践

• 使用有序列表来表示按顺序或步骤安排的信息。
• 考虑使用 <type> 属性来指定合适的排序方式。
• 谨慎使用嵌套列表，因为它们可能会使文档难以阅读。
• 采用一致的样式化，使有序列表在整个文档中显示一致。