【0014】HTML列表标签详解

最新推荐文章于 2025-04-27 15:49:47 发布

程序员张小厨

最新推荐文章于 2025-04-27 15:49:47 发布

阅读量1k

点赞数 16

分类专栏： # 【01】HTML 文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/cxyzxc0325/article/details/145909811

版权

【01】HTML 专栏收录该内容

15 篇文章

订阅专栏

如果你觉得我的文章写的不错，请关注我哟，请点赞、评论，收藏此文章，谢谢！

本文内容体系结构如下：
在这里插入图片描述

HTML列表标签用于在网页中创建不同类型的列表。这些列表有助于组织和展示相关信息。HTML提供了无序列表、有序列表和描述列表（也称之为定义列表）三种列表。本文详细介绍这三个列表的使用！

一、无序列表

1.1 无序列表简介

HTML无序列表用于在网页中显示一系列没有特定顺序的项目。这些项目通常使用圆点、方块或其他符号进行标记。无序列表常用于表示菜单、标签云、步骤列表（当顺序不重要时）等内容。

1.2 无序列表的基本语法

无序列表使用<ul>标签来定义，列表中的每个项目使用<li>标签来定义。基本语法结构如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <!-- 可以继续添加更多的<li>标签 -->
</ul>

示例

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

上面的代码会在浏览器中显示一个包含三个项目的无序列表，每个项目前有一个圆点符号，在浏览器中展示效果如下：
在这里插入图片描述

1.3 无序列表的属性

虽然CSS通常用于控制列表的外观，但HTML <li> 标签本身也提供一些属性来修改列表项的行为或外观（尽管这些属性在现代Web开发中较少使用，因为CSS提供了更灵活和强大的样式控制）。

（1）type 属性

type 属性用于指定无序列表的项目符号类型。可选值包括：

disc：实心圆点（默认值）
circle：空心圆
square：实心方块

示例

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<hr />

<ul type="disc">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<hr />

<ul type="circle">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<hr />

<ul type="square">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

不同type属性值在浏览器中展示效果如下图所示：
在这里插入图片描述

1.4 无序列表小结

无序列表使用<ul>标签定义，列表项使用<li>标签定义。
使用type属性可以修改无序列表的项目符号类型。
虽然CSS提供了更强大的样式控制，但了解HTML列表标签的基本用法和属性仍然很重要。

二、有序列表

2.1 有序列表简介

HTML有序列表用于在网页中显示一系列按特定顺序排列的项目。这些项目通常使用数字、字母或其他连续符号进行标记。有序列表常用于表示步骤列表、排名、目录等内容。

2.2 有序列表的基本语法

有序列表使用<ol>标签来定义，列表中的每个项目使用<li>标签来定义。基本语法结构如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <!-- 可以继续添加更多的<li>标签 -->
</ol>

示例

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

上面的代码会在浏览器中显示一个包含三个项目的有序列表，每个项目前有一个数字编号，从1开始递增。在浏览器中展示效果如下：
在这里插入图片描述

2.3 有序列表的属性

（1）type属性

虽然HTML有序列表默认使用阿拉伯数字进行编号，但你可以通过type属性来指定不同的编号类型。可选值包括：

1：阿拉伯数字（默认值）
A：大写字母
a：小写字母
I：大写罗马数字
i：小写罗马数字

示例

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="1">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="A">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="a">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="I">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="i">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

不同type属性值在浏览器中展示效果如下图所示：
在这里插入图片描述

（2）start属性

有序列表标签的start属性是HTML中用于指定有序列表（<ol>）的第一个列表项的起始编号的属性。

1）基本用法

定义：start属性规定有序列表中第一个列表项的起始值。
语法：<ol start="number">，其中number是具体的起始编号，必须为整数。
浏览器支持：目前主流浏览器（如Chrome、Edge、Firefox、Safari、Opera）都支持start属性。

2）属性值

整数：start属性的值必须为整数，即使列表项的编号类型为字母或罗马数字时也是如此。例如，要从字母“c”或罗马数字“iii”开始计算列表项，应使用start="3"。

3）注意事项

HTML版本：在HTML 4.01中，不赞成使用<ol>元素的start属性；在XHTML 1.0 Strict DTD中，不支持<ol>元素的start属性。然而，在实际应用中，由于所有主流浏览器都支持该属性，因此它仍然被广泛使用。
CSS替代方案：目前，仍然没有CSS替代方案来实现与start属性相同的功能。因此，在需要指定有序列表起始编号时，仍然需要使用start属性。

4）示例代码

以下是一个使用start属性的有序列表示例：

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="1" start="4">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="A" start="4">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="a" start="4">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="I" start="4">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

<ol type="i" start="4">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<hr />

在这个示例中，设置了start属性值为4的有序列表的第一个列表项的编号将4、D、d、IV、iv开始，不是从1，A、a、I、i开始，显示效果如下图所示：
在这里插入图片描述

5）start属性总结

start属性是HTML有序列表标签（<ol>）的一个非常有用的属性，它允许你指定列表的起始编号。虽然在一些HTML版本中不推荐使用，但由于所有主流浏览器都支持该属性，并且目前没有CSS替代方案，因此它仍然是一个实用的工具。

2.4 有序列表小结

有序列表使用<ol>标签定义，列表项使用<li>标签定义。
你可以通过type属性来指定有序列表的编号类型，如阿拉伯数字、字母、罗马数字等。
你可以通过strart属性来执行有序列表项目符号的起始编号。
虽然CSS提供了更强大的样式控制，但了解HTML列表标签的基本用法和属性仍然很重要。

三、描述列表

3.1 描述列表简介

描述列表（Description List）是一种HTML元素，用于展示一系列术语及其描述。与无序列表（<ul>）和有序列表（<ol>）不同，描述列表更适合用于术语和定义的组合展示，如词汇表、FAQ（常见问题解答）等。

3.2描述列表的基本结构

描述列表由三个主要标签组成：<dl>, <dt>, 和 <dd>。

<dl>：定义描述列表的容器。
<dt>：定义描述列表中的术语（术语项）。
<dd>：描述与术语相关的定义或描述（描述项）。

基本结构如下：

<dl>
  <dt>术语1</dt>
  <dd>术语1的描述</dd>
  <dt>术语2</dt>
  <dd>术语2的描述</dd>
  <!-- 可以根据需要添加更多术语和描述 -->
</dl>

每个 <dt> 标签后面通常跟随一个或多个 <dd> 标签，这些 <dd> 标签是对 <dt> 标签内容的描述。浏览器显示效果如下图所示：
在这里插入图片描述

3.3 描述列表标签详解

（1）`<dl>` 标签

作用：定义描述列表的容器。
语法：<dl>...</dl>
内容：包含零个或多个 <dt> 和 <dd> 元素。

（2）`<dt>` 标签

作用：定义描述列表中的术语（术语项）。
语法：<dt>...</dt>
内容：通常包含文本，但也可以是其他内联元素（如链接、图片等）。
注意事项：每个 <dt> 通常与紧随其后的一个或多个 <dd> 相关联。

（3）`<dd>` 标签

作用：描述与术语相关的定义或描述（描述项）。
语法：<dd>...</dd>
内容：可以包含文本、图片、链接、段落等块级元素。
注意事项：每个 <dd> 通常紧跟在一个 <dt> 后面，对 <dt> 进行描述。

3.4 描述列表的使用场景示例

（1）示例1：词汇表

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言（HyperText Markup Language），用于创建网页的标准标记语言。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表（Cascading Style Sheets），用于描述HTML或XML文档的呈现样式。</dd>
  <dt>JavaScript</dt>
  <dd>一种用于创建动态网页内容的脚本语言。</dd>
</dl>

浏览器展示效果如下图所示：
在这里插入图片描述

（2）示例2：FAQ

<dl>
  <dt>问：如何开始学习编程？</dt>
  <dd>答：可以从学习一门编程语言开始，如Python或JavaScript，同时实践编写小程序。</dd>
  <dt>问：HTML和CSS有什么区别？</dt>
  <dd>答：HTML用于定义网页的结构和内容，而CSS用于控制网页的样式和布局。</dd>
  <dt>问：JavaScript在网页中的作用是什么？</dt>
  <dd>答：JavaScript用于在网页中实现动态功能和交互效果。</dd>
</dl>

浏览器展示效果如下图所示：
在这里插入图片描述

3.5 描述列表小结

描述列表是HTML中用于展示术语及其描述的一种结构，由 <dl>, <dt>, 和 <dd> 三个标签组成。<dl> 定义描述列表的容器，<dt> 定义术语，<dd> 定义术语的描述。描述列表非常适合用于词汇表、FAQ等内容的展示。

四、列表的嵌套

4.1 列表标签嵌套的概念

（1）嵌套的定义

嵌套是指在一个列表项内部再包含一个或多个列表。这允许我们表示信息的层级结构。

（2）嵌套的目的和优势

目的：清晰地展示信息的层级关系。
优势：提高内容的可读性和可理解性。

4.2 无序列表与有序列表的嵌套

（1）无序列表嵌套有序列表

<ul>
  <li>水果
    <ol>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ol>
  </li>
  <li>蔬菜
    <ol>
      <li>胡萝卜</li>
      <li>菠菜</li>
      <li>花椰菜</li>
    </ol>
  </li>
</ul>

浏览器显示效果如下：
在这里插入图片描述

（2）有序列表嵌套无序列表

<ol>
  <li>准备阶段
    <ul>
      <li>确定目标</li>
      <li>收集资料</li>
      <li>制定计划</li>
    </ul>
  </li>
  <li>执行阶段
    <ul>
      <li>分配任务</li>
      <li>执行任务</li>
      <li>监控进度</li>
    </ul>
  </li>
</ol>

浏览器显示效果如下：
在这里插入图片描述

4.3 描述列表与其他列表的嵌套

（1）描述列表嵌套无序列表

<dl>
  <dt>编程语言</dt>
  <dd>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </dd>
  <dt>开发工具</dt>
  <dd>
    <ul>
      <li>Visual Studio Code</li>
      <li>Sublime Text</li>
      <li>Atom</li>
    </ul>
  </dd>
</dl>

浏览器显示效果如下：
在这里插入图片描述

（2）描述列表嵌套有序列表

<dl>
  <dt>学习步骤</dt>
  <dd>
    <ol>
      <li>了解基础知识</li>
      <li>实践项目</li>
      <li>参与社区</li>
    </ol>
  </dd>
  <dt>学习资源</dt>
  <dd>
    <ol>
      <li>官方文档</li>
      <li>在线教程</li>
      <li>书籍</li>
    </ol>
  </dd>
</dl>