有序列表的html代码是：HTML有序列表，从基础到应用

来源：网络作者：日期：2025-11-07 18:54:07

什么是HTML有序列表？

HTML有序列表是一种按照特定顺序排列的列表，通常用于展示需要按顺序阅读的内容，如步骤说明、排名列表或编号条目，与无序列表不同,有序列表中的项目会自动或手动添加编号。

有序列表的html代码是：HTML有序列表，从基础到应用

基本语法

HTML有序列表使用<ol>标签定义，每个列表项使用<li>标签表示,基本语法如下：

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

自定义编号样式

HTML允许开发者自定义有序列表的编号样式,通过CSS实现：

<style>
  .custom-ol {
    counter-reset: section;
  }
  .custom-ol li {
    display: block;
    text-align: disc;
    background: #f9f9f9;
    padding: 8px;
    margin: 5px 0;
  }
  .custom-ol li::marker {
    content: counter(section) "." ;
    counter-increment: section;
  }
</style>
<ol class="custom-ol">
  <li>自定义编号的第一项</li>
  <li>自定义编号的第二项</li>
</ol>

应用场景

有序列表在以下场景中特别有用：

步骤说明：如操作指南、烹饪食谱
排名列表：如排行榜、评分系统
：如分步教学
导航菜单：按顺序排列的导航选项

实际应用示例

<!DOCTYPE html>
<html>
<head>HTML有序列表示例</title>
  <style>
    .recipe ol {
      padding-left: 30px;
    }
    .recipe li {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="recipe">
    <h1>简易意大利面食谱</h1>
    <ol>
      <li>准备材料：意大利面、番茄酱、肉末、洋葱、大蒜</li>
      <li>煮意大利面，按照包装说明煮熟</li>
      <li>炒香洋葱和大蒜，加入肉末翻炒</li>
      <li>加入番茄酱，小火慢炖5分钟</li>
      <li>将煮好的意大利面与酱料混合，搅拌均匀</li>
      <li>装盘，撒上帕玛森奶酪即可</li>
    </ol>
  </div>
</body>
</html>