在网页开发中,列表是一种重要的页面结构,用于清晰、有序地展示相关信息。通过合理使用列表,可以有效提升信息的可读性和条理性,使用户能够快速获取重点内容。
这节课我们学习 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; }
列表使用的方法:
通过学习这三种列表类型,我们现在可以用结构化的方式来组织信息了。无论是简单的购物清单,还是复杂的项目计划,列表都能帮我们把信息变得清晰、有序。 在下一部分,我们将继续探索表格的创建,这会让数据展示变得更加专业和美观!