列表

在网页开发中，列表是一种重要的页面结构，用于清晰、有序地展示相关信息。通过合理使用列表，可以有效提升信息的可读性和条理性，使用户能够快速获取重点内容。

这节课我们学习 HTML 中三种主要的列表类型。每一种列表都具有不同的应用场景和语义特性。在实际开发中，需要根据信息的特征与组织方式选择合适的列表类型进行展示。

无序列表

当需要展示多个相关项目，而这些项目之间不存在严格的先后顺序时，推荐使用无序列表。例如下方展示的休闲计划，项目顺序可以灵活调整，采用无序列表能够清晰表达其并列关系。

无序列表使用<ul>标签作为容器，每一个列表项目都用<li>标签包裹。浏览器会为每个项目添加一个小圆点，让内容层次分明。

|
<!DOCTYPE html>                    <!-- 声明HTML5文档 -->
<html>                             <!-- HTML文档根元素 -->
  <head>                          <!-- 文档头部 -->
    <meta charset="UTF-8">        <!-- 设置字符编码 -->
    <title>我们的周末计划</title>   <!-- 页面标题 -->
  </head>                         <!-- 头部结束 -->
  <body>                          <!-- 文档主体开始 -->
    <h1>这个周末，我们来安排一场完美的放松之旅</h1>
 
    <h2>休闲活动清单</h2>
    <ul>                          <!-- 无序列表开始 -->
      <li>在公园散步，欣赏春天的花朵</li>    <!-- 列表项目 -->
      <li>去书店翻阅几本有趣的书籍</li>    <!-- 列表项目 -->
      <li>和朋友一起品尝街角的咖啡</li>    <!-- 列表项目 -->
      <li>在家尝试做一道新的甜点</li>      <!-- 列表项目 -->
    </ul>                         <!-- 无序列表结束 -->
 
  </body>                         <!-- 文档主体结束 -->
</html>                           <!-- HTML文档结束 -->

这样的列表就像是一张购物清单，我们可以按照自己的节奏来完成每一项。无论是先去公园还是先去书店，都不会影响整个周末的美好体验。

有序列表

有些时候，顺序变得至关重要。比如我们想记录一个家庭烘焙的秘方，或者规划一次远行的路线，这时候我们就需要有序列表来确保每一步都按照正确的顺序执行。

有序列表使用<ol>标签，浏览器会自动为每个项目添加数字编号，让步骤一目了然。

|
<section>
  <h2>奶奶的传统手工饼干配方</h2>
 
  <h3>准备材料</h3>
  <ul>
    <li>面粉 200克</li>
    <li>黄油 100克</li>
    <li>细砂糖 80克</li>
    <li>鸡蛋 1个</li>
    <li>香草精 少许</

这样的有序列表就像是一张详细的地图，每一个步骤都有明确的编号指引我们前行。如果我们临时决定要修改某个步骤，比如在第5步和第6步之间添加一个新的步骤，浏览器会自动调整所有后续步骤的编号，我们完全不需要手动修改。

<li>这个标签特别有趣，它非常灵活，可以同时在<ul>和<ol>两种列表类型中使用。

嵌套列表

生活中的很多信息都有复杂的层级关系。比如我们想整理一个家庭图书馆的藏书分类，或者规划一个完整的学习计划，这时候简单的单层列表就不够用了，我们需要嵌套列表来展现信息的层级结构。

|
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我们的家庭图书馆</title>
  </head>
  <body>
    <h1>家庭图书分类系统</h1>
 
    <ul>                          <!-- 主要分类 -->
      <li

嵌套列表是一种结构化、层级化表达信息的有效方式。在实际应用中，嵌套列表可将信息按照不同门类、类型及细化内容进行分级。例如，最外层为文学类、科技类、生活类等主类，作为全局信息的入口。每个主类下又可以进一步细分为具体的子分类，如“科技类”下包含“编程技术”、“人工智能”等，体现信息的逻辑归属和从属关系。子分类下则罗列最为具体的条目，如书名或操作步骤，确保信息呈现的完整性与详细度。

这种多层嵌套的结构体现了树状关系：由总分到分支，逐步细化，有助于用户层层定位所需内容、高效查找目标。这种层级结构对于维护和扩展信息同样具有优势，便于按需增删和归整相关内容，实现信息的有序管理与高效展示。

描述列表

在实际开发中，我们经常会遇到需要清晰地表达“术语—解释”这种一对多关系的场景。比如说，制作一本专业词典、撰写产品技术参数表，或者在个人简历中详细介绍每项技能时，都离不开这种结构化的信息展示方式。这时候，HTML 的描述列表（Description List）就成了我们的得力助手。

描述列表由三个核心标签组成，彼此配合完成信息的分组和解释。首先，<dl>（description list）是整个描述列表的外层容器，负责包裹所有的术语和解释。接着，<dt>（description term）用来标记每一个需要解释的术语，比如“CPU”、“内存”、“操作系统”等。最后，<dd>（description details）则紧跟在术语后面，详细说明该术语的含义、参数或者补充说明。值得注意的是，一个术语可以对应多个解释，这样就能把复杂的技术细节或者多角度的说明都囊括进来。

|
<section>
  <h2>我们的烘焙工具箱</h2>
 
  <dl>                          <!-- 描述列表开始 -->
    <dt>搅拌机</dt>           <!-- 术语 -->
    <dd>电动搅拌工具，能快速均匀混合面粉和液体材料</dd>
    <dd>功率选择很重要，建议选择500W以上的型号</dd>
 
    <dt>量杯</dt>             <!-- 术语 -->
    <dd>精确测量液体和粉末材料的工具</

描述列表特别适合展示这种“一对多”的关系。一个术语可以对应多个解释，这样能提供更全面的信息。

列表的样式定制

其实，浏览器会自动为无序列表和有序列表加上一些默认的样式，比如小圆点或者数字编号。不过，如果我们觉得这些样式不够美观，或者想让页面更有个性，其实完全可以用CSS来动手“打扮”我们的列表。比如说，我们可以把小圆点换成小方块，或者让数字前面多一个“0”，甚至还能给每一项加上不同的颜色和间距。这样一来，列表不仅内容清晰，外观也能和我们的网站风格融为一体。

|
<style>
  /* 自定义无序列表样式 */
  .custom-list {
    list-style-type: square;  /* 方块符号 */
    padding-left: 20px;
  }
 
  /* 自定义有序列表样式 */
  .numbered-steps {
    list-style-type: decimal-leading-zero;  /* 01, 02, 03... */
    counter-reset: step-counter;
  }
 
  .numbered-steps li {
    counter-increment: step-counter;
  }

列表使用的方法：

选择合适的列表类型：根据内容特点选择ul、ol或dl
保持语义清晰：每个列表都有明确的主题和目的
注意嵌套深度：避免过度嵌套，通常3层以内最佳
考虑可访问性：为屏幕阅读器提供清晰的结构信息
样式适中：保持列表的可读性，避免过度装饰

通过学习这三种列表类型，我们现在可以用结构化的方式来组织信息了。无论是简单的购物清单，还是复杂的项目计划，列表都能帮我们把信息变得清晰、有序。在下一部分，我们将继续探索表格的创建，这会让数据展示变得更加专业和美观！