HTML学习之html列表介绍（代码实例）

一，效果图。

二，代码。

!DOCTYPE html>
    html>
    head>
        meta charset="utf-8">
        tITle>
    html 列表/title>
    /head>
    body>
        !--无序列表-->
        h4>
    An Unordered list/h4>
        ul>
            li>
    Cofferr/li>
            li>
    tea/li>
            li>
    Mide/li>
        /ul>
        !--有序列表-->
        ol start="50">
            li>
    Cooffee/li>
            li>
    Tea/li>
            li>
    Mike/li>
        /ol>
        !--自定义列表-->
        dl>
            dt>
    Coffer/dt>
            dd>
    --black hot drink/dd>
            dt>
    mike/dt>
            dd>
    --white cold drink/dd>
        /dl>
        !--不同类型的有序列表-->
        h4>
    Numbered list:/h4>
        ol>
            li>
    apples/li>
            li>
    bananas/li>
            li>
    lemons/li>
            li>
    orange/li>
        /ol>
        h4>
    letters list:/h4>
        ol type="A">
            li>
    apples/li>
            li>
    bananas/li>
            li>
    lemons/li>
            li>
    orange/li>
        /ol>
        h4>
    Lowercase  letters list:/h4>
        ol type="a">
            li>
    apples/li>
            li>
    bananas/li>
            li>
    lemons/li>
            li>
    orange/li>
        /ol>
        h4>
    roman numbers list:/h4>
        ol type="I">
            li>
    apples/li>
            li>
    bananas/li>
            li>
    lemons/li>
            li>
    orange/li>
        /ol>
        h4>
    lowercase Roman numbers list:/h4>
        ol type="i">
            li>
    apples/li>
            li>
    bananas/li>
            li>
    lemons/li>
            li>
    orange/li>
        /ol>
        !--不同类型的无序列表-->
        p>
    b>
    Note:/b>
     The type attribute of the ul tag is dePRecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:/p>
        h4>
    disc bullets list:/h4>
        ul style="list-style-type:disc">
            li>
    Apples/li>
            li>
    bananas/li>
            li>
    lemons/li>
            li>
    orange/li>
        /ul>
        h4>
    circle bullets list:/h4>
        ul style="list-style-type:circle">
            li>
    Apples/li>
            li>
    bananas/li>
            li>
    lemons/li>
            li>
    orange/li>
        /ul>
        h4>
    square bullets list:/h4>
        ul style="list-style-type:square">
            li>
    Apples/li>
            li>
    bananas/li>
            li>
    lemons/li>
            li>
    orange/li>
        /ul>
        !--嵌套列表-->
        h4>
    A list inside a list:/h4>
        ul>
            li>
    Coffee/li>
            li>
    Tea/li>
            ul>
                li>
    black tea/li>
                li>
    green tea/li>
            /ul>
            li>
    Mike/li>
        /ul>
        !--嵌套列表2-->
        h4>
    lists inside a list/h4>
        ul>
            li>
    coffee/li>
            li>
    tea            ul>
                    li>
    black tea/li>
                    li>
    green tea                    ul>
                            li>
    china/li>
                            li>
    africa/li>
                        /ul>
                    /li>
                /ul>
            /li>
            li>
    mick/li>
        /ul>
        !--自定义列表-->
        h4>
    A definition List/h4>
        dl>
            dt>
    coffee/dt>
            dd>
    -black hot drink/dd>
            dt>
    mike/dt>
            dd>
    -white cold drink/dd>
    /body>
    /html>
    

参考资料：《菜鸟教程》

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 HTML视频教程，HTML5视频教程，bootstrap视频教程！

以上就是HTML学习之html列表介绍（代码实例）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！