列表

ul 元素如何表示无序列表？

• 结构: ul 内放若干 li, 项之间顺序无意义;
• 渲染: 默认每项前显示圆点;

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

ol 元素如何表示有序列表？

• 结构: ol 内放若干 li, 项顺序有意义, 默认按序号编号;
• start: 指定起始序号;
• reversed: 反向编号;

<ol reversed start="2">
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

dl 元素如何表示描述列表？

• 结构: dl 内由 dt 与 dd 组成;
• dt: 被描述的词项;
• dd: 对该词项的说明;
• 数量关系: 一个 dt 可以搭配任意数量的 dd, 反之亦然;

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation
    and hundreds of volunteers.
  </dd>
</dl>

列表如何嵌套？

• 写法: 在 li 内部再放一个完整的 ul/ol;
• 归属: 子列表属于该 li, 缩进显示;

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>
    Process all the ingredients into a paste.
    <ul>
      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>