微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML5基础09----HTML5列表的使用

<!DOCTYPE html>
<!--HTML5列表的使用--> <html>
<head lang="zh">
    <Meta charset="UTF-8">
    <title>这是一个列表</title>
</head>
<body>
<!--无序列表 disc实体圆,效果--> <ul type="disc">
    <li>苹果</li>
    <li>苹果</li>
    <li>苹果</li>
</ul>
<!--无序列表 空心圆--> <ul type="circle">
    <li>苹果</li>
    <li>苹果</li>
    <li>苹果</li>
</ul>
<!--无序列表 方块--> <ul type="square">
    <li>苹果</li>
    <li>苹果</li>
    <li>苹果</li>
</ul>

<!--有序列表1表示123...显示认--> <ol type="1">
    <li>苹果</li>
    <li>香蕉</li>
    <li>苹果</li>
</ol>
<!--有序列表start="10"表示从10开始...--> <ol start="10">
    <li>苹果</li>
    <li>香蕉</li>
    <li>苹果</li>
</ol>
<!--有序列表A表示ABC...显示--> <ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>苹果</li>
</ol>
<!--有序列表a表示abc...显示--> <ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>苹果</li>
</ol>
<!--有序列表i表示i,ii,iii...显示--> <ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>苹果</li>
</ol>
<!--有序列表I表示I,II,III...显示--> <ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>苹果</li>
</ol>


<!--无序列表的嵌套--> <ul type="square">
    <li>四大名著</li>
    <ul>
        <li>水浒传</li>
        <li>红楼梦</li>
        <li>西游记</li>
    </ul>
    <li>水果</li>
    <ul>
        <li>香蕉</li>
        <li>橘子</li>
        <li>橙子</li>
    </ul>
    <li>人类</li>
</ul>
<!--有序列表的嵌套--> <ol type="square">
    <li>四大名著</li>
    <ol>
        <li>水浒传</li>
        <li>红楼梦</li>
        <li>西游记</li>
    </ol>
    <li>水果</li>
    <ol>
        <li>香蕉</li>
        <li>橘子</li>
        <li>橙子</li>
    </ol>
    <li>人类</li>
</ol>
<!--自定义列表--> <dl>
    <dt>水果</dt>
        <dd>水果种类多</dd>
    <dt>水果</dt>
        <dd>水果种类多</dd>
    <dt>水果</dt>
        <dd>水果种类多</dd>
</dl>


</body>

</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。