编辑“︁HTML有序列表”︁（章节）

= HTML有序列表 =

'''有序列表'''（Ordered List）是HTML中用于展示带编号项目的重要元素，通过<code><nowiki><ol></nowiki></code>标签实现。与无序列表不同，有序列表会自动为每个列表项添加数字、字母或罗马数字编号，适用于需要明确顺序的内容（如步骤、排名等）。

== 基本语法 ==
有序列表由以下两个核心标签组成：
* <code><nowiki><ol></nowiki></code>：定义列表容器
* <code><nowiki><li></nowiki></code>（List Item）：定义单个列表项

<syntaxhighlight lang="html">
<ol>
  <li>第一步：准备材料</li>
  <li>第二步：混合原料</li>
  <li>第三步：烘烤30分钟</li>
</ol>
</syntaxhighlight>

'''输出效果：'''
<ol>
  <li>第一步：准备材料</li>
  <li>第二步：混合原料</li>
  <li>第三步：烘烤30分钟</li>
</ol>

== 属性详解 ==
=== type 属性 ===
控制编号样式，支持5种类型：
{| class="wikitable"
! 值 !! 描述 !! 示例
|-
| 1 || 数字（默认） || 1, 2, 3
|-
| A || 大写字母 || A, B, C
|-
| a || 小写字母 || a, b, c
|-
| I || 大写罗马数字 || I, II, III
|-
| i || 小写罗马数字 || i, ii, iii
|}

<syntaxhighlight lang="html">
<ol type="A">
  <li>项目A</li>
  <li>项目B</li>
</ol>
</syntaxhighlight>

'''输出效果：'''
<ol type="A">
  <li>项目A</li>
  <li>项目B</li>
</ol>

=== start 属性 ===
指定起始编号（必须是整数）：

<syntaxhighlight lang="html">
<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
</ol>
</syntaxhighlight>

'''输出效果：'''
<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
</ol>

=== reversed 属性 ===
倒序显示编号（布尔属性）：

<syntaxhighlight lang="html">
<ol reversed>
  <li>第三项</li>
  <li>第二项</li>
  <li>第一项</li>
</ol>
</syntaxhighlight>

'''输出效果：'''
<ol reversed>
  <li>第三项</li>
  <li>第二项</li>
  <li>第一项</li>
</ol>

== 嵌套列表 ==
有序列表可多层嵌套，形成结构化内容：

<syntaxhighlight lang="html">
<ol>
  <li>第一章
    <ol type="a">
      <li>第一节</li>
      <li>第二节</li>
    </ol>
  </li>
  <li>第二章</li>
</ol>
</syntaxhighlight>

'''输出效果：'''
<ol>
  <li>第一章
    <ol type="a">
      <li>第一节</li>
      <li>第二节</li>
    </ol>
  </li>
  <li>第二章</li>
</ol>

== CSS 样式控制 ==
通过CSS可自定义编号样式（需使用<code>::marker</code>伪元素）：

<syntaxhighlight lang="html">
<style>
  ol.custom {
    color: blue;
  }
  ol.custom li::marker {
    font-weight: bold;
  }
</style>

<ol class="custom">
  <li>自定义样式项</li>
  <li>红色编号</li>
</ol>
</syntaxhighlight>

== 实际应用案例 ==
=== 烹饪食谱 ===
<syntaxhighlight lang="html">
<ol type="I">
  <li>准备工作
    <ol type="a">
      <li>洗净食材</li>
      <li>预热烤箱至180°C</li>
    </ol>
  </li>
  <li>制作步骤
    <ol start="3">
      <li>混合干性材料</li>
      <li>加入湿性材料</li>
    </ol>
  </li>
</ol>
</syntaxhighlight>

=== 软件开发流程 ===
<mermaid>
graph LR
  A[需求分析] --> B[设计]
  B --> C[编码]
  C --> D[测试]
</mermaid>

对应HTML实现：
<syntaxhighlight lang="html">
<ol>
  <li>需求分析</li>
  <li>设计
    <ol type="a">
      <li>架构设计</li>
      <li>UI设计</li>
    </ol>
  </li>
  <li>编码</li>
  <li>测试</li>
</ol>
</syntaxhighlight>

== 数学公式示例 ==
有序列表在数学证明中的应用：
<math>
\begin{enumerate}
  \item 设<math>f(x) = x^2</math>
  \item 求导得<math>f'(x) = 2x</math>
  \item 当<math>x=0</math>时导数为0
\end{enumerate}
</math>

HTML实现：
<syntaxhighlight lang="html">
<ol>
  <li>设<math>f(x) = x^2</math></li>
  <li>求导得<math>f'(x) = 2x</math></li>
  <li>当<math>x=0</math>时导数为0</li>
</ol>
</syntaxhighlight>

== 浏览器兼容性 ==
所有现代浏览器完全支持有序列表及其属性，包括：
* Chrome 1+
* Firefox 1+
* Safari 1+
* Edge 12+
* Opera 7+

== 最佳实践建议 ==
1. 对于超过20项的列表，考虑分页或分组显示
2. 复杂编号系统可结合CSS计数器实现
3. 移动端显示时确保编号有足够点击区域
4. 嵌套层级建议不超过3层以保持可读性

== 参见 ==
* [[HTML无序列表]]
* [[HTML定义列表]]
* CSS列表样式属性

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]