HTML 有序列表-代码号

HTML 有序列表（Ordered List）用于按照特定顺序展示列表项，这种顺序通常具有逻辑上的重要性或层次关系。当需要呈现食谱步骤、算法流程或优先级列表时，<ol> 元素能够确保内容以明确的顺序结构展示。
有序列表中的每个项目都包含在 <li>（列表项）标签内。默认情况下，列表使用阿拉伯数字（1、2、3...）进行编号，同时 HTML 也支持其他编号格式，包括字母和罗马数字。

基本语法和示例

基础有序列表示例

以下示例展示了包含四个编程语言主题的有序列表：

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>HTML5</li>
</ol>

输出效果：
1.HTML
2.CSS
3.JavaScript
4.HTML5

使用 type 属性定义编号样式

type 属性允许开发者指定不同的编号样式，常用的值包括：

类型值	描述
"1"	默认值，阿拉伯数字
"A"	大写字母（A, B, C）
"a"	小写字母（a, b, c）
"I"	大写罗马数字（I, II, III）
"i"	小写罗马数字（i, ii, iii）

字母编号示例

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>HTML5</li>
</ol>

输出效果：
A. HTML
B. CSS
C. JavaScript
D. HTML5

使用 start 属性设置起始值

start 属性用于指定列表的起始编号，适用于需要从特定值开始编号的场景。

起始值示例

<ol type="i" start="5">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>HTML5</li>
</ol>

输出效果：
v. HTML
vi. CSS
vii. JavaScript
viii. HTML5
开发者可以组合使用 type 和 start 属性，例如：

type="A" 和 start="5" → 从 "E" 开始
type="I" 和 start="10" → 从 "X" 开始

使用 reversed 属性实现反向排序

HTML5 引入的 reversed 属性可以将列表项以反向顺序呈现。
反向排序示例

<ol reversed>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>HTML5</li>
</ol>

输出效果：
4. HTML
3. CSS
2. JavaScript
1.HTML5
组合属性示例

<ol type="I" start="10" reversed>
  <li>HTML</li>
  <li>CSS</li>
  <li>HTML5t</li>
</ol>

输出效果：
X. HTML
IX. CSS
VIII. HTML5

嵌套列表结构

HTML 支持在列表中嵌套其他列表，从而创建层次化的内容结构。

有序列表嵌套示例

<ol type="I">
  <li>
    认识HTML
    <ol type="a">
      <li>介绍HTML</li>
      <li>学习HTML</li>
    </ol>
  </li>
  <li>
    了解HTML
    <ol type="a">
      <li>编写HTML</li>
      <li>使用HTML</li>
    </ol>
  </li>
</ol>

输出效果：
I. 认识HTML
a. 介绍HTML
b. 学习HTML
II. 了解HTML
a. 编写HTML
b. 使用HTML

混合类型嵌套示例

<ol>
  <li>
    炒饭需要的食材
    <ul>
      <li>米饭</li>
      <li>鸡蛋</li>
      <li>食用油</li>
    </ul>
  </li>
  <li>大火翻炒</li>
  <li>
    还需要配料
    <ul>
      <li>葱花</li>
      <li>麻辣鲜</li>
    </ul>
  </li>
</ol>

输出效果：
1.炒饭需要的食材
• 米饭
• 鸡蛋
• 食用油
2.大火翻炒
3.还需要配料
• 葱花
• 麻辣鲜

使用 CSS 设置列表样式

CSS 提供了更精细的列表样式控制方式：
基础样式示例

<ol style="list-style-type: upper-roman;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<ol style="line-height: 180%;">
  <li>Python</li>
  <li>Go</li>
</ol>

CSS 支持多种列表样式类型，包括：decimal、decimal-leading-zero、lower-roman、upper-roman、lower-alpha、upper-alpha 等。

高级样式定制

开发者可以使用 ::marker 伪元素自定义标记样式：

<style>
  ol.custom-markers::marker {
    color: #2c3e50;
    font-weight: bold;
  }
</style>

<ol class="custom-markers">
  <li>上课</li>
  <li>学习</li>
  <li>下课</li>
</ol>

也可以使用 list-style-image 属性将默认标记替换为自定义图标：

<ol style="list-style-image: url('bullet-point.png');">
  <li>了解</li>
  <li>学习</li>
  <li>使用</li>
</ol>

访问性考虑

有序列表不仅提供视觉组织功能，还能增强内容的可访问性。屏幕阅读器能够识别 <ol> 元素，并向用户传达项目的顺序关系。这使得有序列表特别适合用于呈现操作指南、步骤说明或任何顺序重要的内容。
为提升可访问性，建议：
在 <li> 标签中提供有意义的文本内容
避免将列表用于布局或缩进目的
结合适当的标题结构和 ARIA 标签使用
确保列表在多种设备和辅助技术下都能正常访问