HTML - 无序列表

无序列表

无序列表用于显示一系列相关的项目，这些项目没有特定的顺序或序列。这种类型的列表用于描述特定的服务或产品，因为它不需要遵循任何顺序。下图显示了一个杂货的有序列表。

创建无序列表

要在 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>

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

无序列表 - type 属性

<ul>标签的type属性用于指定 HTML 中无序列表的项目符号类型。默认情况下，使用disc项目符号类型。但我们可以借助以下选项进行更改

序号	值和描述
1	disc 这是默认的标记类型。
2	square 列表项将以方形标记显示。
3	circle 它将标记设置为空心圆。

序号

值和描述

disc

这是默认的标记类型。

square

列表项将以方形标记显示。

circle

它将标记设置为空心圆。

示例

以下示例说明了 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>
   <p>An unordered list with square marker:</p>
   <ul type="square">
      <li>Nuts</li>
      <li>Oats</li>
      <li>Eggs</li>
      <li>Dates</li>
   </ul>
   <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>

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

没有项目符号的无序列表

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

语法

以下是创建没有项目符号的无序列表的语法

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

示例

下面是创建没有项目符号的无序列表的示例

<!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 元素的无序列表，没有项目符号。

样式化无序列表

使用 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;
         /* Custom bullet type */
         padding: 0;
         /* Removes default padding */
      }
      li {
         margin-bottom: 8px;
         /* Adds spacing between list items */
         background-color: #f0f0f0;
         /* Background color */
         border: 1px solid #ccc;
         /* Border */
         padding: 8px;
         /* Padding inside each list item */
         transition: background-color 0.3s;
         /* Smooth transition effect */
      }
      li:hover {
         background-color: #e0e0e0;
         /* Change background on hover */
      }
   </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>

打印页面