笙亿网络策划

HTML 无序列表怎么创建和使用？

约 11 分钟读完 39 阅
文章导读
Previous Quiz Next HTML 无序列表 由 <ul> 标签定义，所有列表项都用项目符号标记。
📋 目录
  1. 一 HTML 无序列表
  2. 二 创建无序列表
  3. 三 HTML 无序列表 - 指定列表标记
  4. 四 无项目符号的无序列表
  5. 五 样式化无序 HTML 列表
  6. 六 嵌套无序列表
A A

HTML - 无序列表

Previous
Quiz
Next

HTML 无序列表 由 <ul> 标签定义，所有列表项都用项目符号标记。

HTML 无序列表

无序列表是一组没有特定顺序或序列的列表项集合，并用项目符号标记。HTML 无序列表通过 <ul> 标签创建，其中每个列表项由 <li> 标签定义。

这种类型的列表用于描述特定服务或产品，因为它不需要遵循任何顺序。

下图展示了一个杂货的无序列表：

Unordered Lists

创建无序列表

要在 HTML 中创建无序列表，我们使用 <ul> 标签，并在其中嵌套 <li> 标签。每个 <li> 元素代表列表中的一个项目。默认情况下，浏览器会为每个项目自动显示圆点项目符号。但是，我们可以使用 <ul> 元素上的 type 属性来更改此项目符号样式。

示例

以下示例演示了如何在 HTML 中创建无序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML Unordered List</title>
</head>
<body>
   <ul>
      <li>Beetroot</li>
      <li>Ginger</li>
      <li>Potato</li>
      <li>Radish</li>
   </ul>
</body>
</html>

上述示例显示了一个带有默认圆点项目符号的无序列表。

HTML 无序列表 - 指定列表标记

<ul> 标签的 type 属性用于指定 HTML 无序列表的项目符号类型。默认使用 disc 项目符号类型。但我们可以使用以下选项来更改它：

序号 值与描述
1

disc

这是默认的标记类型。
2

square

列表项将显示为方形标记。
3

circle

将标记设置为空心圆圈。

圆点标记

以下示例展示了 HTML 中带有圆点标记的无序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML Unordered List</title>
</head>
<body>
   <p>An unordered list with default disc marker:</p>
   <ul type="disc">
      <li>Apple</li>
      <li>Guava</li>
      <li>Carrot</li>
      <li>Orange</li>
   </ul>
</body>
</html>

方形标记

以下示例展示了 HTML 中带有方形标记的无序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML Unordered List</title>
</head>
<body>
   <p>An unordered list with square marker:</p>
   <ul type="square">
      <li>Nuts</li>
      <li>Oats</li>
      <li>Eggs</li>
      <li>Dates</li>
   </ul>
</body>
</html>

圆圈标记

以下示例展示了 HTML 中带有空心圆圈标记的无序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML Unordered List</title>
</head>
<body>
   <p>An unordered list with hollow circle marker:</p>
   <ul type="circle">
      <li>Rice</li>
      <li>Pulses</li>
      <li>Flour</li>
      <li>Beans</li>
   </ul>
</body>
</html>

上述示例显示了三个无序列表，分别带有默认圆点项目符号、方形和空心圆形项目符号。

无项目符号的无序列表

您也可以显示无序列表的列表项而不显示项目符号。要显示无项目符号的无序列表，请将 "none" 定义到 list-style-type 属性。

语法

以下是在 HTML 中创建无项目符号无序列表的语法：

<ul style="list-style-type: none">
   <li>Item in list...</li>
   <li>Item in list...</li>
   <li>Item in list...</li>
</ul>

示例

以下是在 HTML 中创建无项目符号无序列表的示例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <ul style="list-style-type: none">
      <li>Abdul</li>
      <li>Jason</li>
      <li>Yadav</li>
   </ul>
</body>
</html>

上述程序创建了一个包含元素 Abdul、Jason 和 Yadav 的无项目符号无序列表。

样式化无序 HTML 列表

使用 CSS 样式化无序列表 (<ul>) 可以自定义列表的外观，包括修改项目符号、间距和整体设计。

示例

以下是程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Styled Unordered List</title>
   <style>
      ul {
         list-style-type: square;
         /* 自定义项目符号类型 */
         padding: 0;
         /* 移除默认内边距 */
      }
      li {
         margin-bottom: 8px;
         /* 为列表项添加间距 */
         background-color: #f0f0f0;
         /* 背景颜色 */
         border: 1px solid #ccc;
         /* 边框 */
         padding: 8px;
         /* 每个列表项内部的内边距 */
         transition: background-color 0.3s;
         /* 平滑过渡效果 */
      }
      li:hover {
         background-color: #e0e0e0;
         /* 悬停时更改背景 */
      }
   </style>
</head>
<body>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ul>
</body>
</html>

上述程序使用方形项目符号样式化了一个无序列表。每个列表项具有背景颜色、边框和内边距，营造出独特的卡片式外观。列表项之间通过外边距分隔，悬停在项目上时会触发平滑的背景颜色过渡。

嵌套无序列表

HTML 允许嵌套列表；您可以创建嵌套的无序列表，在外部列表元素的项目内部显示项目列表。

示例

以下示例演示了嵌套无序列表的使用：

<!DOCTYPE html>
<html>
<head>
  <title>Nested Unordered Lists</title>
</head>
<body>
<h2>Example of Nested Unordered Lists</h2>
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
  <li>Dairy
    <ul>
      <li>Milk</li>
      <li>Cheese</li>
      <li>Yogurt</li>
    </ul>
  </li>
</ul>
</body>
</html>