HTML列表

组织内容的有力工具

全站首页 频道首页

HTML列表概述

HTML提供了三种类型的列表：无序列表、有序列表和定义列表。列表是组织相关项目的有效方式。

提示： 列表不仅用于显示项目列表，还可以用于创建导航菜单、步骤说明等。

列表类型比较

列表类型 标签 用途 示例
无序列表 <ul> 项目顺序不重要 购物清单
有序列表 <ol> 项目顺序重要 烹饪步骤
定义列表 <dl> 术语和定义 词汇表

列表的语义重要性

列表不仅提供视觉结构，还提供语义信息：

  • 屏幕阅读器可以识别列表结构并告知用户列表中的项目数量
  • 搜索引擎可以更好地理解内容的组织和关系
  • 嵌套列表创建层次结构，帮助理解内容关系

无序列表

无序列表使用<ul>标签创建，列表项使用<li>标签。默认显示为带项目符号的列表。

基本无序列表

无序列表 
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
  • 苹果
  • 香蕉
  • 橙子

无序列表样式

使用type属性或CSS改变列表项标记：

列表样式 
<!-- 使用type属性（已废弃，建议使用CSS） -->
<ul type="circle">
    <li>圆形项目符号</li>
</ul>

<!-- 使用CSS -->
<ul style="list-style-type: square;">
    <li>方形项目符号</li>
</ul>

<ul style="list-style-type: none;">
    <li>无项目符号</li>
</ul>
  • 圆形项目符号
  • 方形项目符号
  • 无项目符号

自定义列表标记

使用CSS自定义列表标记：

自定义列表标记 
<style>
.custom-list {
    list-style-type: none;
    padding-left: 0;
}

.custom-list li {
    padding-left: 1.5em;
    position: relative;
}

.custom-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: green;
    font-weight: bold;
}

.icon-list {
    list-style-type: none;
    padding-left: 0;
}

.icon-list li::before {
    content: "➤";
    margin-right: 0.5em;
    color: #82255E;
}
</style>

<ul class="custom-list">
    <li>已完成的任务</li>
    <li>另一个已完成的任务</li>
</ul>

<ul class="icon-list">
    <li>带图标的项目</li>
    <li>另一个带图标的项目</li>
</ul>

有序列表

有序列表使用<ol>标签创建，列表项使用<li>标签。默认显示为带数字的列表。

基本有序列表

有序列表 
<ol>
    <li>第一步：准备材料</li>
    <li>第二步：混合材料</li>
    <li>第三步：烘烤</li>
</ol>
  1. 第一步：准备材料
  2. 第二步：混合材料
  3. 第三步：烘烤

有序列表属性

属性 描述 示例
type 编号类型 type="A"
start 起始数字 start="5"
reversed 倒序编号 reversed

有序列表示例

有序列表属性 
<!-- 大写字母编号 -->
<ol type="A">
    <li>项目A</li>
    <li>项目B</li>
</ol>

<!-- 罗马数字 -->
<ol type="I">
    <li>项目I</li>
    <li>项目II</li>
</ol>

<!-- 从5开始 -->
<ol start="5">
    <li>第五项</li>
    <li>第六项</li>
</ol>

<!-- 倒序 -->
<ol reversed>
    <li>第三项</li>
    <li>第二项</li>
    <li>第一项</li>
</ol>
  1. 项目A
  2. 项目B
  1. 项目I
  2. 项目II
  1. 第五项
  2. 第六项
  1. 第三项
  2. 第二项
  3. 第一项

自定义有序列表编号

使用CSS计数器自定义有序列表编号：

CSS计数器 
<style>
.custom-ol {
    counter-reset: section;
    list-style-type: none;
    padding-left: 0;
}

.custom-ol li {
    counter-increment: section;
    margin-bottom: 0.5em;
}

.custom-ol li::before {
    content: "步骤 " counter(section) ": ";
    font-weight: bold;
    color: #82255E;
}

.roman-ol {
    list-style-type: lower-roman;
    padding-left: 2em;
}
</style>

<ol class="custom-ol">
    <li>准备所需材料</li>
    <li>按照说明操作</li>
    <li>完成并检查结果</li>
</ol>

<ol class="roman-ol">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签创建，用于展示术语及其定义。包含<dt>（术语）和<dd>（定义）元素。

基本定义列表

定义列表 
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于描述网页的表现和布局。</dd>
    
    <dt>JavaScript</dt>
    <dd>一种脚本语言，用于实现网页的交互功能。</dd>
</dl>
HTML
超文本标记语言，用于创建网页结构。
CSS
层叠样式表，用于描述网页的表现和布局。
JavaScript
一种脚本语言，用于实现网页的交互功能。

多个定义的术语

多个定义 
<dl>
    <dt>浏览器</dt>
    <dd>用于访问和显示网页的软件应用程序。</dd>
    <dd>常见的浏览器包括Chrome、Firefox、Safari等。</dd>
    
    <dt>服务器</dt>
    <dd>为其他计算机提供服务的计算机系统。</dd>
</dl>
浏览器
用于访问和显示网页的软件应用程序。
常见的浏览器包括Chrome、Firefox、Safari等。
服务器
为其他计算机提供服务的计算机系统。

定义列表的样式化

使用CSS美化定义列表：

样式化定义列表 
<style>
.fancy-dl {
    border-left: 4px solid #82255E;
    padding-left: 1em;
}

.fancy-dl dt {
    font-weight: bold;
    color: #82255E;
    margin-top: 1em;
}

.fancy-dl dd {
    margin-left: 1em;
    color: #666;
}

.horizontal-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5em 1em;
}

.horizontal-dl dt {
    font-weight: bold;
    text-align: right;
}

.horizontal-dl dd {
    margin: 0;
}
</style>

<dl class="fancy-dl">
    <dt>响应式设计</dt>
    <dd>使网站能够适应不同屏幕尺寸的设计方法。</dd>
    
    <dt>渐进式Web应用</dt>
    <dd>结合Web和原生应用优势的Web应用。</dd>
</dl>

<dl class="horizontal-dl">
    <dt>姓名：</dt>
    <dd>张三</dd>
    
    <dt>职业：</dt>
    <dd>Web开发工程师</dd>
    
    <dt>地点：</dt>
    <dd>北京</dd>
</dl>

嵌套列表

列表可以嵌套使用，创建多级结构：

无序列表嵌套

嵌套无序列表 
<ul>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>胡萝卜</li>
            <li>西兰花</li>
        </ul>
    </li>
</ul>
  • 水果
    • 苹果
    • 香蕉
  • 蔬菜
    • 胡萝卜
    • 西兰花

混合嵌套列表

混合嵌套 
<ol>
    <li>准备阶段
        <ul>
            <li>收集材料</li>
            <li>准备工具</li>
        </ul>
    </li>
    <li>实施阶段
        <ul>
            <li>第一步操作</li>
            <li>第二步操作</li>
        </ul>
    </li>
</ol>
  1. 准备阶段
    • 收集材料
    • 准备工具
  2. 实施阶段
    • 第一步操作
    • 第二步操作

多级嵌套列表

多级嵌套 
<ul>
    <li>前端开发
        <ul>
            <li>HTML
                <ul>
                    <li>HTML5</li>
                    <li>语义化标签</li>
                </ul>
            </li>
            <li>CSS
                <ul>
                    <li>CSS3</li>
                    <li>Flexbox</li>
                    <li>Grid</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>后端开发
        <ul>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

列表的实用应用

导航菜单

导航菜单 
<nav>
    <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="about.html">关于我们</a></li>
        <li><a href="services.html">服务</a></li>
        <li><a href="contact.html">联系我们</a></li>
    </ul>
</nav>

步骤说明

步骤说明 
<ol>
    <li>打开电脑并连接到互联网</li>
    <li>打开网页浏览器</li>
    <li>在地址栏输入网址</li>
    <li>按Enter键访问网站</li>
</ol>

功能列表

功能列表 
<ul>
    <li>✅ 自动保存功能</li>
    <li>✅ 多语言支持</li>
    <li>✅ 响应式设计</li>
    <li>🔄 云同步（开发中）</li>
</ul>

常见问题解答

FAQ列表 
<dl>
    <dt>如何创建HTML列表？</dt>
    <dd>使用<code>&lt;ul&gt;</code>创建无序列表，<code>&lt;ol&gt;</code>创建有序列表，<code>&lt;dl&gt;</code>创建定义列表。</dd>
    
    <dt>列表可以嵌套吗？</dt>
    <dd>是的，列表可以嵌套使用，创建多级结构。</dd>
    
    <dt>如何改变列表的样式？</dt>
    <dd>使用CSS的<code>list-style-type</code>属性可以改变列表标记的样式。</dd>
</dl>

列表的可访问性

为了确保列表对所有用户都可访问，应该遵循以下最佳实践：

语义化使用列表

  • 仅当内容确实是列表时才使用列表元素
  • 使用适当的列表类型（无序、有序或定义）
  • 避免使用列表进行页面布局

屏幕阅读器优化

  • 屏幕阅读器会告知用户列表中的项目数量
  • 嵌套列表会创建层次结构，帮助用户理解内容关系
  • 确保列表项有意义的文本内容

ARIA角色

在某些情况下，可以使用ARIA角色增强列表的可访问性：

ARIA与列表 
<div role="list" aria-label="功能特性">
    <div role="listitem">功能一</div>
    <div role="listitem">功能二</div>
</div>
注意： 只有在不能使用原生HTML列表元素时才使用ARIA角色。原生元素已经具有可访问性特性。

键盘导航

确保列表可以通过键盘导航：

  • 使用Tab键在列表项间导航
  • 为交互式列表项提供键盘操作支持
  • 确保焦点指示器可见

高级列表技术

使用CSS Grid创建复杂列表布局

CSS Grid列表 
<style>
.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
}

.grid-list li {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 5px;
    border-left: 4px solid #82255E;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
}

.feature-list li {
    text-align: center;
    padding: 1rem;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

<ul class="grid-list">
    <li>响应式设计</li>
    <li>跨浏览器兼容</li>
    <li>性能优化</li>
    <li>可访问性支持</li>
</ul>

<ul class="feature-list">
    <li>快速加载</li>
    <li>易于使用</li>
    <li>安全可靠</li>
</ul>

使用JavaScript动态创建列表

动态列表 
<ul id="dynamic-list"></ul>

<script>
// 数据数组
const items = [
    '学习HTML基础',
    '掌握CSS样式',
    '理解JavaScript',
    '构建响应式网站',
    '优化网站性能'
];

// 获取列表元素
const list = document.getElementById('dynamic-list');

// 动态创建列表项
items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    list.appendChild(li);
});

// 添加交互功能
list.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        e.target.classList.toggle('completed');
    }
});
</script>

<style>
.completed {
    text-decoration: line-through;
    color: #999;
}
</style>

使用列表创建时间线

时间线列表 
<style>
.timeline {
    list-style: none;
    padding: 0;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #82255E;
}

.timeline li {
    position: relative;
    padding-left: 50px;
    margin-bottom: 2rem;
}

.timeline li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #82255E;
    border: 3px solid white;
    box-shadow: 0 0 0 3px #82255E;
}

.timeline-date {
    font-weight: bold;
    color: #82255E;
    margin-bottom: 0.5rem;
}

.timeline-content {
    background: white;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

<ul class="timeline">
    <li>
        <div class="timeline-date">2026年1月</div>
        <div class="timeline-content">
            <h3>开始HTML学习</h3>
            <p>学习HTML基础知识和语法</p>
        </div>
    </li>
    <li>
        <div class="timeline-date">2026年2月</div>
        <div class="timeline-content">
            <h3>掌握CSS</h3>
            <p>学习CSS样式和布局技术</p>
        </div>
    </li>
    <li>
        <div class="timeline-date">2026年3月</div>
        <div class="timeline-content">
            <h3>JavaScript入门</h3>
            <p>开始学习JavaScript编程</p>
        </div>
    </li>
</ul>

动手练习

创建一个包含多种列表类型的HTML页面：

综合练习 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学习计划 - 列表练习</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            gap: 20px;
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
        }
        nav a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
        nav a:hover {
            color: #007bff;
        }
        .skill-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            list-style: none;
            padding: 0;
        }
        .skill-list li {
            background: white;
            padding: 1rem;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .timeline {
            list-style: none;
            padding: 0;
            position: relative;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #82255E;
        }
        .timeline li {
            position: relative;
            padding-left: 50px;
            margin-bottom: 2rem;
        }
        .timeline li::before {
            content: '';
            position: absolute;
            left: 12px;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #82255E;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的学习计划</h1>
        <nav>
            <ul>
                <li><a href="#goals">学习目标</a></li>
                <li><a href="#schedule">时间安排</a></li>
                <li><a href="#skills">技能要求</a></li>
                <li><a href="#resources">学习资源</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="goals">
            <h2>学习目标</h2>
            <ul>
                <li>掌握HTML5所有核心元素
                    <ul>
                        <li>语义化标签</li>
                        <li>表单元素</li>
                        <li>多媒体元素</li>
                    </ul>
                </li>
                <li>理解Web可访问性标准</li>
                <li>能够创建响应式网页</li>
                <li>掌握现代Web开发最佳实践</li>
            </ul>
        </section>
        
        <section id="schedule">
            <h2>学习时间安排</h2>
            <ol>
                <li>第一周：HTML基础
                    <ol type="a">
                        <li>文档结构</li>
                        <li>文本元素</li>
                        <li>链接和图像</li>
                    </ol>
                </li>
                <li>第二周：HTML表格和表单</li>
                <li>第三周：HTML5新特性</li>
                <li>第四周：项目实践</li>
            </ol>
            
            <h3>详细时间线</h3>
            <ul class="timeline">
                <li>
                    <strong>第1-2天</strong>
                    <p>HTML文档结构和基础标签</p>
                </li>
                <li>
                    <strong>第3-4天</strong>
                    <p>文本格式化和语义化标签</p>
                </li>
                <li>
                    <strong>第5-7天</strong>
                    <p>链接、图像和多媒体</p>
                </li>
            </ul>
        </section>
        
        <section id="skills">
            <h2>需要掌握的技能</h2>
            <ul class="skill-list">
                <li>HTML5语义化</li>
                <li>CSS3样式</li>
                <li>JavaScript基础</li>
                <li>响应式设计</li>
                <li>Web可访问性</li>
                <li>性能优化</li>
            </ul>
        </section>
        
        <section id="resources">
            <h2>学习资源</h2>
            <dl>
                <dt>MDN Web文档</dt>
                <dd>Mozilla开发者网络的HTML文档，权威且详细。</dd>
                
                <dt>W3Schools</dt>
                <dd>提供HTML教程和参考，包含大量实例。</dd>
                
                <dt>当发网HTML学习频道</dt>
                <dd>系统化的HTML学习资源，适合初学者。</dd>
                
                <dt>Codecademy</dt>
                <dd>交互式学习平台，提供实践机会。</dd>
            </dl>
            
            <h3>推荐学习顺序</h3>
            <ol start="1">
                <li>HTML基础语法</li>
                <li>常用HTML标签</li>
                <li>HTML5新特性</li>
                <li>表单和表格</li>
                <li>语义化HTML</li>
                <li>Web可访问性</li>
                <li>项目实践</li>
            </ol>
        </section>
    </main>
</body>
</html>

下一步学习

掌握列表后，继续学习：

1

表单

学习创建交互式表单

继续学习
2

语义化HTML

学习使用语义化标签改善网页结构

继续学习