列表

讲解

HTML 有三种列表，覆盖绝大多数「成组内容」的场景。无序列表 <ul> 用于各项没有先后之分的内容：导航菜单、功能特性、商品参数，浏览器默认给每项加圆点。有序列表 <ol> 用于有顺序意义的内容：操作步骤、排行榜、目录章节，浏览器自动编号。<ol> 上还有几个实用属性：start="5" 从 5 开始编号（跨段续排），reversed 倒序编号（倒数榜单），type="a" 换成字母编号。编号只是渲染默认，真正的顺序语义由元素本身承载。

列表项 <li> 里可以放任意内容——文字、链接、图片，甚至再嵌套一个完整列表。嵌套列表是树形结构的标准表达：站点地图、多级导航、大纲目录都靠它。嵌套的关键写法是：子列表整个放进父级的某个 <li> 里，而不是与 <li> 平级。

第三种是描述列表 <dl>，由 <dt>（术语）和 <dd>（解释）成对组成，适合名词解释、FAQ、键值对式的信息（比如商品的「品牌：xxx / 型号：yyy」）。一个 dt 可以跟多个 dd，多个 dt 也可以共享一个 dd。导航菜单之所以推荐用 ul + li 而不是一堆 div 或 a，正是因为列表语义能让屏幕阅读器报出「列表，共 5 项」，用户立刻明白这是一组同级入口。

示例

<!-- 无序列表：导航菜单的经典写法 -->
<ul>
  <li><a href="/">首页</a></li>
  <li><a href="/docs">文档</a></li>
  <li><a href="/about">关于</a></li>
</ul>

<!-- 有序列表：步骤，从第 3 步续排 -->
<ol start="3">
  <li>保存文件为 index.html</li>
  <li>用浏览器打开查看效果</li>
</ol>

<!-- 嵌套列表：子列表放在父级 li 内部 -->
<ul>
  <li>
    前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>后端</li>
</ul>

<!-- 描述列表：术语与解释 -->
<dl>
  <dt>HTML</dt>
  <dd>描述网页结构的标记语言。</dd>
  <dt>CSS</dt>
  <dd>描述网页样式的样式表语言。</dd>
</dl>

常见坑

• li 直接当 ul 的文本用：<ul> 的直接子元素只能是 <li>，文字和其他元素都必须包在 li 里。
• 嵌套列表放错位置：子 <ul> 写在 <li>...</li> 外面、与 li 平级，是结构错误，浏览器会修复成意想不到的样子。
• 用 ol 只为要那个编号：编号可以用 CSS 生成；选择 ol 的唯一理由应该是「顺序有语义」。同样，不想让 ul 显示圆点该用 CSS（list-style: none），而不是换标签。
• 拿 br 或 div 堆出「假列表」：一行一个 div 看起来像列表，但对辅助技术而言只是一堆散落的盒子，失去了「这是一组 N 项」的信息。

小结

ul 管无序、ol 管有序（start/reversed/type 调整编号）、dl 管术语解释；li 内可嵌套子列表表达层级，导航菜单首选 ul。下一章学习展示结构化数据的表格。