HTML - 列表

HTML 列表

HTML 列表是项目组或集合。根据需要，这些项目可以是有序的，也可以是无序的。它们有助于组织、构建和呈现信息，使其更易于用户使用、阅读和访问。下面显示了示例列表。−

在 HTML 中使用列表

要在 HTML 中显示信息列表，我们使用各种列表标签，例如 <ul>、<ol> 和 <ll>。HTML 为 Web 开发人员提供了三种指定信息列表的方法，即有序、无序和定义列表。所有列表都必须包含一个或多个列表元素。除了提到的列表类型外，还有一些其他重要的与列表相关的元素和概念也有助于有效的文档结构。

无序列表

无序列表显示项目列表，这些项目并非按特定顺序排列。无序列表用项目符号标记。要创建无序列表，可以使用 <ul> 标签以及 <li> 标签。这里，<li> 标签指定列表项。

示例

以下示例演示了无序列表。在这里，我们创建了一个包含 5 个项目的列表。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML List</h2>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>JavaFX</li>
   </ul>
</body>
</html>

有序列表

有序列表是按特定顺序排列的项目列表。有序列表默认情况下用数字标记；您可以使用 type 属性或 CSS list-style-type 属性将数字更改为字母、罗马数字等。

要创建有序列表，可以使用 <ol> 标签以及 <li> 标签，其中 <li> 指定列表项。

示例

以下示例演示了一个包含 5 个项目的有序列表。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML List</h2>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>JavaFX</li>
   </ol>
</body>
</html>

定义列表

定义列表是包含项目及其相应描述的列表。定义列表是使用 <dl>、<dt> 和 <dd> 标签创建的。其中 <dl> 标签指定“定义列表”，<dt> 标签指定“定义术语”，<dd> 标签指定“定义描述”。

示例

以下示例演示了 HTML 中的定义列表；在这里，我们创建了一个包含三个项目的定义列表。

<!DOCTYPE html>
<html>
<head>
    <title>HTML List</title>
</head>
<body>
    <h2>Example of HTML List</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText markup languague</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheet</dd>
        <dt>JS</dt>
        <dd>JavaScript</dd>
    </dl>
</body>
</html>

嵌套列表

在另一个列表中创建的列表称为嵌套列表。HTML 还允许将列表彼此嵌套以生成复杂的文档结构。

示例

在以下示例中，我们将一个无序列表嵌套在一个有序列表中。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML Nested List</h2>
   <ol>
      <li>Item One</li>
      <li>Item Two
         <ul>
            <li>Subitem A</li>
            <li>Subitem B</li>
         </ul>
      </li>
      <li>Item Three</li>
   </ol>
</body>
</html>

在 <div> 标签内分组列表

为了增强样式和布局，列表通常包装在<div> 元素中。此分组有助于应用一致的样式并创建视觉上吸引人的列表结构。

示例

在这个示例中，我们使用 div 标签对无序列表进行分组。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Grouping of HTML List elements with div tag</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

列表样式

可以使用 CSS 对列表进行样式设置以增强视觉效果。可以将自定义样式应用于列表项，从而创建独特且视觉上吸引人的设计。为此，我们使用 <style> 标签，这是一种指定内部 CSS 的方法。

示例

以下示例演示了如何使用 style 标签将 CSS 应用于 HTML 列表。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
   <style>
      li {
         font-size: 16px;
      }
      div {
         color: red;
      }
   </style>
</head>
<body>
   <h2>HTML List with CSS</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

HTML 列表标记类型

CSS 允许自定义列表项的标记类型。为此，我们使用 CSS list-style-type 属性，可以将其设置为将标记更改为圆圈、正方形或其他符号。

示例

在这个示例中，我们使用 CSS 的 list-style-type 属性来设置列表项的标记。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
   <style>
      li {
         font-size: 16px;
         list-style-type: square;
      }
   </style>
</head>
<body>
   <h2>HTML list-style-type Property</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

打印页面