你好，我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端程序媛。
g.zh后台回复“前端工具”可免费获取开发工具，持续更新
今天聊聊列表标签。列表标签，在网页设计中可以帮助将信息以结构化的方式呈现给用户，提高信息的可读性和易理解性。用途如下2个菜单小场景：
ok，那接下来我们来学习吧。
列表标签的 3 种形式
HTML 中常用的列表标签有 3 种。
1、无序列表（Unordered List）：用 <ul> 标签表示，其中每个列表项使用 <li> 标签表示，列表项前面通常有一个特殊符号（如圆点、实心方块）作为标记。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
用于呈现项目之间没有特定顺序或优先级关系的内容。
常用于创建菜单、项目清单等，后续呢，我们可以通过 CSS 样式来改变标记的样式，如改变标记的形状、颜色等，使其更符合设计需求。
2、有序列表（Ordered List）：用 <ol> 标签表示，其中每个列表项同样使用 <li> 标签表示，列表项前面会有自动编号（数字、字母、罗马数字等）。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
用于呈现有序内容，通常以数字、字母或其他符号形式显示。
适用于排列顺序重要的项目，如步骤、排名等，可以自动编号并且支持通过 CSS 样式进行定制。
3、定义列表（Definition List）：用 <dl> 标签表示，其中每个术语使用 <dt> 标签表示，对应的描述使用 <dd> 标签表示。
<dl>
<dt>术语1</dt>
<dd>描述1</dd>
<dt>术语2</dt>
<dd>描述2</dd>
<dt>术语3</dt>
<dd>描述3</dd>
</dl>
这个标签没有前 2 者常用。它用于呈现术语与其定义之间的关系。
常用于创建词汇表、术语表、定义清单等，通过术语和对应的描述清晰地展示内容之间的关联关系，提供更详细的解释和说明。
可嵌套的列表实例
但也有很多场景下，不是单一的一个列表，而是一个级联的列表。而通过列表标签嵌套分层展示信息，组织复杂多级内容，从而提升提高可读性，提升用户体验的作用。
那一起来看个案例吧。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>购物清单</title>
</head>
<body>
<h2>购物清单</h2>
<ul>
<li>
生鲜食材
<ul>
<li>
蔬菜
<ul>
<li>青菜</li>
<li>番茄</li>
<li>黄瓜</li>
</ul>
</li>
<li>
水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</li>
</ul>
</li>
<li>
主食
<ul>
<li>
米面粮油
<ul>
<li>大米</li>
<li>面粉</li>
<li>食用油</li>
</ul>
</li>
<li>
面包糕点
<ul>
<li>面包</li>
<li>蛋糕</li>
<li>饼干</li>
</ul>
</li>
</ul>
</li>
<li>
饮料
<ul>
<li>碳酸饮料</li>
<li>果汁</li>
<li>茶饮</li>
</ul>
</li>
</ul>
</body>
</html>
在这个示例中，我们使用了 <ul> 和 <li> 标签来构建购物清单，其中包括生鲜食材、主食和饮料三个大类。每个大类下面又有二级列表，分别列出了更具体的商品类别，而在二级列表中又有三级列表，展示了具体的商品种类。
最后
在使用时呢，要注意其语义化。
选择合适的列表类型来表达内容关系，这是非常重要的。语义化指的是使用正确的 HTML 标签来描述文档的结构和内容，这样可以让浏览器、搜索引擎和屏幕阅读器更好地理解和解释网页内容。
无序列表（<ul>）：适用于表示项目之间没有特定顺序的情况，如导航菜单或项目列表。
有序列表（<ol>）：适用于表示项目之间有明确顺序或排列需求的情况，如步骤列表或排行榜。
定义列表（<dl>）：适用于表示术语及其定义之间的关系，如字典或说明文档。
正确选择列表类型可以更好地传达文档的含义和逻辑结构，提高页面的可读性和可访问性。
因此，在编写 HTML 文档时，应根据内容的关系和语义来选择合适的列表类型，避免滥用某种类型的列表，以确保文档结构的清晰性和准确性。
![Vector[C++]](https://img-blog.csdnimg.cn/direct/be94b30c051b4c36a1218be9b4de9966.png)
