首页 > Web开发 > 详细

HTML5列表

时间:2016-05-09 07:13:50      阅读:292      评论:0      收藏: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>

HTML5列表

原文:http://11317783.blog.51cto.com/11307783/1771299

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!