下面是各种 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> <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 属性来自定义或很好地格式化这些列表，这将使页面的外观看起来更好。
示例 –
代码：
<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
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:
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中文网其他相关文章！
