0Pricing
HTML for Kids · 课时

列表：有序列表和无序列表

创建编号列表和项目符号列表

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

列表：有序列表和无序列表

欢迎来到下一课！今天，我们将学习如何在 HTML 中创建列表。列表有助于组织信息，使内容更易于阅读。

列表：有序列表和无序列表 — 插图 1

什么是列表？

列表是将相关项目归纳在一起的好方法。HTML 主要有两种列表：

  • 有序列表：项目带有编号（1、2、3……）。
  • 无序列表：项目带有项目符号。

让我们学习如何创建这两种列表！

创建有序列表

使用 <ol> 标签可以创建有序列表。列表中的每个项目都使用 <li>（列表项目）标签添加。

示例：

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to school</li>
</ol>

创建无序列表

使用 <ul> 标签可以创建无序列表。与有序列表一样，每个项目都使用 <li> 标签添加。

示例：

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

嵌套列表

您可以在一个列表中创建另一个列表，这称为嵌套列表。您可以在有序列表和无序列表中相互嵌套。

示例：

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

带描述的列表

HTML 还允许您使用 <dl>、<dt> 和 <dd> 标签创建描述列表：

  • <dl>：定义列表。
  • <dt>：定义术语（标题）。
  • <dd>：定义描述。

示例：

<dl>
  <dt>HTML</dt>
  <dd>The language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>The language used to style web pages.</dd>
</dl>

为列表添加样式

您可以使用 CSS 更改列表的外观。例如，您可以更改项目符号或数字的类型。

示例：

<style>
  ul {
    list-style-type: square; /* Changes bullets to squares */
  }
  ol {
    list-style-type: upper-roman; /* Changes numbers to Roman numerals */
  }
</style>

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

动手试一试

让我们创建一个包含有序列表和无序列表的简单网页。下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>My To-Do List</h1>
    <h2>Morning Routine</h2>
    <ol>
      <li>Wake up</li>
      <li>Brush my teeth</li>
      <li>Have breakfast</li>
    </ol>
    <h2>Shopping List</h2>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
    </ul>
  </body>
</html>

做得很好！

恭喜您！您已经学会了如何创建有序列表、无序列表、嵌套列表和描述列表。这些都是整理网页信息的实用工具。在下一课中，我们将学习如何添加链接，以连接不同的页面和网站。准备好继续探索吧！

列表：有序列表和无序列表 — 插图 10

常见问题解答

「列表：有序列表和无序列表」课时是免费的吗？

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

「列表：有序列表和无序列表」这节课中我会学到什么？

创建编号列表和项目符号列表 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML for Kids 需要有经验吗？

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

「列表：有序列表和无序列表」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 标题与段落
  2. 列表：有序列表和无序列表
  3. 链接：连接整个网络
  4. 图像：向网页添加图片
← 返回 HTML for Kids