HTML5列表

发布时间:2020-07-22 21:07:51 作者:yeleven
来源:网络 阅读:257

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>
推荐阅读:
  1. 常用的HTML5列表标签有哪些
  2. 移动端html5列表怎么弄

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

列表 html

上一篇:django-关于JSON编码格式的异常处理

下一篇:大话架构师之NOSQL和缓存

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》