列表

列表有三种类型：无序列表、有序列表和定义列表。这里我们将介绍前两种，并在 HTML 中级教程中介绍定义列表。

无序列表和有序列表的工作方式相同，只是前者用于非顺序列表，列表项通常以项目符号开头；后者用于顺序列表，通常以递增的数字表示。

ul 标签用于定义无序列表，ol 标签用于定义有序列表。在列表内部，li 标签用于定义每个列表项。

将您的代码更改为以下内容


<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>
    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
    <ul>
        <li>To learn HTML</li>
        <li>To show off</li>
        <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
    </ul>

</body>

</html>

如果您在浏览器中查看此内容，您将看到一个项目符号列表。只需将 ul 标签更改为 ol，您就会发现列表将变为数字列表。

列表也可以包含在列表中，以形成结构化的项目层次结构。

将上面的列表代码替换为以下内容


<ul>
    <li>To learn HTML</li>
    <li>
        To show off
        <ol>
            <li>To my boss</li>
            <li>To my friends</li>
            <li>To my cat</li>
            <li>To the little talking duck in my brain</li>
        </ol>
    </li>
    <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

瞧。列表中的列表。您可以在其中再嵌套一个列表。再一个。依此类推。