HTML 列表 — 有序与无序

掌握 ul/ol 列表标签 · 难度：入门 · +10XP

HTML 列表

HTML列表可以将相关内容分组，使页面结构清晰。HTML支持三种列表类型。

1. 无序列表 <ul>

使用项目符号（圆点）标记每个列表项，顺序不重要时使用。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

效果预览：

• 苹果
• 香蕉
• 橘子

默认标记是实心圆点(disc)，可以用CSS的list-style-type属性改变：

值	样式
disc	● 实心圆（默认）
circle	○ 空心圆
square	■ 方块
none	无标记（常用于导航菜单）

2. 有序列表 <ol>

使用数字或字母自动编号，顺序很重要时使用。

<ol>
  <li>打开电脑</li>
  <li>打开VS Code</li>
  <li>开始写代码</li>
</ol>

效果预览：

1. 打开电脑
2. 打开VS Code
3. 开始写代码

可以用type属性改变编号类型：

type值	编号样式
type="1"	1, 2, 3（默认）
type="A"	A, B, C
type="a"	a, b, c
type="I"	I, II, III（罗马数字）

也可以用start属性指定起始编号：<ol start="5">从5开始计数。

3. 描述列表 <dl>

用于展示术语和其定义的配对列表，适合做词汇表、FAQ等。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，网页的骨架</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，网页的外观</dd>
</dl>

嵌套列表

列表可以多层嵌套，创建层级结构（如网站导航菜单）。

<ul>
  <li>前端开发
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端开发
    <ul>
      <li>Java</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

列表标签总结

标签	全称	用途
<ul>	Unordered List	无序列表容器
<ol>	Ordered List	有序列表容器
<li>	List Item	列表项（ul和ol的子元素）
<dl>	Description List	描述列表容器
<dt>	Description Term	被描述的术语
<dd>	Description Data	术语的定义描述

???? 练习任务

1. 创建一个无序列表，列出你最喜欢的5种水果
2. 创建一个有序列表，列出做一道菜的步骤（至少4步）
3. 创建一个嵌套列表，展示网站的栏目结构（一级栏目→二级栏目）
4. 创建一个描述列表，列出3个HTML标签及其定义