HTML提供三种列表：无序列表<ul>用于无顺序项目，有序列表<ol>用于有步骤或排名的内容，描述列表<dl>用于术语与定义的配对，三者结合CSS可实现语义清晰、样式美观的信息结构。
HTML列表的创建，核心在于使用无序列表
<ul>和有序列表
<ol>，再配合列表项
<li>。这两种标签就像是网页内容的骨架，能清晰地组织信息，让读者一眼就能抓住重点，无论是步骤、清单还是导航，它们都是基础且不可或缺的。
解决方案
要创建HTML列表，其实非常直观。如果你想展示一系列没有特定顺序的项目，比如一个购物清单或者一组链接，那就用
<ul>（unordered list）。每个列表项都包裹在
<li>（list item）标签里。
<!-- 这是一个无序列表的例子 --> <ul> <li>咖啡</li> <li>牛奶</li> <li>面包</li> </ul>
而如果你的项目有明确的顺序、步骤或者排名，比如食谱的制作步骤或者比赛的成绩，那么
<ol>（ordered list）就是你的首选。同样，每个项目也用
<li>标签包起来。
<!-- 这是一个有序列表的例子 --> <ol> <li>准备食材</li> <li>预热烤箱</li> <li>烘烤30分钟</li> <li>享用美食</li> </ol>
你甚至可以在一个列表项里再嵌套一个列表，这样就能创建出更复杂的层级结构。比如，一个大类下面再分几个小类，这在导航菜单或者多级目录里非常常见。
立即学习“前端免费学习笔记（深入）”；
<!-- 列表嵌套的例子 -->
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ol>
<li>西红柿</li>
<li>黄瓜</li>
</ol>
</li>
</ul>这些标签虽然看起来简单，却是构建良好信息结构的关键。很多人可能一开始只关注视觉效果，但语义化的HTML才是长久之计。
除了无序和有序列表，HTML还支持哪些列表类型？
除了我们最常用的
<ul>和
<ol>，HTML标准里其实还提供了一种叫做“描述列表”（Description List）的结构，用
<dl>标签来定义。它不像前两者那样列出项目，而是更侧重于定义术语和描述。想象一下，你在做一个词汇表或者一个问答页面，
<dl>就显得非常合适。
<dl>里面会包含
<dt>（Description Term，描述术语）和
<dd>（Description Description，描述定义）。一个
<dt>通常会对应一个或多个
<dd>，形成一种“术语-解释”的配对关系。
<!-- 描述列表的例子 --> <dl> <dt>HTML</dt> <dd>超文本标记语言，用于创建网页结构。</dd> <dt>CSS</dt> <dd>层叠样式表，用于控制网页的样式和布局。</dd> <dd>让网页看起来更美观。</dd> </dl>
这种列表类型在语义上非常强大，它明确地告诉浏览器和辅助技术（比如屏幕阅读器）这里是术语和它的定义，而不是简单的项目罗列。虽然视觉上它可能不如
<ul>和
<ol>那么常见，但在需要清晰解释概念的场景下，它的价值就凸显出来了。
如何通过CSS样式美化HTML列表，让它们看起来更专业？
HTML列表默认的样式，说实话，有点朴素，甚至可以说有些过时。浏览器给的那些小圆点或者数字，往往和我们的设计格格不入。这时候，CSS就成了我们的魔法棒，能把这些列表变得既美观又符合品牌调性。
最常用的一个属性是
list-style-type，它可以改变列表项标记的类型。比如，无序列表可以从默认的
disc（实心圆）变成
circle（空心圆）、
square（实心方块），甚至
none（完全移除标记）。有序列表则有
decimal（数字）、
lower-alpha（小写字母）、
upper-roman（大写罗马数字）等等。
/* 移除无序列表的默认标记 */
ul {
list-style-type: none;
padding: 0; /* 移除默认内边距 */
margin: 0; /* 移除默认外边距 */
}
/* 使用自定义图片作为无序列表的标记 */
ul.custom-bullet {
list-style-image: url('path/to/your/bullet.png');
}
/* 有序列表使用小写字母 */
ol.alpha-list {
list-style-type: lower-alpha;
}
/* 列表项的样式 */
li {
margin-bottom: 8px; /* 增加列表项之间的间距 */
color: #333;
font-size: 16px;
line-height: 1.5;
}除了
list-style-type，
list-style-image允许你用自定义图片来替代默认的标记，这给设计带来了极大的自由度。
list-style-position则控制标记是位于列表项文本的“内部”还是“外部”，默认是
outside。
更进一步，我们可以调整
margin和
padding来控制列表项的缩进和间距，改变
color、
font-size、
font-weight等字体属性，甚至给列表项添加背景色、边框，或者利用伪元素
::before来创建完全定制的列表标记。
比如，很多人会选择移除默认的
list-style-type: none;，然后用
::before伪元素加上自己设计的图标或者序号，这样能更好地控制位置和样式。这需要一些CSS技巧，但效果往往非常惊艳，能让列表与整体页面设计完美融合。
在实际网页开发中，什么时候应该选择无序列表，什么时候选择有序列表？
这个问题其实关乎“语义化”和“可访问性”，远比表面上看起来的“有没有序号”要重要得多。我的经验是，选择哪种列表，主要看内容本身是否具有内在的顺序性。
选择<ul>
（无序列表）的场景：
当你列出的项目，它们之间的顺序无关紧要，或者说，它们是平等的，没有先后的逻辑关系时，就应该用
<ul>。
- 功能特性列表： 比如一个产品的各项功能，它们的重要性可能不同，但没有固定的阅读或操作顺序。
- 相关链接： 侧边栏或者文章底部的“你可能也喜欢”链接，顺序不影响理解。
- 食材清单： 如果制作过程不强调加入食材的先后顺序，那么用无序列表即可。
- 导航菜单： 网站的主导航链接，每个链接都是一个独立的入口，没有内在的顺序。
选择<ol>
（有序列表）的场景：
当列表中的项目具有明确的先后顺序、步骤、优先级或者层级关系时，
<ol>是唯一的正确选择。
- 操作步骤： 任何需要一步步完成的任务，比如软件安装教程、烘焙食谱的制作流程，每一步都依赖前一步的完成。
- 排行榜/排名： 电影票房榜、最佳销售产品榜等，数字代表了顺序和地位。
- 文章目录： 章节标题和页码，它们按照文章结构自然排序。
- 法律条文/规定： 通常会以编号的形式出现，强调其严谨的顺序性。
很多人可能会犯的错误是，为了视觉效果而滥用标签。比如，他们可能想让一个有顺序的列表看起来像无序的，就用
<ul>然后用CSS添加数字。这在视觉上可能没问题，但对于屏幕阅读器或者搜索引擎来说，它失去了原有的语义信息。屏幕阅读器在遇到
<ol>时，会告诉用户“这是一个有X项的有序列表”，这对于依赖辅助技术的用户来说至关重要的。
所以，核心原则是：内容是否有逻辑顺序？有，用<ol>
；没有，用<ul>
。 即使你后面会用CSS把有序列表的数字去掉，或者把无序列表的圆点换成数字，HTML结构也应该始终反映内容的真实语义。这是构建健壮、可访问网页的基础。
