HTML标签_列表标签介绍及其使用

最新推荐文章于 2022-11-26 10:25:04 发布

NewBurlaSKing

最新推荐文章于 2022-11-26 10:25:04 发布

阅读量218

点赞数

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

本文链接：https://blog.csdn.net/qq_55961861/article/details/126196477

版权

HTML学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一.有序列表

有序列表是一列项目，列表项目使用数字进行标记。

有序列表从<ol>标签开始,每个列表从<li>标签开始。

type属性

<ol>的属性type 拥有的选项

1 表示列表项目用数字标号（1,2,3...）

a 表示列表项目用小写字母标号（a,b,c...）

A 表示列表项目用大写字母标号（A,B,C...）

i 表示列表项目用小写罗马数字标号（i,ii,iii...）

I 表示列表项目用大写罗马数字标号（I,II,III...）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="1">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ol>
    <ol type="a">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ol>
    <ol type="A">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ol>
    <ol type="i">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ol>
    <ol type="I">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ol>
</body>
</html>

有序列表可以嵌套！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="1">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ol>
    <ol type="1">
        <li>水果</li>
        <ol type="1">
            <li>西瓜</li>
            <li>菠萝</li>
            <li>草莓</li>
        </ol>
        <li>蔬菜</li>
        <li>肉类</li>
    </ol>
</body>
</html>

二.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记.

无序列表始于<ul>标签,每个列表始于<li>标签.

type属性

<ul>的属性type 拥有的选项

disc 默认实心圆

circle 空心圆

square 小方块

none 不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ul>
    <ul type="disc">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ul>
    <ul type="circle">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ul>
    <ul type="square">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ul>
    <ul type="none">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ul>
    
</body>
</html>

无序列表嵌套

列表是可以进行嵌套的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>水果</li>
        <ul>
            <li>西瓜</li>
            <li>菠萝</li>
            <li>草莓</li>
        </ul>
        <li>蔬菜</li>
        <li>肉类</li>
    </ul>
</body>
</html>