将元素列表直接保存在 HTML 文件中的方法是什么？

在本文中，我们将讨论将元素列表直接保存在 HTML 文件中的各种方法。一般来说，浏览器中适当的缩进内容可以使内容井井有条，结构合理，提高整体可读性，同时增加网站的交互性。这可以通过使用 HTML 语义元素来实现。

语义元素向开发人员和机器可读的方式解释了一段代码的含义。 HTML 列表允许内容遵循适当的语义结构。列表对于用户的视觉体验很重要，这样他们可以以适当的流程阅读内容，而不是混乱的文本或段落。它允许以项目符号点或编号列表的形式将相关的元素组合在一起。 HTML中有两种类型的列表，即无序列表和有序列表。

无序列表：默认情况下，它由代表项目列表的小黑色项目符号组成。列表以

标签开头 并包含以
• 标签开头的项目列表。

  句法：

  
      
  List Items
  

  有序列表：默认情况下，有序列表由编号列表组成。该列表以

  标记开头，并包含以
  1. 标记开头的项目列表。

     句法：

     
         
     List Items
     

     示例：此示例说明了无序列表和有序列表以在浏览器中缩进列表中的内容。

     HTML

     
     
      
     
         
     
      
     
         
     Unordered list 
         
     
             
     DSA
             
     Algorithm
             
     Web Tech
         
         
     Creating an Ordered list 
         
     
             
     Placement Courses
             
     Online Self-pace Course
             
     Offline-Classes
         
     
      
     

     
     
     
     
     

     输出：

     

     HTML 列表类型

     我们已经学会了创建这两种类型的列表。现在，我们将了解列表的缩进、它们的重要性以及在 HTML 文档中保持元素列表直接的各种方法。

     列表缩进：

     缩进是一种格式化技术，有助于在网页上以适当的结构组织和表示内容。这有助于增加网页的交互性，同时增强用户体验，不仅有助于提高可读性，还有助于提高页面的排名，从而达到最大用户数。

     正确缩进列表的重要性：

     • 缩进有助于读者清楚地理解上下文的流动。
     • 当它们组合在一起时，它为相似的元素提供了意义。
     • 它允许区分父项和子项/子项（如果有）。
     • 寻找不同浏览器显示之间的一致性。

     将项目列表保持在一条直线上的方法：

     默认情况下，列表会自动缩进，并且根据显示首选项保持列表对齐很重要。为了使列表项保持直线，有一些 CSS 属性不仅用于缩进内容，还用于通过提供可定制选项来设置列表样式，如下所示：

     • 文本缩进属性
     • margin-left & padding-left 属性
     • 显示属性
     • 列表样式类型属性

     还有其他几种方法可以完成此任务，但我们将在本文中讨论上述 4 个 CSS 属性。

     text-indent属性：该属性用于定义每个文本块中第一行的缩进。它也接受负值。这意味着如果值为负，则第一行将向左缩进。

     句法：

     text-indent: length;

     示例：此示例描述了使用 text-indent 属性缩进列表的各种方法。

     HTML

     
     
      
     
         
         
     
      
     
         
     text-indent: 50px:
         
     
             
     
                 The Best Data Structure and Algorithm Course
                 Available Online From Skilled mentors at GFG.
             
             
     
                 The course focuses on various MCQ's &
                 Coding question likely to be asked in
                 the interviews & make your upcoming
                 placement season efficient and
                 successful.
             
         
         
     text-indent: 5em:
         
     
             
     
                 The Best Data Structure and Algorithm Course
                 Available Online From Skilled mentors at GFG.
             
             
     
                 The course focuses on various MCQ's &
                 Coding question likely to be asked in
                 the interviews & make your upcoming
                 placement season efficient and
                 successful.
             
         
         
     text-indent: 30%:
         
     
             
     
                 The Best Data Structure and Algorithm Course
                 Available Online From Skilled mentors at GFG.
             
             
     
                 The course focuses on various MCQ's &
                 Coding question likely to be asked in
                 the interviews & make your upcoming
                 placement season efficient and
                 successful.
             
         
     
      
     
     

     输出：

     

     使用 text-indent 属性缩进列表

     margin-left属性：用于从块外增加或减少列表周围的边距。例如，您希望在块周围提供一个边距，您可以使用此属性。可以在px中定义属性值；作为静态测量， 根据所需的缩进提及值。

     padding-left属性：用于从块内部增加或减少填充。例如，您希望增加或减少块的内部空间即填充，您可以通过在em 中定义属性值来使用该属性；作为相对测量，根据所需的压痕提及值。  

     句法：

     示例：在此示例中，我们制作了四个列表。第一个列表没有缩进，或者我们可以说默认缩进，第二个列表使用margin-left 属性进行缩进，提供一个正值将列表向右推，第三个列表使用margin-left 属性进行缩进，提供将列表推向左侧的负值，第四个列表使用padding-left 属性缩进。

     HTML

     
     
      
     
           
         
     
      
     
         
     
             List without Indent
         
         
     
             
     Item1
             
     Item2
             
     Item3
         
         
     
             List with Indent using margin-left[+ve]
         
         
     
             
     Item1
             
     Item2
             
     Item3
         
         
     
             List with Indent using margin-left[-ve]
         
         
     
             
     Item1
             
     Item2
             
     Item3
         
         
     
             List with Indent using padding-left
         
         
     
             
     Item1
             
     Item2
             
     Item3
         
     
      
     
     

     输出：

     

     HTML 列表的缩进

     list-style-type属性：如果需要，它用于删除列表的类型。使用此属性删除列表项前面的项目符号或编号。

     句法：

     li {
         list-style-type: none;
     }

     显示属性：它 用于将列表项对齐在形成元素块的单行中。但是，您可以在列表项周围添加边距和填充以获得更好的视图。

     句法：

     li {
         display: inline-block;
     }

     示例：在此示例中，我们在正文中创建了一个无序列表，并通过为无序列表提供类来在头部内部设置相同的列表样式。

     HTML

     
     
      
     
         
         
     
      
     
         
     
              List items in a Straight Line
         
         
     
             
     DSA
             
     Web Tech
             
     Algorithm
         
     
      
     
     

     输出：

     

     直线中的 HTML 列表项