列表 [HTML][web前端]

列表(List)

在HTML中可以创建列表,html中列表一共有3种:

1. 有序列表
2. 无序列表
3. 定义列表

有序列表:

使用ol标签来创建一个有序列表,使用li标签作为列表项

• li标签是ol标签的一个子标签

eg:

1. 结构
2. 表现
3. 行为

• 如上就是一个有序列表
• 我们用代码实现如下:

<!-- 创建一个有序列表 -->
<ol>
    <li>
        结构
    </li>
    <li>
        表现
    </li>
    <li>
        行为
    </li>
</ol>

无序列表:

使用ul标签创建无序列表, 也是使用li作为列表项

• li标签是ul标签的子标签

eg:

• 结构
• 表现
• 行为

如上就是一个无序列表

具体的代码实现如下:

<!-- 创建一个无序列表 -->
<ul>
    <li>
        结构
    </li>
    <li>
        表现
    </li>
    <li>
        行为
    </li>
</ul>

定义列表:

使用dl标签来创建一个定义列表

• 使用dt标签来定义内容
• 使用dd标签来对内容进行解释说明

eg:

结构

​ 结构就是用来…

• 上面就是一个定义列表
• 上面的"结构"就是dt标签来定义的内容
• 上面的"结构就是用来…"就是dd标签中指定的对内容的解释说明

具体的代码实现如下:

<!-- 创建一个定义列表 -->
<dl>
    <dt>
        结构
    </dt>
    <dd>
        结构就是用来...
    </dd>
</dl>

列表可以嵌套使用

• 我们的有序列表和无序列表和定义列表之间可以进行相互的嵌套使用

补充:

我们的有序列表中我们可以在通过给ol标签中的type属性选择值就可以修改有序列表的前缀

• 前缀默认是1,2,3,4, 但是我们可以设置为:a,b,c,d等等