HTML有序列表怎么写？ol标签创建方法与样式控制教程

HTML有序列表用于展示有先后顺序的内容，比如操作步骤、排名列表等，核心是通过<ol>标签配合<li>标签实现。默认情况下有序列表会自动给每个列表项添加数字编号，开发者可以通过属性和CSS自定义编号的类型、样式、起始值等。

一、基础有序列表的创建

最基础的有序列表只需要使用<ol>作为容器，内部嵌套多个<li>标签即可，每个<li>对应一个列表项，浏览器会自动为每个<li>生成连续的数字编号。

<ol>
  <li>打开项目配置文件</li>
  <li>修改数据库地址参数</li>
  <li>重启服务验证修改结果</li>
</ol>

二、通过属性控制列表编号类型

<ol>标签自带type属性，可以修改默认的编号类型，可选值包括：

• 1：默认数字编号（1,2,3...）
• a：小写英文字母（a,b,c...）
• A：大写英文字母（A,B,C...）
• i：小写罗马数字（i,ii,iii...）
• I：大写罗马数字（I,II,III...）

示例代码如下：

<!-- 小写字母编号 -->
<ol type="a">
  <li>第一步操作</li>
  <li>第二步操作</li>
</ol>

<!-- 大写罗马数字编号 -->
<ol type="I">
  <li>一等奖</li>
  <li>二等奖</li>
</ol>

三、设置列表起始编号

如果需要让列表编号不从1开始，可以使用<ol>的start属性，属性值为数字，表示起始的编号值。

<!-- 编号从3开始 -->
<ol start="3">
  <li>第三项内容</li>
  <li>第四项内容</li>
</ol>

四、CSS控制有序列表样式

除了标签自带的属性，还可以通过CSS更灵活地控制有序列表的样式，常用的CSS属性包括list-style-type、counter-reset、counter-increment等。

1. 修改编号类型

list-style-type可以替代<ol>的type属性，取值和type属性一致，同时还可以设置为none隐藏默认编号。

/* 隐藏有序列表默认编号 */
ol.no-number {
  list-style-type: none;
}

/* 使用小写希腊字母编号 */
ol.greek-number {
  list-style-type: lower-greek;
}

2. 自定义编号样式

如果需要自定义编号的颜色、大小、前后缀等，可以结合counter-reset和counter-increment实现，示例代码如下：

/* 重置计数器，名称为step */
ol.custom-ol {
  counter-reset: step;
  list-style-type: none;
  padding-left: 0;
}

/* 每个li增加计数器值，自定义编号样式 */
ol.custom-ol li {
  counter-increment: step;
  margin-bottom: 10px;
}

ol.custom-ol li::before {
  content: "步骤" counter(step) "：";
  color: #1890ff;
  font-weight: bold;
  margin-right: 8px;
}

对应的HTML结构：

<ol class="custom-ol">
  <li>初始化项目环境</li>
  <li>安装依赖包</li>
  <li>启动开发服务</li>
</ol>

五、嵌套有序列表

有序列表可以嵌套使用，嵌套后的子列表会继承父列表的编号规则，也可以单独设置子列表的样式。

<ol>
  <li>准备工作
    <ol type="a">
      <li>准备开发工具</li>
      <li>拉取项目代码</li>
    </ol>
  </li>
  <li>开发工作
    <ol type="a">
      <li>编写业务逻辑</li>
      <li>编写单元测试</li>
    </ol>
  </li>
</ol>

HTML_ol标签有序列表list-style-typecounter-incrementcounter-reset修改时间：2026-06-03 22:43:46