上一篇： HTML 段落

下一篇： HTML 链接

HTML 列表

在本教程中，我们将学习如何在 HTML 文档中创建和使用有序列表、无序列表以及它们的嵌套。列表是一种常见的方式，用于在网页上组织和显示相关信息。

一、什么是 HTML 列表？

HTML 支持两种主要类型的列表：

  1. 有序列表（Ordered List）：由 <ol> 标签表示，列表项带有数字或字母编号，按顺序排列。
  2. 无序列表（Unordered List）：由 <ul> 标签表示，列表项带有项目符号，不按特定顺序排列。

每个列表都由一个或多个列表项（List Item）组成，这些列表项由 <li> 标签表示。

二、创建 HTML 列表

创建有序列表：

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

创建无序列表：

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

三、嵌套 HTML 列表

你还可以将一个列表嵌套在另一个列表项中。例如，在无序列表中添加一个有序子列表：

                <ul>
                <li>第一项</li>
                <li>第二项
                    <ol>
                    <li>第二项的子项 1</li>
                    <li>第二项的子项 2</li>
                    </ol>
                </li>
                <li>第三项</li>
                </ul>

四、HTML 列表示例

以下是一个 HTML 示例，展示了如何使用有序列表、无序列表以及它们的嵌套：

                <!DOCTYPE html>
                <html lang="en">
                <head>
                <meta charset="UTF-8">
                <title>HTML 列表教程</title>
                </head>
                <body>
                <h1>欢迎来到 HTML 列表教程！</h1>

                <h2>有序列表示例</h2>
                <p>下面是一个有序列表，列出了完成项目的步骤：</p>
                <ol>
                    <li>创建计划</li>
                    <li>分配任务</li>
                    <li>执行任务</li>
                    <li>监控进度</li>
                    <li>完成项目</li>
                </ol>

                <h2>无序列表示例</h2>
                <p>下面是一个无序列表，列出了一些水果：</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉
                    <ol>
                        <li>印度香蕉</li>
                        <li>菲律宾香蕉</li>
                    </ol>
                    </li>
                    <li>橙子</li>
                </ul>
                </body>
                </html>

通过本教程，你应该已经了解了如何在 HTML 文档中创建和使用有序列表、无序列表以及它们的嵌套。继续尝试并实践这些概念，以便更好地掌握 HTML 列表。