笙亿网络策划

HTML 列表怎么创建和使用？

约 10 分钟读完 29 阅
文章导读
上一个 测验 下一个 HTML 列表 HTML lists 是项目的集合或组。这些项目可以根据需求组织或无序排列。它们有助于组织、结构化和呈现信息，使其更用户友好、更易读和更易访问。下面的示例展示了列表。−
📋 目录
  1. 一 HTML 列表
  2. 二 在 HTML 中使用列表
  3. 三 无序列表
  4. 四 有序列表
  5. 五 定义列表
  6. 六 嵌套列表
  7. 七 将列表分组在 <div> 标签内
  8. 八 列表样式
  9. 九 HTML 列表标记类型
A A

HTML - 列表

上一个
测验
下一个

HTML 列表

HTML lists 是项目的集合或组。这些项目可以根据需求组织或无序排列。它们有助于组织、结构化和呈现信息，使其更用户友好、更易读和更易访问。下面的示例展示了列表。−

HTML Lists

在 HTML 中使用列表

要在 HTML 中显示信息列表，我们使用各种列表标签，如 <ul>、<ol> 和 <dl>。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 标签为 HTML 列表应用 CSS：

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