（五）HTML列表（无序列表、有序列表、定义列表）

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

在HTML中，列表是一种常见的结构化内容形式，主要用于展示具有条目性质的信息。其中，无序列表和有序列表是两种最基本且常用的类型，它们通过特定的标签组合实现不同的显示效果。

无序列表的使用与结构

无序列表用于表示一组没有特定顺序要求的项目，通常以前缀符号（如圆点）进行标记。它由两个容器级标签构成：ul 和 li。

ul 是“unordered list”的缩写，作为整个列表的容器；li 则代表“list item”，即每一个具体的列表项。

基本语法结构如下：

<h2>古典四大名著</h2>
<ul>
  <li>红楼梦</li>
  <li>水浒传</li>
  <li>西游记</li>
  <li>三国演义</li>
</ul>
    

需要注意的是，ul 标签内只能直接嵌套 li 标签，二者为父子关系。而每个 li 内部则可以包含任意其他HTML元素，甚至可以继续嵌套新的 ul 或 ol 结构，从而实现多层级的内容组织。

例如，在“古典四大名著”这一主题下，可进一步展开每部作品中的主要人物：

<h2>古典四大名著</h2>
<ul>
  <li>
    <h3>西游记</h3>
    <ul>
      <li>唐僧</li>
      <li>孙悟空</li>
      <li>沙和尚</li>
      <li>猪八戒</li>
    </ul>
  </li>
  <li>
    <h3>红楼梦</h3>
    <ul>
      <li>林黛玉</li>
      <li>贾宝玉</li>
      <li>薛宝钗</li>
      <li>王熙凤</li>
    </ul>
  </li>
  <li>
    <h3>水浒传</h3>
    <ul>
      <li>林冲</li>
      <li>鲁智深</li>
      <li>武松</li>
      <li>宋江</li>
    </ul>
  </li>
  <li>
    <h3>三国演义</h3>
    <ul>
      <li>刘备</li>
      <li>曹操</li>
      <li>孙权</li>
      <li>张飞</li>
    </ul>
  </li>
</ul>
    

无序列表的各项之间并无先后之分，其前缀样式（如圆形、方块等）由CSS控制，不影响语义结构。

有序列表的功能与应用

与无序列表相对，有序列表适用于需要体现排列顺序的内容，比如排名、步骤或流程等。它由 ol 和 li 两个标签共同构建。

ol 是“ordered list”的简称，作为有序列表的外层容器；li 同样表示列表中的每一项。

两者之间的嵌套规则与无序列表一致：ol 内必须仅包含 li，而 li 内可自由嵌套其他标签，包括另一个 ol。

一个典型的使用场景是展示班级成绩排名：

<h2>五年级排名情况</h2>
<ol>
  <li>五年级2班</li>
  <li>五年级1班</li>
  <li>五年级4班</li>
  <li>五年级3班</li>
</ol>
    

此外，有序列表也支持嵌套结构，可用于更复杂的层级数据呈现。例如，展示三年级各班期末考试的具体学生排名：

<h2>三年级期末考试排名情况</h2>
<ol>
  <li>
    <h3>三年级2班</h3>
    <ol>
      <li>张同学</li>
      <li>李同学</li>
      <li>刘同学</li>
    </ol>
  </li>
  <li>
    <h3>三年级1班</h3>
    <ol>
      <li>王同学</li>
      <li>孙同学</li>
      <li>姚同学</li>
    </ol>
  </li>
  <li>
    <h3>三年级3班</h3>
    <ol>
      <li>孟同学</li>
      <li>赵同学</li>
      <li>姚同学</li>
    </ol>
  </li>
  <li>
    <h3>三年级4班</h3>
    <ol>
      <li>李同学</li>
      <li>钱同学</li>
      <li>周同学</li>
    </ol>
  </li>
</ol>
    

从实际应用中可以看出，ol 和 ul 最显著的区别在于使用场景的不同：前者用于有序列表，后者则适用于无序内容的展示。

在企业级网页开发中，无序列表标签（ul）有着广泛的应用。例如，在腾讯网这样的大型资讯平台上，常能看到无序列表被用来组织新闻条目或导航菜单。

而有序列表（ol）更多用于需要体现排名或顺序的页面布局。典型案例如网易云音乐的歌曲排行榜，通过数字序号清晰地呈现歌曲名次，增强信息的可读性与逻辑性。

接下来介绍第三种列表类型——定义列表。

定义列表的作用

定义列表主要用于构建一组术语及其对应解释的内容结构，适合展示具有标题与描述关系的信息。

组成标签说明

该列表由三个核心标签构成：dl、dt 和 dd。

• dl（definition list）：作为容器，表示一个自定义的定义列表整体结构。
• dt（definition term）：定义术语或主题，代表列表中的每一项标题。
• dd（definition description）：对前面 dt 所述的主题进行解释和补充说明。

注意：dl 标签内部只能包含 dt 和 dd 元素，且两者为同级元素。

基本语法示例

以下是一个简单的国内女明星信息展示：

<h2>国内女明星</h2> <dl> <dt>杨幂</dt> <dd>作品：《三生三世》、《宫》、《红妖小狐娘》</dd> <dt>赵丽颖</dt> <dd>作品：《陆贞传奇》、《杉杉来了》、《花千骨》</dd> <dt>刘亦菲</dt> <dd>作品：《去有风的地方》、《金粉世家》、《神雕侠侣》</dd> </dl>

多条解释的处理方式

每个 dt 后可以跟随零个或多个 dd 标签，每一个 dd 都是对其上方最近的一个 dt 的进一步说明。

<h2>国内女明星</h2> <dl> <dt>杨幂</dt> <dd>作品：《三生三世》、《宫》、《红妖小狐娘》</dd> <dd>家庭：小糯米</dd> <dd>朋友：迪丽热巴、张大大</dd> <dt>赵丽颖</dt> <dd>作品：《陆贞传奇》、《杉杉来了》、《花千骨》</dd> <dd>家庭：想想</dd> <dd>朋友：陈晓</dd> <dt>刘亦菲</dt> <dd>作品：《去有风的地方》、《金粉世家》、《神雕侠侣》</dd> <dd>家庭：无</dd> <dd>朋友；杨幂</dd> </dl>

容器级标签特性

dt 与 dd 均属于容器级标签，意味着它们内部可以嵌套任意合法的 HTML 内容，如段落、链接、图片等。

<h2>国内女明星</h2> <dl> <dt>杨幂</dt> <dd> <p>作品：《三生三世》、《宫》、《红妖小狐娘》</p> <p>家庭：小糯米</p> <p>朋友：迪丽热巴、张大大</p> </dd> <dt>赵丽颖</dt> <dd> <p>作品：《陆贞传奇》、《杉杉来了》、《花千骨》</p> <p>家庭：想想</p> <p>朋友：陈晓</p> </dd> <dt>刘亦菲</dt> <dd> <p>作品：《去有风的地方》、《金粉世家》、《神雕侠侣》</p> <p>家庭：无</p> <p>朋友；杨幂</p> </dd> </dl>

实际应用场景分析

通过查看真实网站源码可以发现，通常不会在一个 dl 中连续放置多个 dt 和 dd，而是采用多个独立的 dl 结构来分别包裹每组 dt + dd。这种写法更利于页面布局的灵活性和样式控制。

以下是工作中常见的标准结构写法：

<h2>国内女明星</h2> <dl> <dt>杨幂</dt> <dd> <p>作品：《三生三世》、《宫》、《红妖小狐娘》</p> <p>家庭：小糯米</p> <p>朋友：迪丽热巴、张大大</p> </dd> </dl> <dl> <dt>赵丽颖</dt> <dd> <p>作品：《陆贞传奇》、《杉杉来了》、《花千骨》</p> <p>家庭：想想</p> <p>朋友：陈晓</p> </dd> </dl>

刘亦菲

代表作包括《金粉世家》、《神雕侠侣》以及《去有风的地方》，在多部影视作品中展现了出色的演技与独特的气质。

朋友：杨幂

家庭状况：未公开

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：HTML htm Description definition ordered