HTML 列表

把多条相关信息排成列表，比写成一大段文字更容易阅读，比如购物清单、步骤说明、网站导航。HTML 提供了无序列表、有序列表和自定义列表三种列表，分别适合罗列、排序和带说明的条目场景。

无序列表 ul/li

无序列表用 <ul>（unordered list）包裹，每个条目放在 <li>（list item）中，条目前面默认显示圆点符号，适合顺序不重要的内容，如购物清单、功能列表。

<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>面包</li>
</ul>

在浏览器中显示为：三行条目，每行前有一个黑色小圆点：咖啡、牛奶、面包。

有序列表 ol/li

有序列表用 <ol>（ordered list）包裹，浏览器会自动为每条 <li> 加上 1、2、3……的编号，适合步骤、排名等强调先后顺序的内容。可通过 type 属性改用字母或罗马数字。

<ol>
  <li>打开烤箱预热</li>
  <li>放入面团</li>
  <li>烤 20 分钟取出</li>
</ol>

在浏览器中显示为：带 1、2、3 编号的三行步骤文字。

修改列表符号

列表默认符号可通过 CSS 修改：list-style-type 可把无序列表的圆点改为圆形（circle）、方形（square），把有序列表改成字母（lower-alpha）、罗马数字（roman）等，只需在 style 中指定。

<ul style="list-style-type: square;">
  <li>方形符号的项目一</li>
  <li>方形符号的项目二</li>
</ul>

在浏览器中显示为：两行条目，每行前是黑色小方块。

嵌套列表

列表内部可以再放一个列表形成层级，比如"大类下面再列小项"。嵌套时把新的 <ul>/<ol> 放进某个 <li> 内部即可，浏览器会自动换一种符号以示区分。

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>饮料</li>
</ul>

在浏览器中显示为：外层"水果、饮料"带圆点，内层"苹果、香蕉"缩进并改用空心圆点。

自定义列表 dl/dt/dd

自定义列表用 <dl> 包裹，<dt> 定义条目名称（term），<dd> 描述该名称（description），常用于术语表、名词解释等"名称-说明"配对的内容。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用来描述网页结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用来美化网页外观。</dd>
</dl>

在浏览器中显示为："HTML"和"CSS"各占一行，其下缩进显示对应的说明文字。

小结

顺序不重要用 ul，强调先后用 ol，术语配对用 dl；子列表放进 li 即可实现嵌套。列表让信息层次分明，是排版中最常用的元素之一。