【网页前端设计HTML】列表

最新推荐文章于 2024-10-16 10:27:58 发布

5 12霞

最新推荐文章于 2024-10-16 10:27:58 发布

阅读量1.2k

点赞数 34

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_53597021/article/details/140407587

版权

一、列表的简介

⭐网页中的列表
列表是网页中最常用的一种数据排列方式，我们在浏览网页时，会到看到各种列表的身影，如下图所示。
在这里插入图片描述
在HTML中，列表共有3种：有序列表、无序列表和定义列表。
在有序列表中，列表项之间有先后顺序之分。
在无序列表中，列表项之间是没有先后顺序之分的。
定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。

二、有序列表

⭐什么是有序列表？
有序有序，顾名思义，各个列表项是有顺序的。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。
语法：

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

⭐说明：ol，即ordered list（有序列表）；li，即list（列表项）；
在该语法中，<ol>和</ol>标志着有序列表的开始和结束，而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。有序列表从<ol>开始，到</ol>结束。
⭐注意，ol标签和li标签是配合一起使用，不可以单独使用，而且<ol>标签的子标签只能是li标签，不能是其他标签。
举个例子：
在这里插入图片描述
代码如下：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>有序列表</title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

分析：在这段代码当中，我们没有定义它的列表符号，但是它会使用数字排序，说明默认情况下是使用数字排序的，并且排序是从低到高依次排序，有几个列表项就会排到几。
🤔疑问1：我能不能不适用数字排序，有些是用英文字母排序的，这要怎么设置呢？
这就需要用到列表当中一个属性：type属性
⭐type属性
在HTML中，我们可以使用type属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。
语法：

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

在有序列表中，type属性取值如下表所示。

属性值	列表项符号
1	阿拉伯数字：1、2、3……（默认值）
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……