HTML - 无序列表

原创

admin 4个月前 (08-07) 阅读数 21 #HTML

HTML - 无序列表

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

无序列表的基本概念

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

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

创建无序列表

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

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>HTML无序列表</title>
</head>
<body>
   <ul>
      <li>甜菜根</li>
      <li>生姜</li>
      <li>土豆</li>
      <li>萝卜</li>
   </ul>
</body>
</html>

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

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

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

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

序号

值和描述

disc

这是默认的标记类型。

square

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

circle

它将标记设置为空心圆。

圆点标记

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

<!DOCTYPE html>
<html>
<head>
   <title>HTML无序列表</title>
</head>
<body>
   <p>带有默认圆点标记的无序列表：</p>
   <ul type="disc">
      <li>苹果</li>
      <li>番石榴</li>
      <li>胡萝卜</li>
      <li>橙子</li>
   </ul>
</body>
</html>

方形标记

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

<!DOCTYPE html>
<html>
<head>
   <title>HTML无序列表</title>
</head>
<body>
   <p>带有方形标记的无序列表：</p>
   <ul type="square">
      <li>坚果</li>
      <li>燕麦</li>
      <li>鸡蛋</li>
      <li>枣子</li>
   </ul>
</body>
</html>

圆形标记

以下示例说明了HTML中带有圆形标记的无序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML无序列表</title>
</head>
<body>
   <p>带有空心圆形标记的无序列表：</p>
   <ul type="circle">
      <li>米饭</li>
      <li>豆类</li>
      <li>面粉</li>
      <li>豆子</li>
   </ul>
</body>
</html>

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

不带项目符号的无序列表

您还可以在不显示项目符号的情况下显示无序列表的列表项。要显示不带项目符号的无序列表，将list-style-type属性设置为none。

语法

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

<ul style="list-style-type: none">
   <li>列表中的项目...</li>
   <li>列表中的项目...</li>
   <li>列表中的项目...</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>阿卜杜勒</li>
      <li>杰森</li>
      <li>亚达夫</li>
   </ul>
</body>
</html>

上面的程序创建了一个包含阿卜杜勒、杰森和亚达夫元素的无序列表，没有项目符号。

样式化无序列表

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

示例

以下是程序示例：

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>样式化无序列表</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>项目 1</li>
      <li>项目 2</li>
      <li>项目 3</li>
   </ul>
</body>
</html>

上面的程序使用方形项目符号样式化无序列表。每个列表项都有背景颜色、边框和填充，创建出类似卡片的外观。项目之间由边距分隔，将鼠标悬停在项目上会触发平滑的背景颜色过渡。

嵌套无序列表

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

示例

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

<!DOCTYPE html>
<html>
<head>
  <title>嵌套无序列表</title>
</head>
<body>
<h2>嵌套无序列表示例</h2>
<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>西兰花</li>
      <li>菠菜</li>
    </ul>
  </li>
  <li>乳制品
    <ul>
      <li>牛奶</li>
      <li>奶酪</li>
      <li>酸奶</li>
    </ul>
  </li>
</ul>
</body>
</html>