1. 无序列表 ul
<ul>（Unordered List）创建无序列表，每项前面显示圆点（•）。
用途：导航菜单、功能列表、标签列表等不需要排序的内容。
📝 效果演示
- HTML 结构
- CSS 样式
- JavaScript 交互
1<ul>
2 <li>HTML 结构</li>
3 <li>CSS 样式</li>
4 <li>JavaScript 交互</li>
5</ul>
6
7<!-- 💡 ul 里只能放 li，不能直接放其他标签 -->
2. 有序列表 ol
<ol>（Ordered List）创建有序列表，每项前面显示数字或字母。
用途：步骤说明、排行榜、需要排序的内容。
📝 效果演示
- 学习 HTML 基础
- 学习 CSS 样式
- 学习 JavaScript
1<!-- 基本有序列表 -->
2<ol>
3 <li>第一步</li>
4 <li>第二步</li>
5 <li>第三步</li>
6</ol>
7
8<!-- 使用属性 -->
9<!-- type: 1(数字) A(大写) a(小写) I(大写罗马) i(小写罗马) -->
10<ol type="A">
11 <li>选项A</li>
12 <li>选项B</li>
13</ol>
14
15<!-- start: 起始编号 -->
16<ol start="5">
17 <li>从5开始</li>
18 <li>第6个</li>
19</ol>
20
21<!-- reversed: 倒序 -->
22<ol reversed>
23 <li>第3名</li>
24 <li>第2名</li>
25 <li>第1名</li>
26</ol>
3. 定义列表 dl
<dl>（Definition List）创建定义列表，用于展示术语和解释。
• <dt> — 术语（标题）
• <dd> — 术语的解释（内容）
用途：术语表、FAQ问答、键值对展示。
📝 效果演示
- HTML
- 超文本标记语言，用于构建网页结构
- CSS
- 层叠样式表，用于美化页面
- JavaScript
- 编程语言，用于实现页面交互
1<dl>
2 <dt>HTML</dt>
3 <dd>超文本标记语言，用于构建网页结构</dd>
4
5 <dt>CSS</dt>
6 <dd>层叠样式表，用于美化页面</dd>
7
8 <dt>JavaScript</dt>
9 <dd>编程语言，用于实现页面交互</dd>
10</dl>
11
12<!-- 一个dt可以对应多个dd -->
13<dl>
14 <dt>水果</dt>
15 <dd>苹果</dd>
16 <dd>香蕉</dd>
17 <dd>橙子</dd>
18</dl>
4. 列表嵌套
列表可以嵌套使用，在 <li> 里面放另一个列表。
用途：多级菜单、树形结构、大纲目录。
📝 效果演示
- 前端开发
- HTML
- CSS
- JavaScript
- 后端开发
- Python
- Java
1<!-- 无序列表嵌套 -->
2<ul>
3 <li>前端开发
4 <ul>
5 <li>HTML</li>
6 <li>CSS</li>
7 <li>JavaScript</li>
8 </ul>
9 </li>
10 <li>后端开发
11 <ul>
12 <li>Python</li>
13 <li>Java</li>
14 </ul>
15 </li>
16</ul>
17
18<!-- 有序+无序混合 -->
19<ol>
20 <li>第一阶段
21 <ul>
22 <li>学习HTML</li>
23 <li>学习CSS</li>
24 </ul>
25 </li>
26 <li>第二阶段
27 <ul>
28 <li>学习JavaScript</li>
29 </ul>
30 </li>
31</ol>
5. 列表属性
有序列表 <ol> 有几个常用属性：
• type — 编号类型（1/A/a/I/i）
• start — 起始编号
• reversed — 倒序排列
📝 效果演示
type="A"（大写字母）：
- 选项A
- 选项B
- 选项C
start="5"（从5开始）：
- 第5个
- 第6个
- 第7个
reversed（倒序）：
- 第3名
- 第2名
- 第1名
1<!-- type属性：设置编号类型 -->
2<ol type="1"><li>数字：1, 2, 3</li></ol>
3<ol type="A"><li>大写字母：A, B, C</li></ol>
4<ol type="a"><li>小写字母：a, b, c</li></ol>
5<ol type="I"><li>大写罗马：I, II, III</li></ol>
6<ol type="i"><li>小写罗马：i, ii, iii</li></ol>
7
8<!-- start属性：起始编号 -->
9<ol start="10">
10 <li>从10开始</li>
11 <li>11</li>
12</ol>
13
14<!-- reversed属性：倒序 -->
15<ol reversed>
16 <li>倒数第一</li>
17 <li>倒数第二</li>
18</ol>