html有序列表：HTML有序列表，从基础到应用

来源：网络作者：日期：2025-10-13 02:09:20

什么是HTML有序列表？

有序列表（<ol>）是HTML中用于创建编号列表的标签，与无序列表（<ul>）不同，有序列表会自动为每个列表项（<li>）分配编号，通常是从1开始的数字，有序列表适用于需要强调顺序或层级的内容，例如步骤说明、排行榜、索引等。

基本语法

有序列表的基本结构如下：

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

浏览器会自动将编号显示为：1.、2.、3. 等。

有序列表的属性

HTML5中,有序列表支持以下属性（尽管HTML5简化了部分属性，但以下属性在HTML4中有效，HTML5中仍可使用）：

type：设置编号的样式，如1（默认）、A、a、I、i等。
start：设置列表的起始编号。
reversed：是否倒序排列列表项（HTML5新增）。

示例：

<!-- 默认编号 -->
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
<!-- 使用type属性改变编号样式 -->
<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
<!-- 从10开始编号 -->
<ol start="10">
  <li>第一项</li>
  <li>第二项</li>
</ol>
<!-- 倒序排列 -->
<ol reversed>
  <li>第三项</li>
  <li>第二项</li>
  <li>第一项</li>
</ol>

有序列表与无序列表的区别

元素	用途	编号方式
`<ol>`	用于需要顺序或层级的内容	自动编号
`<ul>`	用于无序或未编号的内容	使用圆点、方块等

有序列表的嵌套

有序列表可以嵌套使用,以表示更复杂的层级结构：

<ol>
  <li>第一项
    <ol>
      <li>子项1</li>
      <li>子项2</li>
    </ol>
  </li>
  <li>第二项
    <ol>
      <li>子项1</li>
      <li>子项2</li>
    </ol>
  </li>
</ol>

嵌套列表会自动继承父列表的编号样式,但也可以通过CSS自定义。

应用场景

有序列表适用于以下场景：

步骤说明：如操作指南、烹饪步骤等。
排行榜：如比赛排名、下载排行榜等。
索引：如目录、导航菜单中的层级结构。
：如课程大纲、学习路径等。

示例：完整的有序列表页面

下面是一个完整的HTML示例,展示有序列表在实际页面中的应用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">HTML有序列表示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    h1 {
      color: #333;
    }
    ol {
      margin-left: 20px;
    }
    li {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>HTML有序列表示例</h1>
  <h2>基本有序列表</h2>
  <ol>
    <li>学习HTML基础</li>
    <li>掌握CSS样式</li>
    <li>学习JavaScript交互</li>
  </ol>
  <h2>自定义编号样式</h2>
  <ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <h2>嵌套有序列表</h2>
  <ol>
    <li>前端开发
      <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ol>
    </li>
    <li>后端开发
      <ol>
        <li>Python</li>
        <li>Java</li>
        <li>Node.js</li>
      </ol>
    </li>
  </ol>
</body>
</html>

HTML有序列表（<ol>）是一个简单但功能强大的HTML元素，能够帮助开发者清晰地展示顺序性内容，通过合理使用type、start和reversed属性，以及嵌套列表，可以创建出结构清晰、易于理解的页面内容，无论你是初学者还是有经验的开发者，掌握有序列表的使用都能提升网页的可读性和用户体验。

希望本文能帮助你更好地理解和应用HTML有序列表！

html有序列表：HTML有序列表，从基础到应用