揭秘 HTML 有序列表：从基础到高级的全面教程

html 有序列表 OL 标签 数字列表 嵌套列表

基础

创建有序列表

使用 <ol> 标签创建有序列表：

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

设置列表样式类型

默认情况下，有序列表使用数字进行排序。您可以使用 type 属性设置其他样式类型：

• 1：数字（默认）
• a：小写字母
• A：大写字母
• i：罗马数字小写
• I：罗马数字大写

例如，要使用罗马数字排序列表，可以使用以下代码：

<ol type="i">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

高级

嵌套列表

您可以将有序列表嵌套在一起以创建更复杂的多级列表。例如，以下代码创建了一个带有嵌套子列表的有序列表：

<ol>
  <li>主项目 1
    <ol>
      <li>子项目 1.1</li>
      <li>子项目 1.2</li>
    </ol>
  </li>
  <li>主项目 2</li>
</ol>

开始值

使用 start 属性可以设置列表中第一个项目的起始值。例如，以下代码从 3 开始排序列表：

<ol start="3">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

反向排序

使用 reversed 属性可以反向排序列表。例如，以下代码从倒数第一个项目开始排序列表：

<ol reversed>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

自定义列表项标记

默认情况下，有序列表项标记为数字或字母。您可以使用 value 属性自定义标记。例如，以下代码使用方括号标记列表项：

<ol>
  <li value="["]项目 1</li>
  <li value="["]项目 2</li>
  <li value="["]项目 3</li>
</ol>

无序列表

在某些情况下，您可能希望将有序列表转换为无序列表。您可以使用 style="list-style-type: none;" 样式属性隐藏列表标记：

<ol style="list-style-type: none;">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

结论

HTML 有序列表是组织和呈现数据和信息的强大工具。通过本教程，您已经了解了创建和自定义有序列表的基础知识和高级技巧。善用这些技巧可以增强您的网页设计和内容展示能力。