1 自定义列表基本结构
dl 是自定义列表容器,由两种子标签组成:
dt:分类标题,每组的名称。dd:分类下的具体条目,默认有缩进效果。
一个 dl 内可以有多个 dt,每个 dt 下跟若干个 dd。
2 适用场景
自定义列表适合表达分类 + 条目的结构,典型应用是网站底部导航(如小米官网底部的多列分类菜单)。
3 三种列表对比
| 列表类型 | 标签 | 特点 | 掌握程度 |
|---|---|---|---|
| 无序列表 | ul + li | 条目前带符号,无顺序 | 重点掌握 |
| 有序列表 | ol + li | 条目前带编号,有顺序 | 了解即可 |
| 自定义列表 | dl + dt + dd | 分类标题 + 缩进条目 | 重点掌握 |
4 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>梨</dd>
<dt>编程语言</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C</dd>
</dl>
</body>
</html>