HTML基础——无序列表、有序列表、定义列表的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JEYMING/article/details/80286233

<!--
    列表
    无序列表、有序列表、定义列表
    2018.01.03
-->
<body>
    <head>
        <meta charset="UTF-8" />
        <title>列表的使用</title>
    </head>
    <body>
    <!--
    4.1 列表概述
        列表类型        标记符号
        -------------------------------
        无序列表        <ul></ul>
        菜单列表        <menu></menu>
        目录列表        <dir></dir>
        有序列表        <ol></ol>
        定义列表        <dl></dl>

    4.2 无序列表
        <ul type="">
            <li type=""></li>
            <li type=""></li>
            ……
        </ul>
        使用<li></li>标记来添加列表项值
        type属性
            值           说明
            ------------------------
            disc        实心圆形
            circle      空心圆形
            square      实心正方形
    -->
        <h2>无序列表</h2>
        <h4>DISC项目符号列表</h4>
        <ul type="dise">
            <li>计算机科学与技术</li>
            <li>软件工程</li>
            <li type="circle">信息系统与系统原理</li>
        </ul>
        <h4>circle项目符号列表</h4>
        <ul type="circle">
            <li>计算机科学与技术</li>
            <li>软件工程</li>
            <li type="square">信息管理与系统原理</li>
        </ul>
        <h4>Square项目符号列表</li>
        <ul type="square">
            <li>计算机科学与技术</li>
            <li>软件工程</li>
            <li type="disc">信息管理与系统原理</li>
        </ul>
        <br />
        <hr width="100%" size="50" color="#000" align="right" noshade />
        <br />
    <!--
    4.3 有序列表
        <ol type="" start="">
            <li type="" value=""></li>
            <li type="" value=""></li>
            ……
        </ol>
        type属性
            值       说明
            ------------------------
            1       定义有序列表中列表项的项目符号为数字列表
            A       定义有序列表中列表项的项目符号为大写字母列表
            a       定义有序列表中列表项的项目符号为小写字母列表
            I       定义有序列表中列表项的项目符号为大写罗马字母列表
            i       定义有序列表中列表项的项目符号为小写罗马字母列表
        start属性
            值       说明
            ------------------------
            数值  有序列表中列表项的起始数字
    -->
        <h2>有序列表</h2>
        <h4>1数字编号:</h4>
        <ol>
            <li>计算机科学与技术</li>
            <li>软件工程</li>
            <li>信息管理与系统原理</li>
        </ol>
        <h4>A字母编号:</h4>
        <ol type="A" start="">
            <li>计算机科学与技术</li>
            <li>软件工程</li>
            <li>信息管理与系统原理</li>
        </ol>
        <h4>aI混合编号:</h4>
        <ol type="a" start="">
            <li>计算机科学与技术</li>
            <li type="I" value="5">软件工程</li>
            <li>信息管理与系统原理</li>
        </ol>
        <br />
        <hr width="100%" size="50" color="#000" align="right" noshade />
        <br />
    <!--
    4.4 列表嵌套
    在一个列表嵌入另外一个列表
    -->
        <h2>混合列表</h2>
        <h4>图书分类</h4>
        <ol type="1">
            <li>
                <h4>计算机与电子信息</h4>
                <ol type="A">
                    <li>数据库</li>
                    <li>电子信息</li>
                    <li>计算机组成原理</li>
                    <li>计算机基础
                        <ul type="dise">
                            <li>计算机文化基础</li>
                            <li>公共基础</li>
                            <li>软件技术基础</li>
                            <li>计算机导论</li>
                            <li>计算思维</li>
                        </ul>
                    </li>
                </ol>
            </li>
            <li><h4>理工</h4></li>
            <li><h4>经管与人文</h4></li>
        </ol>
        <br />
        <hr width="100%" size="50" color="#000" align="right" noshade />
        <br />
    <!--
    4.5 定义列表
        <dl>
            <dt>项目1</dt>
                <dd>描述1</dd>
                <dd>描述2</dd>
                <dd>描述3</dd>
            <dt>项目2</dt>
                <dd>描述1</dd>
                <dd>描述2</dd>
                <dd>描述3</dd>
        </dl>
        定义列表每一列表项前既没有符号,也没有编号。
    --> 
        <a name="EditPlus">第五章测试</a>
        <h2>定义列表</h2>
        <h4>定义列表展示联系人信息</h4>
        <dl>
            <dt>联系人:</dt>
                <dd>占有位置</dd>
                <dd>电话:020-10111111</dd>
                <dd>E-mail:[email protected]</dd>
            <dt>联系地址:</dt>
                <dd>上海市复旦大学计算机系10计算机班</dd>
            <dt>邮政编码:</dt>
                <dd>200433</dd>
        </dl>
        <h4 align="center"><a href="5.html#software">返回第五章</a></h4>
    </body>
</body>

猜你喜欢

转载自blog.csdn.net/JEYMING/article/details/80286233