编程马·菜鸟教程

Appearance

7. HTML列表标签（网页内容排版，提升整洁度） ​

7.1 无序列表：ul+li ​

基本用法 ​

无序列表使用 <ul> 标签定义，每个列表项使用 <li> 标签。

html
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

常用场景 ​

  • 导航栏：使用无序列表创建水平或垂直导航菜单
  • 商品列表：展示商品信息
  • 知识点罗列：列出要点或步骤

列表样式 ​

可以使用CSS的 list-style-type 属性修改列表项的标记样式：

  • disc：默认，实心圆点
  • circle：空心圆点
  • square：实心方块
  • none：无标记

7.2 有序列表：ol+li ​

基本用法 ​

有序列表使用 <ol> 标签定义，每个列表项使用 <li> 标签，会自动为列表项添加编号。

html
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

常用场景 ​

  • 步骤：展示操作步骤或流程
  • 排名：展示排行榜或排名
  • 教程流程：展示教程的学习顺序

列表样式 ​

可以使用CSS的 list-style-type 属性修改编号样式：

  • decimal：默认，阿拉伯数字（1, 2, 3...）
  • decimal-leading-zero：带前导零的数字（01, 02, 03...）
  • lower-roman：小写罗马数字（i, ii, iii...）
  • upper-roman：大写罗马数字（I, II, III...）
  • lower-alpha：小写字母（a, b, c...）
  • upper-alpha：大写字母（A, B, C...）

7.3 自定义列表：dl+dt+dd ​

基本用法 ​

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

html
<dl>
    <dt>术语1</dt>
    <dd>术语1的描述</dd>
    <dt>术语2</dt>
    <dd>术语2的描述</dd>
</dl>

常用场景 ​

  • 说明：解释术语或概念
  • 介绍：展示产品特性或服务内容
  • FAQ：常见问题及答案

7.4 列表嵌套 ​

基本用法 ​

列表可以相互嵌套，创建复杂的层级结构。

html
<ul>
    <li>主列表项1
        <ul>
            <li>子列表项1-1</li>
            <li>子列表项1-2</li>
        </ul>
    </li>
    <li>主列表项2
        <ol>
            <li>子列表项2-1</li>
            <li>子列表项2-2</li>
        </ol>
    </li>
</ul>

注意事项 ​

  • 嵌套列表应该正确缩进，提高代码可读性
  • 避免过多的嵌套层级，一般不超过3层
  • 可以混合使用不同类型的列表

7.5 实战：制作导航列表、步骤列表、FAQ自定义列表 ​

实战目标 ​

制作包含导航列表、步骤列表和FAQ自定义列表的网页。

代码示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML列表标签实战</title>
</head>
<body>
    <h1>HTML列表标签的使用</h1>
    
    <!-- 导航列表 -->
    <h2>一、导航列表</h2>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品</a>
                <ul>
                    <li><a href="#">产品1</a></li>
                    <li><a href="#">产品2</a></li>
                    <li><a href="#">产品3</a></li>
                </ul>
            </li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    
    <hr>
    
    <!-- 步骤列表 -->
    <h2>二、步骤列表</h2>
    <ol>
        <li>准备HTML文件</li>
        <li>编写基本结构</li>
        <li>添加内容和标签</li>
        <li>测试和调试</li>
        <li>部署上线</li>
    </ol>
    
    <hr>
    
    <!-- FAQ自定义列表 -->
    <h2>三、FAQ自定义列表</h2>
    <dl>
        <dt>什么是HTML？</dt>
        <dd>HTML是超文本标记语言，用于创建网页的结构。</dd>
        
        <dt>HTML和CSS的关系是什么？</dt>
        <dd>HTML负责网页的结构，CSS负责网页的样式和布局。</dd>
        
        <dt>如何学习HTML？</dt>
        <dd>可以通过在线教程、书籍和实践项目来学习HTML。</dd>
        
        <dt>HTML5有哪些新特性？</dt>
        <dd>HTML5增加了语义化标签、媒体标签、新的表单类型等特性。</dd>
    </dl>
    
    <hr>
    
    <h2>列表样式示例</h2>
    
    <!-- 无序列表样式 -->
    <h3>无序列表样式：</h3>
    <ul style="list-style-type: disc;">
        <li>默认样式（disc）</li>
    </ul>
    <ul style="list-style-type: circle;">
        <li>空心圆点（circle）</li>
    </ul>
    <ul style="list-style-type: square;">
        <li>实心方块（square）</li>
    </ul>
    <ul style="list-style-type: none;">
        <li>无标记（none）</li>
    </ul>
    
    <!-- 有序列表样式 -->
    <h3>有序列表样式：</h3>
    <ol style="list-style-type: decimal;">
        <li>阿拉伯数字（decimal）</li>
    </ol>
    <ol style="list-style-type: lower-roman;">
        <li>小写罗马数字（lower-roman）</li>
    </ol>
    <ol style="list-style-type: lower-alpha;">
        <li>小写字母（lower-alpha）</li>
    </ol>
</body>
</html>

小结 ​

HTML列表标签是网页内容排版的重要工具，通过合理使用无序列表、有序列表和自定义列表，可以使网页内容更加整洁、有条理。同时，列表的嵌套使用可以创建复杂的层级结构，适应各种内容展示需求。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建