如何在 HTML 中创建无序列表

htmlweb developmentfront end technology更新于 2024/6/16 15:40:17

概述

使用 HTML，我们可以为网页创建两种类型的列表:有序列表和无序列表。无序列表使用 HTML <ul> 标签创建，列表项插入其中。列表项使用 <li> 标签插入。因此，当使用 li 标签创建无序列表时，数据会包含在一些 li 标签中。创建的列表后会跟一些点或项目符号。这些项目符号只能是圆形、方形或圆盘形。

语法

创建无序列表的语法是 -

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

算法

步骤 1 − 在文本编辑器中创建一个 HTML 文件，并在其中创建一个 HTML 样板。

步骤 2 − 创建一个 div 容器来创建无序列表。

步骤 3 − 使用 <ul>标签来创建无序列表。

步骤 4 − 现在插入一个列表标签作为 <li>位于无序列表中。

步骤 5 − 如果要向无序列表添加更多列表，请重复步骤 4。

步骤 6 − 无序列表已成功创建。

示例

在此示例中，我们使用 HTML <ul> 标签创建了一个无序列表，并使用 <li> 标签插入了列表项。列表的项目符号将默认创建。

<html>
<head>
   <title>unordered list in HTML</title>
</head>
<body>
   <h3>Number of items in a todo's list</h3>
   <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
   </ul>
</body>
</html>

下图显示了上述示例的输出，该示例以列表形式显示了多个项目，其中包含默认的项目符号。

算法

步骤 1−在文本编辑器中创建一个 HTML 文件，并在其中创建一个 HTML 样板文件。

步骤 2−创建一个 div 容器来创建无序列表。

步骤3 − 使用 <ul> 标签创建无序列表。

步骤 4 − 现在插入一个列表标签作为 <li>位于无序列表中。

步骤 5 − 现在使用列表样式类型属性更改项目符号的样式。

步骤 6 − 如果要向无序列表添加更多列表，请重复步骤 4;如果要更改项目符号的列表样式，请使用步骤 5。

步骤 7 − 无序列表已成功创建。

示例

在此示例中，我们创建了一个包含不同类型列表样式的无序列表。这些列表样式包括圆形、圆盘形、小写罗马体、亚美尼亚体、小数点后零等等。

<html>
<head>
   <title>unordered list in HTML list styles</title>
</head>
<body>
   <h1>tutorialspoint.com</h3>
   <h2>unordered lists</h3>
   <div style="display: flex;gap: 1rem;">
      <div style="border:1px solid black;padding: 0.5rem;">
         <h3>list style type armenian</h3>
         <ul style="list-style: armenian;">
               <li>List Item 1</li>
               <li>List Item 2</li>
               <li>List Item 3</li>
               <li>List Item 4</li>
               <li>List Item 5</li>
         </ul>
      </div>
      <div style="border:1px solid black;padding: 0.5rem;">
         <h3>list style type lower-greek</h3>
         <ul style="list-style:lower-greek;">
               <li>List Item 1</li>
               <li>List Item 2</li>
               <li>List Item 3</li>
               <li>List Item 4</li>
               <li>List Item 5</li>
         </ul>
      </div>
      <div style="border:1px solid black;padding: 0.5rem;">
         <h3>list style type deciaml leading zero</h3>
         <ul style="list-style:decimal-leading-zero;">
               <li>List Item 1</li>
               <li>List Item 2</li>
               <li>List Item 3</li>
               <li>List Item 4</li>
               <li>List Item 5</li>
         </ul>
      </div>
      <div style="border:1px solid black;padding: 0.5rem;">
         <h3>list style type lower roman</h3>
         <ul style="list-style:lower-roman;">
               <li>List Item 1</li>
               <li>List Item 2</li>
               <li>List Item 3</li>
               <li>List Item 4</li>
               <li>List Item 5</li>
         </ul>
      </div>
   </div>
</body>
</html>

下图展示了上述示例的输出，其中显示了四个不同的列表。这四个无序列表都具有不同的列表样式。第一个无序列表的项目符号样式为亚美尼亚文，第二个无序列表的项目符号样式为小写希腊文，第三个无序列表的项目符号样式为小写前导零，第四个无序列表的项目符号样式为小写罗马字。