HTML 列表样式

• 列表是一种以格式化方式放置数据的常见要求，比如如果你制作了一个网页，需要显示酒店的披萨菜单的内容，那么很可能它是一个 HTML 列表样式，以清晰且离散的方式出现。
• 其他情况可能是您有一组学生在班级中表现最好；在这种情况下，要求将排名第一的学生按照排名升序排列在顶部，而其他学生则在其下方，因此我们需要将其格式化为排序列表。
• 另一种类型可以是自定义列表，您可以使用 Javascript 和 Html 一起制作，其中也可以设置对象的动态，并且列表可以采用一些自定义的外观。

HTML 中的不同列表样式

下面是各种 HTML 列表样式的解释。

1) 无序列表

这里内容的显示顺序不是我们需要关心的；只是我们需要将这些东西放置好，这样 HTML 页面就可以将它们以格式良好且清晰的方式放置在用户面前。

HTML 语言中有两个标签可以处理这些列表，并且您可能只使用这些标签即可制作导航栏和垂直侧边栏。

1. ：表示无序列表；每当我们不需要对任何内容进行排名或希望将其按随机顺序放置时，都会合并此标签。
3. ：这代表列表项，即要放置在无序列表中的项目集，即在
   下。标签出现在
   • 内标签。标有这些标记的项目将自动在开头带有一些项目符号或圆圈；这些是基本的 HTML 功能。

现在让我们看一段

的代码
• 和
• 基于无序列表以及 HTML 页面的外观；执行该文件后，请注意，您可以在记事本等编辑器中编写内容，并以“.html”扩展名保存文件；因此它可以用任何浏览器打开。

  示例片段 –

  代码：

   HTML Lists 
  
  <h2> list of pizzas <h2>
  <ul>
  <li style="color:red"> farmhouse </li>
  <li style="color:green"> peppy paneer </li>
  <li style="color:blue"> onion pizza </li>
  </ul>
  
  </h2>
  </h2>

  输出：

  

  2) 有序列表

  现在将看到一种情况，我们希望根据学生在课堂上的排名以有序的方式排列学生，这将通过使用

  以排序的方式显示。 HTML 的标签，它会包含多个
  1. 。标签，其中将包含列表项。
     ：这个标签用来建立一个有序列表，所有元素都放在里面，在
     1. 内。标签。
     2. 标签已在上面进行了解释。

        对于这种情况，我们也看一个示例，您需要像上面一样保存它。

        代码：

         HTML Lists 
        
        <h2> list of students <h2>
        <ol>
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        </ol>
        
        </h2>
        </h2>

        输出/ HTML 页面

        

        现在让我们看看这些的一些变体，我们可以通过在 HTML 页面中添加一些 CSS 属性来自定义或很好地格式化这些列表，这将使页面的外观看起来更好。

        1. 在无序列表中，我们可以给出以下属性 -
        2. List-style-type – 可以是圆盘、圆形、方形或无。因此，如果我们在这里选择“无”，则您在无序列表项中看到的圆圈将不会出现，让我们这样做。

        示例 –

        代码：

         HTML Lists 
        
        <h2> list of students <h2>
        <ul style="list-style-type:none">
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        </ul>
        
        </h2>
        </h2>

        输出/ HTML 页面 –

        

        所以，圆形子弹不再存在；您可以使用上面提供的选项自定义它们。

        同样，还有一个选项可以选择订单列表值是否在订单列表中显示为数字、罗马字符或字母。

        可以在

        中设置属性类型标签相同，类型可以采用以下值。

        类型：“1”、“A”、“a”、“I”、“i”

        让我们看看相同的示例代码 –

        代码：

         HTML Lists 
        
        <h2> list of students <h2>
        <ol type="i">
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        </ol>
        
        </h2>
        </h2>

        输出/ HTML 页面 –

        

        类似地，我们也有描述列表，我们可以在其中定义需要放置描述的项目；假设您正在制作一个页面，需要对某些关键字进行一些定义，然后您可以选择描述列表。

        标签

        我们有以下标签来处理相同的问题。

         

        – 该标签定义描述列表
        – 此标签将给出描述术语
        – this tag carries the description of each term

        Example –

        Code:

         HTML Lists 
        
        <h2> list of students <h2>
        <dl>
        <dt style="color:red"> Docker </dt>
        <dd> -: this is used to make environment portable application containers </dd>
        <br>
        <dt style="color:green"> Kubernetes </dt>
        <dd> -: this is an orchestrator for those containers make by docker </dd>
        </dl>
        
        </h2>
        </h2>

        Output/HTML page –

        

        You can also define the start property in the ordered lists in

        tag, which tells from where the count starts. Let’s see an example of the same –

        Code:

         HTML Lists 
        
        <h2> list of students <h2>
        <ol type="1" start="10">
        <li style="color:red"> John </li>
        <li style="color:green"> Harris </li>
        <li style="color:blue"> Plunket </li>
        >
        
        </ol>
        </h2>
        </h2>

        Output:

        

        Conclusion

        So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.

以上是HTML 列表样式的详细内容。更多信息请关注PHP中文网其他相关文章！