列表标签

无序列表 <ul>

无序列表中的每一项使用 <li> 标签表示。

基本语法与语义

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

语义说明

• <ul>：unordered list（无序列表）
• <li>：list item（列表项）

重要注意事项

结构规则

1. <li> 必须嵌套在 <ul> 内
2. <ul> 的直接子元素只能是 <li>
3. 虽然列表默认显示项目符号，但 <ul> 的主要作用是提供语义结构

样式属性

type 属性

<ul type="circle"><!-- 空心圆 -->
<ul type="square"><!-- 实心方点 -->
<ul type="disc"><!-- 实心圆点（默认） -->

现代实践

建议使用 CSS 的 list-style-type 属性替代 type 属性，因为 CSS 提供更多控制选项

嵌套列表

<ul>
<li><b>北京市</b>
<ul>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li><b>广州市</b>
<ul>
<li>天河区</li>
<li>越秀区</li>
</ul>
</li>
</ul>

实际应用场景

导航菜单

复杂内容容器

重要原则

虽然 <li> 可以包含任何内容（包括另一个 <ul>），但必须保持正确的嵌套结构

有序列表 <ol>

用于需要显示顺序的场景

基本语法

<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>

样式控制

type 和 start 属性

类型	示例	说明
type="1"	1, 2, 3	阿拉伯数字（默认）
type="a"	a, b, c	小写字母
type="A"	A, B, C	大写字母
type="i"	i, ii, iii	小写罗马数字
type="I"	I, II, III	大写罗马数字

<ol type="a" start="3">
<li>从c开始</li>
<li>d</li>
</ol>

实用技巧

现代开发中，可以使用 CSS 的 counter-reset 和 counter-increment 实现更复杂的编号系统

定义列表 <dl>

用于术语及其定义的场景。

基本结构

<dl>
<dt>术语</dt>
<dd>定义描述</dd>

<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dd>网页的基础构建块</dd>
</dl>

结构规则

必须遵守

1. <dl> 只能包含 <dt> 和 <dd>
2. <dt> 必须至少有一个
3. <dd> 是可选的，但通常应该存在

实际应用

京东页脚示例

<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
</dl>

商品分类