如何在 HTML 中实现各种类型的列表？

在本文中，我们将看到 HTML 列表及其类型以及它们的实现。列表可用于以项目符号形式或编号格式存储简短的信息，这在视觉上有助于一目了然。换句话说，它用于将相关项目或列表组合在一起，并用于构造和显示重要信息，其中每个列表项都显示在新行上。

HTML 列表允许内容遵循适当的语义结构。列表中的所有标签都需要开始和结束标签。 HTML中有3种类型的列表，即：

• 无序列表
• 有序列表
• 描述列表

我们将通过示例探索 HTML 中的所有 List 类型以及它们的实现。

无序列表：无序列表用于以项目符号或无序列表的格式创建相关项目的列表。它以

标记开始，然后是
• 标记以显示
  标记内的列表项。

  句法：

  
     
  Item1
     ...
  

  我们还可以使用不同的 CSS 属性来创建具有不同样式的列表。它可以具有以下值之一：

  • circle ：它给出了一个圆形列表项标记。
  • square ：将正方形作为列表项标记。
  • disc ：这是默认的填充圆形项目标记。
  • none ：用于取消标记列表项。

  示例 1：此示例描述了 HTML 中的无序列表。

  
  
  
  
  
  
  

  输出：

  

  无序列表

  示例 2：在此示例中，我们将创建一个带有方形列表项标记的无序列表。

  HTML

  
  
   
  
      
  
   
  
      
  GeeksforGeeks
      
  HTML Unordered List
      
  Coding Language
      
  
          
  C
          
  C++
          
  Core-Java
          
  Python
          
  Javascript
      
  
   
  
  

  输出：

  

  方型无序列表

  有序列表：有序列表具有数字或字母顺序。

  标签用于在 HTML 中创建有序列表，就像无序列表一样，我们使用
  1. 标签在
     标签内定义或显示列表。

     句法：

     
        
     Item1
        
     Item2
        
     Item3
     

     有序列表有一个类型运算符，它定义列表将具有的顺序类型，例如列表是以数字值还是字母值开头。下面给出了使用有序列表的各种方法：

     • type = “1” ：列表将从 1 开始。
     • type = “A” ：这里的列表将从 A 开始。
     • type = “a” ：这里的列表将从小写的 a 开始。
     • type = “I” ：列表将从罗马数字开始。
     • type = “i” ：TheList 将从小写罗马数字开始。

     示例 1：此示例描述了 HTML 中的有序列表。

     HTML

     
     
      
     
         
     
      
     
         
     GeeksforGeeks
         
     HTML Ordered List
         
     Coding Language
         
     
             
     C
             
     C++
             
     Core-Java
             
     Python
             
     Javascript
         
     
      
     
     

     输出：

     

     有序列表

     示例 2：在此示例中，我们将创建一个带有罗马数字的有序列表。

     HTML

     
     
      
     
         
     
      
     
         
     GeeksforGeeks
         
     HTML Ordered List
         
     Coding Language
         
     
             
     C
             
     C++
             
     Core-Java
             
     Python
             
     Javascript
         
     
      
     
     

     输出：

     

     罗马式有序列表

     有序列表有另一个名为“start”的属性，您可以在其中指定列表顺序的起点。

     • start ：用于指定列表项标记的起点。

     示例 3：在此示例中，我们将使用start属性创建具有不同起始编号的有序列表。

     HTML

     
     
      
     
         
     
      
     
         
     GeeksforGeeks
         
     HTML Ordered List
         
     Coding Language
         
     
             
     C
             
     C++
             
     Core-Java
             
     Python
             
     Javascript
         
     
      
     
     

     输出：

     

     具有起始属性的有序列表

     描述列表：描述列表是一种列表，其中每个项目都有描述。它也称为定义列表。

     标签用于创建描述列表，

     标签定义项目，

     标签描述列表中的每个项目。

     句法：

      Contents... 

     HTML 定义列表包含以下 3 个标签：

     • ：它定义了列表的开始。

     • ：它定义了一个项目。
     • :它定义了每个项目的描述。

     示例：此示例说明了 HTML 中的描述列表。

     HTML

     
     
      
     
         
     
      
     
         
     GeeksforGeeks
         
     Description List
         Developers Life
         
      
     Code
             
     - Code all day!
                 
     Eat
             
     - Eat healthy food
                 
     Sleep
             
     - Sleep soundly!
         
     
     
     

     输出：

     

     描述列表