illegalCreed

中文

English

中文

English

Appearance

列表三型 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • 三型：<ul> 无序（顺序无关）、<ol> 有序（顺序有意义）、<dl> 描述（术语 + 释义）
  • 判据：把项目重新排序后意义是否改变——会变用 <ol>，不变用 <ul>
  • <ul> / <ol> 的直接子元素只能是 <li>（外加 <script> / <template>）；列表项里可再嵌套列表
  • <ol> 三属性：type（1/a/A/i/I 编号样式）、start（起始数，始终用阿拉伯数字）、reversed（倒数）
  • <li value="5"> 可覆盖单个项的编号，后续项接着续
  • <dl> 结构：<dt> 术语 + <dd> 释义；支持「多术语共一释义」「一术语多释义」；可用 <div> 包裹成对项便于布局
  • 别为缩进 / 样式滥用列表——缩进用 CSS margin，编号 / 圆点样式用 CSS list-style
  • <menu> 语义上等价于 <ul>（一组命令 / 操作），用 <li> 装项

一、无序列表 <ul> ​

<ul> 表示一组顺序无关的项——把它们调换位置，意思不变。直接子元素只能是 <li>：

html
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

「购物清单」「功能点罗列」「导航菜单项」都是典型的无序列表（先买苹果还是先买香蕉无所谓）。默认渲染为圆点，但别因为「想要圆点 / 不想要圆点」而选 / 弃 <ul>——那是 CSS list-style 的事。

二、有序列表 <ol> ​

<ol> 表示一组顺序有意义的项——重新排序会改变含义，如步骤、排名、目录：

html
<ol>
  <li>混合面粉、糖、盐。</li>
  <li>打入鸡蛋，倒入牛奶。</li>
  <li>搅拌均匀后倒入模具。</li>
  <li>烤箱 180℃ 烤 20 分钟。</li>
</ol>

<ol> 还是 <ul>？ 一句话判据：把项目重新排序，意义变了吗？ 变了（菜谱步骤、比赛名次）用 <ol>；没变（配料清单、标签云）用 <ul>。

type：编号样式 ​

type效果
11, 2, 3…（默认）
aa, b, c…
AA, B, C…
ii, ii, iii…
II, II, III…
html
<ol type="I">
  <li>引言</li>
  <li>正文</li>
  <li>结论</li>
</ol>

复杂的编号样式（如带括号、自定义前缀）建议用 CSS list-style-type 或 ::marker，type 属性只覆盖最常见的几种。

start：起始编号 ​

start 指定从几开始计数，无论 type 是什么，start 的值始终是阿拉伯数字。想让列表从「d」或「iv」开始，写 start="4"：

html
<ol start="4" type="a">
  <li>第四项（显示为 d）</li>
  <li>第五项（显示为 e）</li>
</ol>

分页 / 续接列表时很有用：第二页的列表 start="11" 接着上一页的 10 项往下排。

reversed：倒序编号 ​

布尔属性 reversed 让编号从高到低倒数，适合「排行榜倒数公布」「最后 N 步」：

html
<ol reversed>
  <li>金牌</li>   <!-- 显示 3 -->
  <li>银牌</li>   <!-- 显示 2 -->
  <li>铜牌</li>   <!-- 显示 1 -->
</ol>

<li value>：覆盖单项编号 ​

<li> 上的 value 可强制指定某一项的编号，后续项接着它续：

html
<ol>
  <li>第一</li>
  <li value="5">跳到 5</li>
  <li>接着是 6</li>
</ol>

三、描述列表 <dl> ​

<dl>（description list）表示一组「术语 + 描述」的配对，由 <dt>（term，术语）和 <dd>（description，描述）组成。常用于术语表、键值元数据、对话：

html
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，描述网页结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，描述网页表现。</dd>
</dl>

灵活的配对关系 ​

<dl> 支持多对多：一个术语可有多个描述，多个术语可共享一个描述：

html
<!-- 多术语 → 一描述（同义词） -->
<dl>
  <dt>Firefox</dt>
  <dt>火狐</dt>
  <dd>Mozilla 开发的开源浏览器。</dd>
</dl>

<!-- 键值元数据 -->
<dl>
  <dt>姓名</dt>
  <dd>哥斯拉</dd>
  <dt>出生年</dt>
  <dd>1952</dd>
  <dt>产地</dt>
  <dd>日本</dd>
</dl>

<div> 包裹便于布局 ​

HTML 允许用 <div> 把每组 <dt> + <dd> 包起来，方便用 Flexbox / Grid 布局或加微数据（这是 <dl> 里唯一允许的额外包裹元素）：

html
<dl>
  <div>
    <dt>姓名</dt>
    <dd>哥斯拉</dd>
  </div>
  <div>
    <dt>出生年</dt>
    <dd>1952</dd>
  </div>
</dl>

别为「缩进」滥用 <dl>

历史上有人因为 <dd> 默认带左缩进，就拿 <dl> 当「缩进工具」——这是错的，会破坏语义。需要缩进请用 CSS margin。<dl> 只该用于真正的「术语—描述」配对。

四、<menu>：命令列表 ​

<menu> 在语义上等价于 <ul>——表示一组命令 / 操作（工具栏按钮等），同样用 <li> 装项。它历史上曾有「上下文菜单」的用途，但那部分已废弃，现今它就是「语义更偏向操作集合的 <ul>」：

html
<menu>
  <li><button>复制</button></li>
  <li><button>剪切</button></li>
  <li><button>粘贴</button></li>
</menu>

日常用 <ul> 足矣，<menu> 了解即可。

嵌套与样式 ​

列表可任意嵌套（子列表放在 <li> 内部，而非两个 <li> 之间）：

html
<ul>
  <li>
    前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>后端</li>
</ul>

样式一律交给 CSS：list-style-type（圆点 / 数字 / 无）、list-style-position、::marker（自定义标记）、margin / padding（缩进）。选哪种列表元素只看语义，不看长相。

三型对照 ​

元素语义顺序典型场景
<ul>无序集合无关购物清单、功能点、导航
<ol>有序序列有意义步骤、排名、目录
<dl>术语 + 描述——术语表、键值元数据

小结 ​

<ul> / <ol> 的区别只在「顺序是否有意义」，<ol> 用 start / type / reversed / value 精调编号；<dl> 专门表达「术语—描述」配对，切忌拿它当缩进工具。样式永远交给 CSS。下一页进入文本的国际化处理——注音、双向文字与编辑标注：国际化与编辑标注。