- 列表是一种以格式化方式放置数据的常见要求，比如如果你制作了一个网页，需要显示酒店的披萨菜单的内容，那么很可能它是一个 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>
登录后复制
输出：
2) 有序列表
现在将看到一种情况，我们希望根据学生在课堂上的排名以有序的方式排列学生，这将通过使用
以排序的方式显示。 HTML 的标签，它会包含多个 - 。标签，其中将包含列表项。
：这个标签用来建立一个有序列表，所有元素都放在里面，在- 内。标签。
- 标签已在上面进行了解释。
对于这种情况，我们也看一个示例，您需要像上面一样保存它。
代码：
<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 属性来自定义或很好地格式化这些列表，这将使页面的外观看起来更好。
- 在无序列表中，我们可以给出以下属性 -
- 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 页面 –
所以，圆形子弹不再存在；您可以使用上面提供的选项自定义它们。
同样，还有一个选项可以选择订单列表值是否在订单列表中显示为数字、罗马字符或字母。
可以在
中设置属性类型标签相同，类型可以采用以下值。
类型：“1”、“A”、“a”、“I”、“i”
让我们看看相同的示例代码 –
代码：
<html>
<head> HTML Lists </head>
<body>
<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>
</body>
</html>
登录后复制
输出/ HTML 页面 –
类似地，我们也有描述列表，我们可以在其中定义需要放置描述的项目；假设您正在制作一个页面，需要对某些关键字进行一些定义，然后您可以选择描述列表。
标签
我们有以下标签来处理相同的问题。
– 该标签定义描述列表
– 此标签将给出描述术语
– this tag carries the description of each term
Example –
Code:
<html>
<head> HTML Lists </head>
<body>
<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>
</body>
</html>
登录后复制
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>
<head> HTML Lists </head>
<body>
<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>
</>
</body>
</html>
登录后复制
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中文网其他相关文章！
