HTML 零基础教程：HTML 列表 (<ul>, <ol>) 使用指南

列表是网页中最常见的结构之一，它能够将一系列相关信息分组，使其条理清晰、易于阅读。HTML 提供了三种主要的列表类型：无序列表、有序列表和定义列表。

掌握它们，能让您的网页内容组织能力迈上一个新台阶！

一、 无序列表：<ul> (Unordered List)

无序列表用于表示一组不强调排列顺序的项目。在默认情况下，列表的每一项前面会显示一个项目符号（通常是实心圆点）。

核心标签

• <ul>： 定义整个无序列表的容器。

• <li>： (List Item) 定义列表中的每一个项目。

示例代码

<h3>购物清单</h3>
<ul>
    <li>牛奶</li>
    <li>面包</li>
    <li>鸡蛋</li>
</ul>

二、 有序列表：<ol> (Ordered List)

有序列表用于表示一组强调排列顺序的项目，例如步骤、排名或目录编号。在默认情况下，列表的每一项会以数字进行标记。

核心标签

• <ol>： 定义整个有序列表的容器。

• <li>： (List Item) 定义列表中的每一个项目。

常用属性

type标记类型。 定义使用的编号类型。A (大写字母), a (小写字母), I (大写罗马数字), i (小写罗马数字), 1 (数字)

start起始值。 定义列表开始的数值（而不是从 1 或 A 开始）。start="5"

reversed倒序。 列表以倒序编号。reversed

示例代码

<h3>制作咖啡的步骤</h3>
<ol type="1">
    <li>煮沸热水。</li>
    <li>将咖啡粉放入滤纸。</li>
    <li>慢慢倒入热水，等待滴滤完成。</li>
    <li>加入糖和牛奶（可选）。</li>
</ol>

<h3>倒序排名示例 (从第 3 名开始)</h3>
<ol type="I" start="3" reversed>
    <li>铜牌 (I)</li>
    <li>银牌 (II)</li>
    <li>金牌 (III)</li>
</ol>

三、 定义列表：<dl> (Definition List)

定义列表用于表示一组术语及其定义、问答集或带有描述的键值对。它不使用项目符号或数字。

核心标签

• <dl>： 定义整个定义列表的容器。

• <dt>： (Definition Term) 定义列表中的术语或名称。

• <dd>： (Definition Description) 定义对该术语的描述或解释。

示例代码

<h3>网页技术术语</h3>
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于构建网页结构。</dd>

    <dt>CSS</dt>
    <dd>层叠样式表，用于控制网页的样式和布局。</dd>

    <dt>JavaScript</dt>
    <dd>一种脚本语言，用于实现网页的交互功能。</dd>
</dl>

四、 列表的嵌套（复杂结构）

您可以在一个列表项 (<li> 或 <dd>) 内部嵌套另一个完整的列表结构，以创建多级或树形结构。

嵌套示例代码：

<h3>旅游目的地推荐</h3>
<ul>
    <li>
        亚洲
        <ol>
            <li>日本（有序的行程）
                <ul>
                    <li>东京 (无序的景点)</li>
                    <li>京都</li>
                </ul>
            </li>
            <li>泰国</li>
        </ol>
    </li>
    <li>欧洲</li>
</ul>

总结与列表样式

• 选择正确类型： 当顺序重要时用 <ol>，不重要时用 <ul>，定义术语时用 <dl>。

• 结构正确： 确保所有的列表项 (<li> 或 <dt>, <dd>) 都直接包含在正确的容器 (<ul>, <ol>, <dl>) 中。

• 样式分离： 列表前方的圆点或数字的样式（如颜色、大小、形状）应该通过 CSS 来控制，而不是依赖 HTML 属性。