HTML教程-HTML列表标签

作者: 鱼丸

时间: 2023-06-08

分类: HTML教程

HTML 列表用于指定信息的列表。所有列表都可以包含一个或多个列表元素。HTML 列表有三种不同的类型：

有序列表或编号列表（ol）
无序列表或项目符号列表（ul）
描述列表或定义列表（dl）

注意：我们可以在另一个列表中创建一个列表，这被称为嵌套列表。

HTML 有序列表或编号列表

在有序的 HTML 列表中，默认情况下，所有列表项都用数字标记。也称为编号列表。有序列表以 <ol> 标签开头，列表项以 <li> 标签开头。

<ol>
  <li>Aries</li>
  <li>Bingo</li>
  <li>Leo</li>
  <li>Oracle</li>
</ol>

输出：

Aries
Bingo
Leo
Oracle

HTML 无序列表或项目符号列表

在 HTML 的无序列表中，所有列表项都用项目符号标记。也称为项目符号列表。无序列表以 <ul> 标签开头，列表项以 <li> 标签开头。

<ul>
  <li>Aries</li>
  <li>Bingo</li>
  <li>Leo</li>
  <li>Oracle</li>
</ul>

输出：

Aries
Bingo
Leo
Oracle

HTML 描述列表或定义列表

HTML 描述列表是一种列表样式，受到 HTML 和 XHTML 的支持。也称为定义列表，其中条目被列为字典或百科全书。

定义列表在你想要呈现词汇表、术语列表或其他名称-值对列表时非常合适。

HTML 描述列表包含以下三个标签：

<dl> 标签定义列表的开始。
<dt> 标签定义一个术语。
<dd> 标签定义该术语的定义（描述）。

<dl>
  <dt>Aries</dt>
  <dd>- 十二星座之一。</dd>
  <dt>Bingo</dt>
  <dd>- 我的晚间零食之一。</dd>
  <dt>Leo</dt>
  <dd>- 也是十二星座之一。</dd>
  <dt>Oracle</dt>
  <dd>- 一家跨国技术公司。</dd>
</dl>

输出：

Aries
- 十二星座之一。
Bingo
- 我的晚间零食之一。
Leo
- 也是十二星座之一。
Oracle
- 一家跨国技术公司。

HTML 嵌套列表

一个列表中包含另一个列表被称为嵌套列表。如果你想在一个有序列表中嵌套一个无序列表，那么这种类型的列表被称为嵌套列表。

代码：

<!DOCTYPE html>
<html>
<head>
  <title>Nested list</title>
</head>
<body>
  <p>List of Indian States with their capital</p>
  <ol>
    <li>Delhi
      <ul>
        <li>New Delhi</li>
      </ul>
    </li>
    <li>Haryana
      <ul>
        <li>Chandigarh</li>
      </ul>
    </li>
    <li>Gujarat
      <ul>
        <li>Gandhinagar</li>
      </ul>
    </li>
    <li>Rajasthan
      <ul>
        <li>Jaipur</li>
      </ul>
    </li>
    <li>Maharashtra
      <ul>
        <li>Mumbai</li>
      </ul>
    </li>
    <li>Uttar Pradesh
      <ul>
        <li>Lucknow</li>
      </ul>
    </li>
  </ol>
</body>
</html>

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
`<ol><ul><dl>`	是	是	是	是	是