html-列表标签

列表标签

　　比如现在显示这样的效果
　　山水集团
　　　　财务部
　　　　学工部
　　　　人事部

　　<dl></dl> ： 表示列表的范围
　　　　在dl里面 <dt></dt>：上层内容（没有缩进）
　　　　在dl里面 <dd></dd>: 下层内容（有缩进）

　　　　代码：

<dl>
    <dt>山水集团</dt>
    <dd>财务部</dd>
    <dd>学工部</dd>
    <dd>人事部</dd>
</dl>

　　想要在页面上显示这样的内容（有序列表）
　　　　1.财务部
　　　　2.学工部
　　　　3.人事部

　　　　a.财务部
　　　　b.学工部
　　　　c.人事部

　　　　i.财务部
　　　　ii.学工部
　　　　iii.人事部

　　　　<ol></ol> ： 有序列表的范围
　　　　属性 type : 设置排序的方式 1(默认) a i
　　　　在ol标签里面 <li>具体内容</li>

　　　　代码：

<ol type="a">
　　<li>财务部</li>
　　<li>学工部</li>
　　<li>人事部</li>
</ol>

　　想要在页面上显示这样的效果（无序列表）
　　　　特殊符号（方框） 财务部
　　　　特殊符号（方框） 人事部

　　<ul></ul>：表示无序列表的范围
　　　　属性： type：空心圆（circle）、实心圆（disc）、实心方块（Square）、默认是disc
　　　　在ul里面 <li></li>

　　　　代码

<ul type="square">
    <li>财务部</li>
    <li>学工部</li>
    <li>人事部</li>
</ul>

　　完整代码：

<html>
    <head>
        <title>World</title>
    </head>
    <body>
        <!--  演示列表标签  -->
        <dl>
            <dt>山水集团</dt>
            <dd>财务部</dd>
            <dd>学工部</dd>
            <dd>人事部</dd>
        </dl>
        <hr/>
        <!-- 有序列表 -->
        <ol type="a">
            <li>财务部</li>
            <li>学工部</li>
            <li>人事部</li>
        </ol>    
        <hr/>
        <!--无序列表-->
        <ul type="square">
            <li>财务部</li>
            <li>学工部</li>
            <li>人事部</li>
        </ul>
    </body>

</html>

 

posted @ 2018-10-31 09:31  栗子壳  阅读(221)  评论(0)  编辑  收藏  举报