HTML: HTML 列表
列表用于组织相关的内容。HTML 提供了三种类型的列表：无序列表(用点号表示）、有序列表(用数字表示）以及定义列表(包含术语和描述）。
1. 无序列表
<ul>（unordered list）配合 <li>（list item）生成带项目符号的列表，适合菜单、分类、特性清单等没有先后顺序的内容：
▶ 示例
HTML
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
2. 有序列表
<ol>（ordered list）生成带数字编号的列表，适合步骤说明、排行榜、操作指南等有先后顺序的内容：
▶ 示例
HTML
<ol>
<li>打开编辑器</li>
<li>编写 HTML</li>
<li>保存为 .html 文件</li>
<li>用浏览器打开查看</li>
</ol>
📌 列表嵌套：
列表可以互相嵌套——在
<li> 里面再放一个 <ul> 或<ol>，就能做出多级层次结构。导航菜单的多级下拉就是用嵌套列表实现的。
3. 定义列表
<dl>（definition list）包含一系列 <dt>（术语）和 <dd>（描述），适合词汇表、元数据、问答对等场景：
▶ 示例
HTML
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，网页的骨架</dd>
<dt>CSS</dt>
<dd>层叠样式表，控制网页的外观</dd>
</dl>
4. 折叠列表
<details> 和 <summary> 是 HTML5 新增的标签，用来创建可展开/收起的内容区块——常见于 FAQ 问答、文档折叠菜单等场景。点击 <summary> 标题即可切换展开和收起状态：
▶ 示例
HTML
<details>
<summary>什么是 HTML？</summary>
<p>HTML 是超文本标记语言，用于创建网页。</p>
</details>
<details open>
<summary>什么是 CSS？</summary>
<p>CSS 控制网页的样式和布局。</p>
</details>
📌 open 属性：
<details> 的 open 属性可以让内容默认展开（加了 open 就默认展开，不加就默认收起）。浏览器会自动为 <summary> 添加展开/收起箭头，不需要额外写 CSS 或 JavaScript。
❓ 常见问题
Q
<ul>和<ol>有什么区别？什么时候用哪个？A
<ul>是无序列表（Unordered List），用圆点、方块等符号标记，适合没有先后顺序的项目，如导航菜单、功能列表、特点说明；<ol>是有序列表（Ordered List），用数字或字母标记，适合有先后顺序的项目，如操作步骤、排行榜、教程目录。选择依据：项目之间有没有顺序关系。Q 列表可以嵌套吗？最多能嵌套几层？
A 可以嵌套，而且没有层数限制。把
<ul>或<ol>放在<li>内部就能创建子列表。常见场景：多级目录、树形菜单、大纲结构。但建议控制在3-4层以内，因为深层嵌套会降低可读性，而且在移动端显示效果不佳。嵌套时<ul>和<ol>可以混用，比如外层有序、内层无序。Q
<dl>定义列表是什么？和<ul>/<ol>有什么区别？A
<dl>（Definition List）专门用于"术语-描述"的配对内容，由<dt>（术语）和<dd>（描述）组成。典型场景：FAQ、词汇表、产品参数、元数据。<ul>/<ol>是"列表项"的集合，而<dl>是"键值对"的集合。HTML5中<dl>还可以用于作者信息、联系地址等元数据。📖 小节
<ul>无序列表 +<li>列表项（项目符号）<ol>有序列表 +<li>列表项（数字编号）<dl>定义列表 +<dt>术语 +<dd>描述<details>+<summary>折叠列表，open属性控制默认展开- 列表可以互相嵌套，做出多级结构
📝 作业
- 制作菜单：用无序列表制作一个网站导航菜单，包含首页、产品、关于我们、联系方式四个链接。
- 嵌套列表：创建一个嵌套列表：外层是有序列表（步骤），内层是无序列表（每种步骤的注意事项）。
