首页　>　文章列表　>　如何在HTML中创建无序列表

如何在HTML中创建无序列表

HTML无序列表创建无序列表 HTML列表编程
489 2023-09-12

概述

通过使用HTML，我们可以为网页创建两种类型的列表：有序列表和无序列表。无序列表是使用HTML的<ul>标签创建的列表，并在其中插入列表项。使用<li>标签插入列表项。因此，当使用li标签创建无序列表时，其中一些li标签中的数据会形成一个带有点或符号的列表。这些符号只能是圆圈、方块或实心圆。

语法

创建无序列表的语法是 −

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

算法

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

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

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

第四步 − 现在在无序列表中插入一个列表标签<li>。

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

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

Example

的中文翻译为：

示例

在这个例子中，我们使用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 容器来制作无序列表。

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

第四步 − 现在在无序列表中插入一个列表标签<li>。

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

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

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

Example

的中文翻译为：

示例

在这个例子中，我们创建了一个无序列表，其中包含不同类型的列表样式。有不同类型的列表样式，如圆圈、实心圆点、小写罗马数字、亚美尼亚、以零开头的十进制等等。

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

下面的图片显示了上面示例的输出，显示了四个不同的列表。这四个无序列表具有不同的列表样式。第一个无序列表的项目符号样式为亚美尼亚样式，第二个无序列表的样式为小写希腊字母样式，第三个无序列表的样式为带前导零的十进制样式，第四个无序列表的样式为小写罗马字母样式。