【代码笔记】HTML-列表

2018-10-19 06:13:19来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一,效果图。

 

 

 

 

 

二,代码。

 

复制代码
<!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>
复制代码

 

参考资料:《菜鸟教程》

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS命名规范(规则)常用的CSS命名规则

下一篇:css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器