钟文志的部落格

Appearance

在 HTML 中，列表用于组织和显示项目。HTML 提供了三种主要的列表类型：无序列表、有序列表和定义列表。以下是关于 HTML 列表的详细说明和示例：

无序列表（Unordered List） ​

无序列表使用 <ul> 标签定义，列表项使用 <li> 标签表示。无序列表的项目通常以圆点（bullet）显示。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表示例</title>
</head>
<body>
    <h2>无序列表</h2>
    <ul>
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
    </ul>
</body>
</html>

有序列表（Ordered List） ​

有序列表使用 <ol> 标签定义，列表项使用 <li> 标签表示。有序列表的项目通常以数字或字母显示。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表示例</title>
</head>
<body>
    <h2>有序列表</h2>
    <ol>
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
    </ol>
</body>
</html>

定义列表（Definition List） ​

定义列表使用 <dl> 标签定义。每个定义条目使用 <dt> 标签表示术语，使用 <dd> 标签表示描述。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义列表示例</title>
</head>
<body>
    <h2>定义列表</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>一种编程语言</dd>
    </dl>
</body>
</html>

嵌套列表 ​

列表可以嵌套使用，即一个列表项中可以包含另一个列表。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套列表示例</title>
</head>
<body>
    <h2>嵌套列表</h2>
    <ul>
        <li>项目 1
            <ul>
                <li>子项目 1.1</li>
                <li>子项目 1.2</li>
            </ul>
        </li>
        <li>项目 2</li>
        <li>项目 3
            <ol>
                <li>子项目 3.1</li>
                <li>子项目 3.2</li>
            </ol>
        </li>
    </ul>
</body>
</html>

自定义列表样式 ​

使用 CSS 可以自定义列表样式。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表样式</title>
    <style>
        ul.custom-list {
            list-style-type: square;
            padding-left: 20px;
        }
        ol.custom-list {
            list-style-type: upper-roman;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <h2>自定义无序列表</h2>
    <ul class="custom-list">
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
    </ul>
    
    <h2>自定义有序列表</h2>
    <ol class="custom-list">
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
    </ol>
</body>
</html>

通过这些示例，您可以在 HTML 文档中灵活地使用和自定义列表，从而更好地组织和展示内容。