HTML提供了幾種清單模式-前端問答-PHP中文網

1.有序列表

2. 無序列表

3. 定义列表

4. 总结

首頁

web前端

前端問答

HTML提供了幾種清單模式

青灯夜游

Nov 17, 2021 pm 04:41 PM

html

HTML提供了3種列表模式：1、有序列表，使用「

」和「
」標籤創建，有序列表之間的內容有先後順序之分； 2.無序列表，使用「
」和「
」標籤建立；3、定義列表，使用「
」、「
」和「

」標籤創建。

HTML提供了幾種清單模式

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML 清單（List）可以將若干條相關的內容整理起來，讓內容看起來更有條理。在清單內您可以放置文字、圖像、連結等，也可以在一個清單中定義另一個清單（清單嵌套）。

HTML 為我們提供了三種不同形式的列表：

有序列表，使用

標籤

無序列表，使用

標籤
定義列表，使用

標籤

1.有序列表

在HTML 中，

我們來看一個簡單的實例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表</title>
</head>
<body>
    <p>煮米饭的步骤：</p>
    <ol>
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>
</body>
</html>

登入後複製

HTML提供了幾種清單模式

有有序列表需要使用

標籤：

2. 是 list item 的簡稱，表示列表的每一項，
  1. 就表示有多少條內容。列表項目中可以包含文字、圖片、連結等，甚至可以是另一個列表。

注意，

配合使用，不會單獨出現，而且不建議在

之外的其他標籤。

2. 無序列表

HTML 使用

標籤來表示列表的每一項，但是無序列表之間的內容沒有順序。例如，早餐的種類不需要顯示順序，這時就可以使用無序列表。

我們來看一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <p>早餐的种类：</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

登入後複製

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <p>早餐的种类：</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

登入後複製

浏览器运行结果如图所示：

HTML提供了幾種清單模式

无序列表需要使用

标签：

一样，都表示列表中的每一项。默认情况下，无序列表的每一项都使用●符号表示。

注意，

配合使用，不会单独出现，而且不建议在

之外的其他标签。

3. 定义列表

在 HTML 中，

标签用于创建定义列表。定义列表由标题（术语）和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。

定义列表具体语法格式如下：

<dl>
    <dt>标题1<dt>
    <dd>描述文本2<dd>
    <dt>标题2<dt>
    <dd>描述文本2<dd>
    <dt>标题3<dt>
    <dd>描述文本3<dd>
</dl>

登入後複製

定义列表需要使用

和

标签：

是 definition list 的简称，表示定义列表。
是 definition term 的简称，表示定义术语，也就是我们说的标题。
是 definition description 的简称，表示定义描述。

可以认为

定义了一个概念（术语），

用来对概念（术语）进行解释。

注意，

和

是同级标签，它们都是

搭配一个

，一个

和

。

我们来看一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML定义列表</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>HTML 是一种专门用来开发网页的标记语言，您可以转到《<a href="http://www.php.cn/course/list/11.html" target="_blank">HTML教程</a>》了解更多。</dd>
        <dt>CSS</dt>
        <dd>CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页，您可以转到《<a href="https://www.php.cn/course/list/12.html" target="_blank">CSS教程</a>》了解更多。</dd>
        <dt>JavaScript</dt>
        <dd>JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言，您可以转到《<a href="https://www.php.cn/course/list/2.html" target="_blank">JS教程</a>》了解更多。</dd>
    </dl>
</body>
</html>

登入後複製

HTML提供了幾種清單模式

和

虽然是同级标签，但是它们的默认样式不同，

带有一段缩进，而

顶格显示，这样层次更加分明。 4. 总结 列表分类说明 有序列表 表示有序列表， 表示列表中的每一项，默认使用阿拉伯数字编号。 无序列表 表示无序列表， 表示列表中的每一项，默认使用●符号作为作为每一项的标记。 定义列表 表示定义列表， 表示定义术语、 表示定义描述。一般情况下，每个 搭配一个 ，一个 可以包含多对 和 。 推荐教程：《html视频教程》

列表分类	说明
有序列表	表示有序列表，表示列表中的每一项，默认使用阿拉伯数字编号。
无序列表	表示无序列表，表示列表中的每一项，默认使用`●`符号作为作为每一项的标记。
定义列表	表示定义列表，表示定义术语、表示定义描述。一般情况下，每个搭配一个，一个可以包含多对和。