HTML5列表

发布时间：2020-07-22 21:07:51 阅读：266 作者：yeleven 栏目：移动开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

HTML列表

<ol> 有序列表

<ul> 无序列表

<li> 列表项

---------------------

<dl> 列表

<dt> 列表项

<dd> 描述

1.无序列表

使用标签：<ul><li>

属性：disc、circle、square

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（默认方式--disc）实体的圆</title>
</head>
<body>
    <ul type="disc">
        <li>ios</li>
        <li>android</li>
        <li>html5</li>
        <li>swift</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（circle）空心圆</title>
</head>
<body>
    <ul type="circle">
        <li>ios</li>
        <li>android</li>
        <li>html5</li>
        <li>swift</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（square）实体方块</title>
</head>
<body>
    <ul type="square">
        <li>ios</li>
        <li>android</li>
        <li>html5</li>
        <li>swift</li>
    </ul>
</body>
</html>

2.有序列表

使用标签：<ol><li>

属性：A、a、I、i、start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（A）大写字母ABC……</title>
</head>
<body>
    <ol type="A">
        <li>ios</li>
        <li>android</li>
        <li>html5</li>
        <li>swift</li>
    </ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（a）小写字母abc……</title>
</head>
<body>
    <ol type="a">
        <li>ios</li>
        <li>android</li>
        <li>html5</li>
        <li>swift</li>
    </ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（I）I II III……</title>
</head>
<body>
    <ol type="I">
        <li>ios</li>
        <li>android</li>
        <li>html5</li>
        <li>swift</li>
    </ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（i）i ii iii……</title>
</head>
<body>
    <ol type="i">
        <li>ios</li>
        <li>android</li>
        <li>html5</li>
        <li>swift</li>
    </ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（属性改为start，从10开始）10 11 12……</title>
</head>
<body>
    <ol start="10">
        <li>ios</li>
        <li>android</li>
        <li>html5</li>
        <li>swift</li>
    </ol>
</body>
</html>

3.嵌套列表

使用标签：<ul><ol><li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序的嵌套列表</title>
</head>
<body>
    <ul>
        <li>宠物</li>
            <ul>
                <li>猫</li>
                <li>狗</li>
            </ul>
        <li>人类</li>
            <ul>
                <li>英国人</li>
                <li>中国人</li>
            </ul>
        <li>植物</li>
            <ul>
                 <li>吊兰</li>
                <li>牡丹</li>
             </ul>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序的嵌套列表</title>
</head>
<body>
    <ol>
        <li>宠物</li>
            <ol>
                <li>猫</li>
                <li>狗</li>
            </ol>
        <li>人类</li>
            <ol>
                <li>英国人</li>
                <li>中国人</li>
            </ol>
        <li>植物</li>
            <ol>
                 <li>吊兰</li>
                <li>牡丹</li>
             </ol>
    </ol>
</body>
</html>

4.自定义列表

使用标签：<dl><dt><dd>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>HelloWorld</dt>
            <dd>aaa</dd>
        <dt>HelloWorld</dt>
        <dd>aaa</dd>
        <dt>HelloWorld</dt>
        <dd>aaa</dd>
    </dl>
</body>
</html>

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

HTML5列表

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签