HTML Academy · 课时

有序列表：ol、start、reversed 与 type

Q: 「有序列表：ol、start、reversed 与 type」这节课中我会学到什么？

创建编号列表并自定义其顺序。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建编号列表并自定义其顺序。

有序列表：ol、start、reversed 与 type 是 CoddyKit 上的免费 HTML Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是有序列表

有序列表显示顺序具有意义的项目：

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

有序列表元素

<ol>（有序列表）元素默认使用连续编号呈现列表项：

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

起始属性

start 属性设置起始编号：

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

反向属性

reversed 属性使编号从大到小，而不是从小到大：

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

类型属性

type 属性更改标记样式：

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

CSS 与 HTML 中的类型

优先使用 CSS 的 list-style-type，而不是 HTML 的 type 属性：

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

列表项上的值属性

使用 value 覆盖单个列表项的编号：

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

嵌套有序列表和无序列表

列表可以嵌套——有序列表和无序列表可以混合使用：

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

语义使用场景

当顺序具有意义时，使用 <ol>：

分步说明
排名结果（前 10 名列表）
法律文档的章节
食谱步骤
带编号章节的目录

CSS 中的计数器重置

CSS 计数器让您可以完全控制列表编号样式：

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

使用有序列表表示面包屑导航

从语义上看，面包屑导航是一个有序列表：

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

快速检查

哪个属性会使有序列表反向计数？

回顾：有序列表

有序列表要点：

<ol>——顺序重要的连续列表
start——从自定义编号开始
reversed——倒序计数
type——更改标记：1、a、A、i、I
<li> 上的 value——覆盖单个项目的编号
使用 CSS 的 list-style-type 和计数器获得更多控制

常见问题解答

「有序列表：ol、start、reversed 与 type」课时是免费的吗？

是的 — 「有序列表：ol、start、reversed 与 type」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「有序列表：ol、start、reversed 与 type」这节课中我会学到什么？

创建编号列表并自定义其顺序。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「有序列表：ol、start、reversed 与 type」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy