HTML(4)无序列表-有序列表

2020-10-22

无序列表的三种样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表,网页提供了三种样式,第一种实心圆(默认),第二种空心圆,第三种实心方块 -->
    <!-- type=disc就是默认的实心圆 -->
    <ul type="disc">
        <li>实心圆1</li>
        <li>实心圆2</li>
        <li>实心圆3</li>
    </ul>
    <!-- type=circle就是空心圆 -->
    <ul type="circle">
        <li>空心圆1</li>
        <li>空心圆2</li>
        <li>空心圆3</li>
    </ul>
    <!-- type=square就是实心方块 -->
    <ul type="square">
        <li>实心方块1</li>
        <li>实心方块2</li>
        <li>实心方块3</li>
    </ul>
</body>
</html>

image.png

有序列表的五种样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 有序列表的五种类型:1.数字类型。1.小写字母排序。3.大写罗马字母排序。4.大写字母排序。5.小写罗马字母排序 -->
    <ol type="1">
        <li>数字类型1</li>
        <li>数字类型2</li>
        <li>数字类型3</li>
    </ol>
    <ol type="a">
        <li>小写字母1</li>
        <li>小写字母2</li>
        <li>小写字母3</li>
    </ol>
    <ol type="I">
        <li>大写罗马字母1</li>
        <li>大写罗马字母2</li>
        <li>大写罗马字母3</li>
    </ol>
    <ol type="A">
        <li>大写字母1</li>
        <li>大写字母2</li>
        <li>大写字母3</li>
    </ol>
    <ol type="i">
        <li>小写罗马字母1</li>
        <li>小写罗马字母2</li>
        <li>小写罗马字母3</li>
    </ol>
</body>
</html>

image.png


标题:HTML(4)无序列表-有序列表
作者:张范
地址:http://misterzhang.top/articles/2020/10/22/1603337072493.html