1. 无序列表 (Unordered List)
无序列表是网页中最常用的列表，各个列表项之间为并列关系，没有顺序级别之分。
可视化区域
- HTML 基础
- CSS 样式
- JavaScript 交互
实时 HTML 代码
属性与交互
点击上方按钮测试嵌套规则
2. 有序列表 (Ordered List)
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列。
可视化区域
- 第一步：新建文件
- 第二步：编写代码
- 第三步：运行测试
实时 HTML 代码
属性与交互
第 2 项使用 value="10"
3. 定义列表 (Definition List)
常用于对术语或名词进行解释和描述，无项目符号。
可视化区域
实时 HTML + CSS 代码
图文混排交互
💡 原理：如果不使用 CSS，
<dt> 和 <dd> 默认是块级元素，会上下排列。想要图文在同一行，必须给 <dl> 设置 display: flex;。
4. 列表嵌套交互
将右侧的卡片拖拽到“拼装区”，点击确定后，左侧将生成标准的嵌套列表代码与视图。
可视化渲染结果（点击确定后生成）
尚未生成嵌套列表，请从右侧拖拽拼装并点击确定。
实时嵌套代码
// 等待生成...拼图拼装区
拖拽下方卡片到虚线框：
将“外层列表”拖入此处
可拖拽的拼图
📌 无序列表 (作为外层)
🔢 有序列表 (作为外层)
↳ 无序列表 (作为子层)
↳ 有序列表 (作为子层)
5. CSS 列表样式与图像替换模拟
按照步骤体验。特别注意：当我们用“图片”替换符号时，为何强烈推荐使用背景图而不是 list-style-image。
模拟浏览器渲染结果
- 列表项一：内容文本
- 列表项二：观察符号变化与缩进
- 列表项三：背景图片替换演示
实时 CSS 代码
操作步骤
使用大尺寸图像作为符号
⚠️ 缺陷：
list-style-image 无法限制图片大小。如果图片是 100x100，它就会原样撑破行高，且无法垂直居中。
⚠️ 如果跳过 A、B 直接点 C，背景图会被默认符号遮挡或无法显示。只有通过 background-size 才能完美控制大图。