• 时间:
  • 分类:

HTML 里只有 3 种列表标签。它们的作用主要是告诉浏览器和机器这些数据是什么关系。

1. 无序列表 <ul>：并列关系

这玩意是干嘛的：
当一组数据完全不分先后顺序时使用。比如导航菜单、商品标签。

怎么写：
用 <ul> (Unordered List) 划定区域，数据必须包裹在 <li> (List Item) 中。

<!-- 导航菜单 -->
<ul>
  <li>首页</li>
  <li>关于我们</li>
  <li>联系邮箱</li>
</ul>

效果：

核心定律：只要元素的顺序打乱也不影响对整体内容的理解，就应该用 <ul>。

2. 有序列表 <ol>：步骤与排名

这玩意是干嘛的：
当且仅当数据必须按照特定顺序展示时使用。比如操作步骤、排行榜。

怎么写：
用 <ol> (Ordered List) 划定区域，数据依旧包裹在 <li> 中。

<!-- 操作步骤 -->
<ol>
  <li>点击右上角登录</li>
  <li>输入验证码</li>
  <li>完成绑定</li>
</ol>

效果：

3. 描述列表 <dl>：键值对映射

这玩意是干嘛的：
专门用来展示术语 + 解释的问答关系。实际业务中常用于 FAQ 详情解答或电商商品参数说明。

怎么写：
这需要一套组合拳标签。

  • <dl> (Description List)：声明描述区域。
  • <dt> (Term)：你要解释的术语。
  • <dd> (Definition)：对术语的具体解释文字。
<!-- 商品参数 -->
<dl>
  <dt>保质期</dt>
  <dd>冷藏保存1个月</dd>
  <dd>冷冻保存6个月</dd> <!--  一个术语可以对应多条解释 -->
</dl>

效果：

常见错误：浏览器默认会给 <dd> 加上视觉缩进效果。绝不要为了白嫖这个缩排效果去滥用 <dl>。样式排版交给 CSS，标签只负责数据关系。

4. 嵌套列表：层级结构

当列表的某一项内容里还需要包含次级列表时，必须遵守唯一的嵌套规则：子组件列表必须完整包裹在一个父级 <li> 标签内部。

<ul>
  <li>前端语言
    <!--  正确做法：子列表完整包裹在 li 内部 -->
    <ol>
      <li>HTML</li>
      <li>CSS</li>
    </ol>
  </li>
  <li>后端语言</li>
</ul>

效果：

常见错误：千万不能在 <ul> 里直接塞入一个 <ol> 或另一个 <ul>，<ul> 和 <ol> 的直接子元素只能且必须是 <li>。

总结：

  • <ul> = 无序并列（打乱顺序也不影响理解，如导航栏、商品平铺）
  • <ol> = 有序步骤（必须按先后排布，如排行榜、操作步骤）
  • <dl> = 键值对映射（解释名词短语、Q&A问答，必须配合 dt 和 dd）
  • 铁律：<ul> 和 <ol> 的直接儿子只能且必须是 <li>！

➡️ 下期预告：

掌握了列表的“结构语义”后，如果你遇到需要特殊排版的文字片段，该怎么办呢？
比如化学公式的上下标、界面快捷键按键提示、名人的大段引用语……遇到这些场景怎样写才能既少写冗余 CSS，又能让搜索引擎精准抓取？
请看下一章👉 【大白话前端 08】HTML 文本语义化：6 类非 div 标签的速查指南

标签: none

添加新评论