HTML 列表样式-html教程-PHP中文网

HTML 中的不同列表样式

1) 无序列表

2) 有序列表

标签

Conclusion

首页

web前端

html教程

HTML 列表样式

PHPz

Sep 04, 2024 pm 04:16 PM

html html5 HTML Tutorial HTML Properties HTML tags

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

HTML 中的不同列表样式

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

1) 无序列表

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

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

：这代表列表项，即要放置在无序列表中的项目集，即在
- 内标签。标有这些标记的项目将自动在开头带有一些项目符号或圆圈；这些是基本的 HTML 功能。

现在让我们看一段

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

代码：

<html>
<head> HTML Lists </head>
<body>
<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>
</body>
</html>

登录后复制

输出：

HTML 列表样式

2) 有序列表

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

。标签，其中将包含列表项。
1. 内。标签。
2. 标签已在上面进行了解释。
  对于这种情况，我们也看一个示例，您需要像上面一样保存它。
  
  代码：
```
<html>
<head> HTML Lists </head>
<body>
<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>
</body>
</html>
```
  登录后复制
  输出/ HTML 页面
  
  现在让我们看看这些的一些变体，我们可以通过在 HTML 页面中添加一些 CSS 属性来自定义或很好地格式化这些列表，这将使页面的外观看起来更好。
  1. 在无序列表中，我们可以给出以下属性 -
  2. List-style-type – 可以是圆盘、圆形、方形或无。因此，如果我们在这里选择“无”，则您在无序列表项中看到的圆圈将不会出现，让我们这样做。
  示例 –
  
  代码：
```
<html>
<head> HTML Lists </head>
<body>
<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>
</body>
</html>
```
  登录后复制
  输出/ HTML 页面 –
  
  所以，圆形子弹不再存在；您可以使用上面提供的选项自定义它们。
  
  同样，还有一个选项可以选择订单列表值是否在订单列表中显示为数字、罗马字符或字母。
  
  可以在
以上是HTML 列表样式的详细内容。更多信息请关注PHP中文网其他相关文章！