HTML 列表

什么是HTML列表

HTML列表用于显示一系列相关的项目，是组织信息的重要方式。HTML提供了三种类型的列表：有序列表、无序列表和描述列表。

无序列表 (Unordered List)

无序列表使用 <ul> 标签，列表项使用 <li> 标签。

基本语法

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

基础示例

<h3>我的兴趣爱好</h3>
<ul>
    <li>读书</li>
    <li>旅游</li>
    <li>摄影</li>
    <li>编程</li>
    <li>音乐</li>
</ul>

样式控制

<style>
.basic-ul {
    list-style-type: disc; /* 实心圆点 */
}

.circle-ul {
    list-style-type: circle; /* 空心圆点 */
}

.square-ul {
    list-style-type: square; /* 方块 */
}

.none-ul {
    list-style-type: none; /* 无标记 */
}

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

.custom-ul li {
    padding-left: 20px;
    position: relative;
}

.custom-ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #007acc;
    font-weight: bold;
}
</style>

<h4>不同样式的无序列表：</h4>

<ul class="basic-ul">
    <li>默认样式（实心圆点）</li>
    <li>列表项2</li>
</ul>

<ul class="circle-ul">
    <li>空心圆点样式</li>
    <li>列表项2</li>
</ul>

<ul class="square-ul">
    <li>方块样式</li>
    <li>列表项2</li>
</ul>

<ul class="none-ul">
    <li>无标记样式</li>
    <li>列表项2</li>
</ul>

<ul class="custom-ul">
    <li>自定义箭头样式</li>
    <li>列表项2</li>
</ul>

有序列表 (Ordered List)

有序列表使用 <ol> 标签，自动为列表项编号。

基本语法

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

基础示例

<h3>制作咖啡的步骤</h3>
<ol>
    <li>准备咖啡豆和器材</li>
    <li>研磨咖啡豆</li>
    <li>烧开水到适当温度</li>
    <li>冲泡咖啡</li>
    <li>享受美味咖啡</li>
</ol>

有序列表属性

<!-- type属性：指定编号类型 -->
<ol type="1">  <!-- 数字编号（默认） -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

<ol type="A">  <!-- 大写字母 -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

<ol type="a">  <!-- 小写字母 -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

<ol type="I">  <!-- 大写罗马数字 -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

<ol type="i">  <!-- 小写罗马数字 -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

<!-- start属性：指定起始数字 -->
<ol start="5">
    <li>第五项</li>
    <li>第六项</li>
    <li>第七项</li>
</ol>

<!-- reversed属性：倒序编号 -->
<ol reversed>
    <li>最后一步</li>
    <li>倒数第二步</li>
    <li>倒数第三步</li>
</ol>

样式控制

<style>
.decimal-ol {
    list-style-type: decimal; /* 1, 2, 3... */
}

.decimal-leading-zero-ol {
    list-style-type: decimal-leading-zero; /* 01, 02, 03... */
}

.lower-roman-ol {
    list-style-type: lower-roman; /* i, ii, iii... */
}

.upper-alpha-ol {
    list-style-type: upper-alpha; /* A, B, C... */
}

.custom-counter {
    list-style: none;
    counter-reset: custom-counter;
    padding-left: 0;
}

.custom-counter li {
    counter-increment: custom-counter;
    padding: 8px 0 8px 40px;
    position: relative;
}

.custom-counter li::before {
    content: "Step " counter(custom-counter);
    position: absolute;
    left: 0;
    background-color: #007acc;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}
</style>

<h4>不同样式的有序列表：</h4>

<ol class="decimal-ol">
    <li>普通数字</li>
    <li>列表项2</li>
</ol>

<ol class="decimal-leading-zero-ol">
    <li>前导零数字</li>
    <li>列表项2</li>
</ol>

<ol class="lower-roman-ol">
    <li>小写罗马数字</li>
    <li>列表项2</li>
</ol>

<ol class="upper-alpha-ol">
    <li>大写字母</li>
    <li>列表项2</li>
</ol>

<ol class="custom-counter">
    <li>自定义计数器样式</li>
    <li>另一个项目</li>
    <li>第三个项目</li>
</ol>

描述列表 (Description List)

描述列表用于显示术语和其对应的描述，使用 <dl>、<dt>、<dd> 标签。

基本语法

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

基础示例

<h3>前端技术术语</h3>
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于控制网页的外观和布局</dd>
    
    <dt>JavaScript</dt>
    <dd>编程语言，用于为网页添加交互功能</dd>
    
    <dt>响应式设计</dt>
    <dd>使网页能够在不同设备和屏幕尺寸上良好显示的设计方法</dd>
</dl>

高级描述列表

<style>
.glossary {
    margin: 20px 0;
}

.glossary dt {
    font-weight: bold;
    color: #007acc;
    margin-top: 15px;
    padding: 5px 0;
    border-bottom: 1px solid #e0e0e0;
}

.glossary dd {
    margin: 8px 0 0 20px;
    line-height: 1.5;
    color: #555;
}

.contact-info dt {
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

.contact-info dd {
    margin: 5px 0 0 20px;
    color: #666;
}

.specs dt {
    display: inline-block;
    width: 120px;
    font-weight: bold;
    color: #333;
}

.specs dd {
    display: inline;
    margin: 0;
    color: #666;
}

.specs dt:after {
    content: ":";
}
</style>

<h4>词汇表样式：</h4>
<dl class="glossary">
    <dt>API</dt>
    <dd>应用程序编程接口（Application Programming Interface），是一组定义了软件组件之间如何交互的规则和协议。</dd>
    
    <dt>Framework</dt>
    <dd>软件框架，是一个为解决特定问题而设计的软件架构，提供了标准的程序骨架。</dd>
    
    <dt>Library</dt>
    <dd>程序库，是预先编写的代码集合，开发者可以调用这些代码来实现特定功能。</dd>
</dl>

<h4>联系信息样式：</h4>
<dl class="contact-info">
    <dt>公司名称</dt>
    <dd>ABC科技有限公司</dd>
    
    <dt>地址</dt>
    <dd>北京市朝阳区建国路118号</dd>
    
    <dt>电话</dt>
    <dd>010-12345678</dd>
    
    <dt>邮箱</dt>
    <dd>info@abc-tech.com</dd>
</dl>

<h4>规格参数样式：</h4>
<dl class="specs">
    <dt>CPU</dt>
    <dd>Intel Core i7-12700H</dd><br>
    
    <dt>内存</dt>
    <dd>16GB DDR4</dd><br>
    
    <dt>存储</dt>
    <dd>512GB SSD</dd><br>
    
    <dt>显卡</dt>
    <dd>NVIDIA GeForce RTX 3060</dd><br>
</dl>

嵌套列表

列表可以嵌套使用，创建多层级的结构。

无序列表嵌套

<h3>网站结构</h3>
<ul>
    <li>首页</li>
    <li>产品
        <ul>
            <li>笔记本电脑
                <ul>
                    <li>游戏本</li>
                    <li>轻薄本</li>
                    <li>工作站</li>
                </ul>
            </li>
            <li>台式机</li>
            <li>配件</li>
        </ul>
    </li>
    <li>服务
        <ul>
            <li>技术支持</li>
            <li>维修服务</li>
            <li>延保服务</li>
        </ul>
    </li>
    <li>关于我们</li>
    <li>联系我们</li>
</ul>

有序列表嵌套

<h3>项目开发流程</h3>
<ol>
    <li>需求分析
        <ol type="a">
            <li>收集用户需求</li>
            <li>分析业务逻辑</li>
            <li>编写需求文档</li>
        </ol>
    </li>
    <li>系统设计
        <ol type="a">
            <li>架构设计</li>
            <li>数据库设计</li>
            <li>接口设计</li>
        </ol>
    </li>
    <li>开发实现
        <ol type="a">
            <li>前端开发
                <ol type="i">
                    <li>页面布局</li>
                    <li>交互功能</li>
                    <li>样式优化</li>
                </ol>
            </li>
            <li>后端开发</li>
            <li>数据库实现</li>
        </ol>
    </li>
    <li>测试部署</li>
</ol>

混合嵌套

<style>
.mixed-list {
    line-height: 1.8;
}

.mixed-list ul {
    margin: 8px 0;
}

.mixed-list ol {
    margin: 8px 0;
}
</style>

<div class="mixed-list">
    <h3>学习计划</h3>
    <ol>
        <li>前端基础
            <ul>
                <li>HTML结构</li>
                <li>CSS样式</li>
                <li>JavaScript基础</li>
            </ul>
        </li>
        <li>前端进阶
            <ol type="A">
                <li>框架学习
                    <ul>
                        <li>React</li>
                        <li>Vue.js</li>
                        <li>Angular</li>
                    </ul>
                </li>
                <li>工具链
                    <ul>
                        <li>Webpack</li>
                        <li>Vite</li>
                        <li>Rollup</li>
                    </ul>
                </li>
            </ol>
        </li>
        <li>项目实战</li>
    </ol>
</div>

列表样式美化

现代化列表样式

<style>
.modern-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.modern-list li {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    margin: 10px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.modern-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.modern-list li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    left: -10px;
    top: -10px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}

.modern-list {
    counter-reset: item;
}
</style>

<ul class="modern-list">
    <li>响应式网页设计</li>
    <li>用户体验优化</li>
    <li>前端性能优化</li>
    <li>跨浏览器兼容</li>
    <li>代码质量保证</li>
</ul>

图标列表

<style>
.icon-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.icon-list li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.icon-list li:hover {
    background-color: #f8f9fa;
    padding-left: 10px;
}

.icon-list li:last-child {
    border-bottom: none;
}

.icon-list .icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.icon-list .icon.check { background-color: #28a745; }
.icon-list .icon.info { background-color: #17a2b8; }
.icon-list .icon.warning { background-color: #ffc107; color: #333; }
.icon-list .icon.error { background-color: #dc3545; }
</style>

<ul class="icon-list">
    <li>
        <span class="icon check">✓</span>
        <span>项目已完成并通过测试</span>
    </li>
    <li>
        <span class="icon info">i</span>
        <span>新功能正在开发中</span>
    </li>
    <li>
        <span class="icon warning">!</span>
        <span>需要注意的重要事项</span>
    </li>
    <li>
        <span class="icon error">×</span>
        <span>发现问题需要修复</span>
    </li>
</ul>

步骤列表

<style>
.steps-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    position: relative;
}

.steps-list::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #007acc, #00d4ff);
}

.steps-list li {
    position: relative;
    padding: 20px 0 20px 60px;
    margin: 0;
}

.steps-list li::before {
    content: counter(step);
    counter-increment: step;
    position: absolute;
    left: 0;
    top: 15px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #007acc, #00d4ff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 122, 204, 0.3);
}

.steps-list {
    counter-reset: step;
}

.steps-list .step-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    font-size: 18px;
}

.steps-list .step-desc {
    color: #666;
    line-height: 1.6;
}
</style>

<ol class="steps-list">
    <li>
        <div class="step-title">注册账户</div>
        <div class="step-desc">填写基本信息，创建您的个人账户</div>
    </li>
    <li>
        <div class="step-title">验证邮箱</div>
        <div class="step-desc">点击邮件中的确认链接，激活您的账户</div>
    </li>
    <li>
        <div class="step-title">完善资料</div>
        <div class="step-desc">上传头像，补充个人详细信息</div>
    </li>
    <li>
        <div class="step-title">开始使用</div>
        <div class="step-desc">探索功能，享受我们的服务</div>
    </li>
</ol>

导航菜单应用

水平导航菜单

<style>
.nav-horizontal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #333;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-horizontal li {
    flex: 1;
}

.nav-horizontal a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    text-align: center;
    transition: background-color 0.3s ease;
    font-weight: 500;
}

.nav-horizontal a:hover,
.nav-horizontal a.active {
    background-color: #007acc;
}

.nav-horizontal a:active {
    background-color: #005fa3;
}
</style>

<ul class="nav-horizontal">
    <li><a href="#" class="active">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
</ul>

垂直导航菜单

<style>
.nav-vertical {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 250px;
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-vertical li {
    border-bottom: 1px solid #e9ecef;
}

.nav-vertical li:last-child {
    border-bottom: none;
}

.nav-vertical a {
    display: block;
    color: #495057;
    text-decoration: none;
    padding: 15px 20px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-vertical a:hover {
    background-color: #e9ecef;
    color: #007acc;
    padding-left: 30px;
}

.nav-vertical a.active {
    background-color: #007acc;
    color: white;
}

.nav-vertical a.active::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid white;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
</style>

<ul class="nav-vertical">
    <li><a href="#" class="active">仪表板</a></li>
    <li><a href="#">用户管理</a></li>
    <li><a href="#">产品管理</a></li>
    <li><a href="#">订单管理</a></li>
    <li><a href="#">数据统计</a></li>
    <li><a href="#">系统设置</a></li>
</ul>

下拉导航菜单

<style>
.dropdown-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #333;
    position: relative;
}

.dropdown-nav > li {
    position: relative;
}

.dropdown-nav a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    transition: background-color 0.3s ease;
}

.dropdown-nav > li > a:hover,
.dropdown-nav > li:hover > a {
    background-color: #007acc;
}

.dropdown-nav .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.dropdown-nav li:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-nav .dropdown a {
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 20px;
}

.dropdown-nav .dropdown a:hover {
    background-color: #f8f9fa;
    color: #007acc;
}
</style>

<ul class="dropdown-nav">
    <li>
        <a href="#">首页</a>
    </li>
    <li>
        <a href="#">产品</a>
        <ul class="dropdown">
            <li><a href="#">笔记本电脑</a></li>
            <li><a href="#">台式电脑</a></li>
            <li><a href="#">配件设备</a></li>
            <li><a href="#">软件服务</a></li>
        </ul>
    </li>
    <li>
        <a href="#">服务</a>
        <ul class="dropdown">
            <li><a href="#">技术支持</a></li>
            <li><a href="#">维修服务</a></li>
            <li><a href="#">培训服务</a></li>
        </ul>
    </li>
    <li>
        <a href="#">关于</a>
    </li>
    <li>
        <a href="#">联系</a>
    </li>
</ul>

响应式列表

移动端适配

<style>
.responsive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.responsive-list li {
    background-color: white;
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.responsive-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.responsive-list .item-content {
    padding: 20px;
}

.responsive-list .item-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.responsive-list .item-desc {
    color: #666;
    line-height: 1.5;
    margin-bottom: 12px;
}

.responsive-list .item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #888;
}

.responsive-list .item-date {
    color: #999;
}

.responsive-list .item-tag {
    background-color: #007acc;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .responsive-list .item-content {
        padding: 15px;
    }
    
    .responsive-list .item-title {
        font-size: 16px;
    }
    
    .responsive-list .item-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .responsive-list {
        margin: 0 -10px;
    }
    
    .responsive-list li {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 1px;
    }
    
    .responsive-list .item-content {
        padding: 12px 15px;
    }
}
</style>

<ul class="responsive-list">
    <li>
        <div class="item-content">
            <div class="item-title">HTML基础教程完整指南</div>
            <div class="item-desc">从零开始学习HTML，掌握网页结构的基础知识，包括标签、属性、语义化等重要概念。</div>
            <div class="item-meta">
                <span class="item-date">2024-02-03</span>
                <span class="item-tag">教程</span>
            </div>
        </div>
    </li>
    <li>
        <div class="item-content">
            <div class="item-title">CSS样式设计技巧</div>
            <div class="item-desc">学习现代CSS技巧，包括Flexbox布局、Grid系统、动画效果等高级特性。</div>
            <div class="item-meta">
                <span class="item-date">2024-02-02</span>
                <span class="item-tag">进阶</span>
            </div>
        </div>
    </li>
    <li>
        <div class="item-content">
            <div class="item-title">JavaScript交互功能实现</div>
            <div class="item-desc">掌握JavaScript编程基础，为网页添加动态交互功能，提升用户体验。</div>
            <div class="item-meta">
                <span class="item-date">2024-02-01</span>
                <span class="item-tag">实战</span>
            </div>
        </div>
    </li>
</ul>

实际应用示例

完整的列表应用页面

<!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>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            color: #2d3748;
            margin-bottom: 40px;
            font-size: 2.5em;
        }
        
        .section {
            margin: 40px 0;
            padding: 30px;
            border-radius: 10px;
            background: #f8f9fa;
        }
        
        .section h2 {
            color: #4a5568;
            border-bottom: 3px solid #007acc;
            padding-bottom: 10px;
            margin-bottom: 25px;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            .section {
                padding: 20px;
            }
            
            .grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML 列表应用展示</h1>
        
        <div class="section">
            <h2>功能特性列表</h2>
            <ul class="modern-list">
                <li>响应式设计，适配所有设备</li>
                <li>现代化界面，提升用户体验</li>
                <li>高性能优化，快速加载</li>
                <li>跨浏览器兼容，覆盖全平台</li>
                <li>SEO友好，搜索引擎优化</li>
            </ul>
        </div>
        
        <div class="section">
            <h2>使用步骤指南</h2>
            <ol class="steps-list">
                <li>
                    <div class="step-title">下载安装</div>
                    <div class="step-desc">从官方网站下载最新版本并按照向导完成安装</div>
                </li>
                <li>
                    <div class="step-title">配置设置</div>
                    <div class="step-desc">根据您的需求调整配置参数和个性化设置</div>
                </li>
                <li>
                    <div class="step-title">开始使用</div>
                    <div class="step-desc">探索各项功能，充分利用所有特性</div>
                </li>
                <li>
                    <div class="step-title">获取支持</div>
                    <div class="step-desc">如有问题，查看文档或联系技术支持团队</div>
                </li>
            </ol>
        </div>
        
        <div class="section">
            <h2>产品规格说明</h2>
            <dl class="glossary">
                <dt>处理器</dt>
                <dd>Intel Core i7 第12代处理器，8核16线程，基频2.3GHz，最高睿频4.7GHz</dd>
                
                <dt>内存</dt>
                <dd>16GB DDR4-3200MHz 双通道内存，可扩展至32GB</dd>
                
                <dt>存储</dt>
                <dd>512GB PCIe 4.0 NVMe SSD，读取速度高达7000MB/s</dd>
                
                <dt>显卡</dt>
                <dd>NVIDIA GeForce RTX 4060 8GB GDDR6独立显卡</dd>
                
                <dt>显示屏</dt>
                <dd>15.6英寸2560×1440 IPS屏幕，144Hz刷新率，100% sRGB色域</dd>
            </dl>
        </div>
        
        <div class="grid">
            <div>
                <h3>任务状态</h3>
                <ul class="icon-list">
                    <li>
                        <span class="icon check">✓</span>
                        <span>网站设计已完成</span>
                    </li>
                    <li>
                        <span class="icon check">✓</span>
                        <span>前端开发已完成</span>
                    </li>
                    <li>
                        <span class="icon info">i</span>
                        <span>后端开发进行中</span>
                    </li>
                    <li>
                        <span class="icon warning">!</span>
                        <span>测试环境待配置</span>
                    </li>
                </ul>
            </div>
            
            <div>
                <h3>项目导航</h3>
                <ul class="nav-vertical">
                    <li><a href="#" class="active">项目概览</a></li>
                    <li><a href="#">任务管理</a></li>
                    <li><a href="#">团队成员</a></li>
                    <li><a href="#">文件共享</a></li>
                    <li><a href="#">项目设置</a></li>
                </ul>
            </div>
        </div>
        
        <div class="section">
            <h2>最新文章</h2>
            <ul class="responsive-list">
                <li>
                    <div class="item-content">
                        <div class="item-title">前端开发最佳实践</div>
                        <div class="item-desc">分享现代前端开发的最佳实践和经验总结，包括代码组织、性能优化、团队协作等方面。</div>
                        <div class="item-meta">
                            <span class="item-date">2024-02-03</span>
                            <span class="item-tag">开发</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-title">UI设计趋势分析</div>
                        <div class="item-desc">探讨2024年UI设计的最新趋势，包括色彩搭配、布局设计、交互模式等设计要点。</div>
                        <div class="item-meta">
                            <span class="item-date">2024-02-02</span>
                            <span class="item-tag">设计</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

常见错误

1. 列表结构不正确

<!-- 错误：li标签不在ul或ol中 -->
<li>独立的列表项</li>

<!-- 正确：li标签必须在列表容器中 -->
<ul>
    <li>正确的列表项</li>
</ul>

2. 嵌套错误

<!-- 错误：直接嵌套列表 -->
<ul>
    <li>项目1</li>
    <ul>
        <li>子项目</li>
    </ul>
</ul>

<!-- 正确：在li中嵌套列表 -->
<ul>
    <li>项目1
        <ul>
            <li>子项目</li>
        </ul>
    </li>
</ul>

3. 滥用列表做布局

<!-- 错误：用列表做非列表内容的布局 -->
<ul>
    <li>标题</li>
    <li>内容区域</li>
    <li>侧边栏</li>
</ul>

<!-- 正确：使用适当的HTML元素 -->
<header>标题</header>
<main>内容区域</main>
<aside>侧边栏</aside>

小结

• HTML提供三种列表：无序列表(<ul>)、有序列表(<ol>)、描述列表(<dl>)
• 列表项使用<li>标签，描述列表使用<dt>和<dd>
• 列表可以嵌套使用，创建多层级结构
• 有序列表支持不同的编号类型和起始值
• 通过CSS可以创建美观的列表样式
• 列表常用于导航菜单、步骤说明、功能列表等
• 注意列表的语义化使用和结构正确性
• 考虑响应式设计，适配不同设备

下一章我们将学习HTML区块元素的使用。