freeCodeCamp项目教程：HTML有序列表(ol)的创建与应用

freeCodeCamp项目教程：HTML有序列表(ol)的创建与应用

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

什么是有序列表？

有序列表（Ordered List）是HTML中用于展示带编号项目列表的重要元素。与无序列表（ul）使用项目符号不同，有序列表会自动为每个列表项添加数字编号，非常适合需要展示步骤顺序、排名或任何需要编号的场景。

有序列表的基本语法

有序列表由三个核心标签组成：

1. <ol>：定义有序列表的开始和结束
2. <li>：定义列表中的每个项目（必须嵌套在ol内）

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

实战练习：创建猫咪讨厌事物的有序列表

在freeCodeCamp的这个练习中，我们需要完善一个猫咪相册网页，添加"猫咪最讨厌的3件事"的有序列表。

原始代码分析

原始代码已经包含：

• 网页标题<h2>
• 主要内容区域<main>
• 无序列表展示"猫咪喜欢的事物"
• 预留了"猫咪讨厌的事物"标题

解决方案步骤

1. 在"Top 3 things cats hate:"段落下方添加<ol>开始标签
2. 在<ol>内部添加三个<li>元素
3. 为每个<li>填写猫咪讨厌的具体内容
4. 用</ol>闭合有序列表

完整代码示例

<p>Top 3 things cats hate:</p>
<ol>
  <li>水</li>
  <li>其他猫</li>
  <li>噪音</li>
</ol>

常见错误与验证

在完成这个练习时，系统会检查以下关键点：

1. 确保只有一个<ol>元素
2. 确认有序列表中有三个<li>项目
3. 检查所有标签都有正确的闭合标签
4. 验证列表项内容不为空

有序列表的进阶知识

虽然本练习只要求基础用法，但有序列表还有更多特性：

1. 编号类型：可以使用type属性改变编号样式（1, A, a, I, i等）
2. 起始值：start属性可以设置起始编号
3. 反向列表：reversed属性可以让编号倒序
4. CSS样式：可以通过CSS自定义编号样式

学习建议

1. 对比无序列表(ul)和有序列表(ol)的差异
2. 练习嵌套列表（列表中的列表）
3. 尝试为列表项添加链接或其他HTML元素
4. 使用开发者工具查看不同浏览器的默认列表样式

通过这个练习，你不仅掌握了有序列表的基本用法，也为后续学习更复杂的HTML结构打下了基础。有序列表在制作目录、步骤说明、排名展示等场景中都非常实用。

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp