Html 简明教程

HTML - Lists

  1. HTML 列表是相关信息的集合。此列表可以根据要求进行排序或未排序。在 html 中，我们可以使用 * <ol>* 和 * <ul>* 标签创建有序列表和无序列表。每种类型的列表都可以使用适用的属性或 CSS 进行修饰。还有一个列表，即描述列表 - HTML * <dl>* 、 * <dt>* 和 * <dd>* 标签用于创建描述列表。

Lists in HTML

  1. 由于 HTML 提供了三种方法来指定信息列表，即有序列表、无序列表和定义列表。所有的列表都必须包含一个或多个列表项之一。

尝试单击图标运行按钮，以运行以下 HTML 代码并查看输出。

Examples of HTML Lists

  1. 在下面的示例中，我们将看到无序列表、有序列表、描述列表及其变体，还将使用 CSS 来修饰列表。

HTML Unorder Lists

  1. 无序列表用项目符号标记，通过使用 html * <ul>* 和 * <li>* 标签，我们可以创建无序列表。这也称为无序列表。

Example

在这个示例中，我们将在无序列表中创建 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>

HTML Order Lists

默认情况下，有序列表以数字标记，我们可以将数字更改为字母、罗马数字等。使用 html * <ol>* 和 * <li>* 标记，我们可以创建一个有序列表，并使用 type 属性，我们可以更改默认的数字标记。

Example

在这个示例中，我们将在有序列表中创建 5 项，尝试使用 type 属性更改数字标记。

<!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>

HTML Description Lists

描述列表是带描述的项目列表，要创建描述列表，我们可以使用 * <dl>* 、 * <dt>* 和 * <dd>* 标记。

Example

在这个示例中，我们将创建 3 个带有描述的描述列表。

<!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 Nested Lists

在另一个列表中创建的列表称为 Nested List 。HTML 也允许在列表中嵌套列表，以生成复杂的文档结构。

Example

在下面的示例中，我们在有序列表中嵌套无序列表。

<!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>

Grouping with the <div> Tag

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

Example

在这个示例中，我们使用 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>

Applying CSS to HTML List

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

Example

以下示例展示了如何使用 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>

Marker Types in HTML Lists

CSS 允許自訂清單項目符號類型。為此，我們使用 CSS * list-style-type* 屬性，它可以設定為將符號變更為圓圈、方塊或其他符號。

Example

在這個範例中，我們使用 list-style-type CSS 屬性來設定清單項目符號。

<!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>