有序列表（ol）

定义：有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol> 标签。每个列表项始于 <li> 标签。

有序列表有 type 和 start 属性。
语法格式：

<ol type=value1 start=value2>
    <li></li>        
</ol>

注：value1 表示有序列表项目符号的类型, value2 表示项目开始的数值。
type 属性如下所示：

type类型 	描述
type=1 	表示列表项目用数字表示（1，2，3...)
type=a 	表示列表项目用小写字母表示（a,b,c...)
type=A 	表示列表项目用大写字母表示（A,B,C...)
type=i 	表示列表项目用小写罗马数字表示(i,ii,iii….)
type=I 	表示列表项目用大写罗马数字表示(I,II,III…)

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>



        <body>

            <h4>数字列表：</h4>
            <ol>
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>小写字母列表：</h4>
            <ol type="a">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>大写写字母列表：</h4>
            <ol type="A">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>小写罗马字母列表：</h4>
            <ol type="i">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>大写罗马字母列表：</h4>
            <ol type="I">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>
        </body>

</html>

注：type 默认为数字列表，即不给 type 设置属性值时显示的为数字列表。

无序列表（ul）

定义：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于<li>。无序列表的各个列表项之间没有顺序级别之分，是并列的。

ul 的 type 属性：默认值: disc，方块: square，空心圆: circle。
语法格式：

<ul>
    <li>列表项1</li>   
    <li>列表项2</li>   
    <li>列表项3</li>
    ......
</ul>

注：<ul></ul>标记用于定义无序列表，<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>。
例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>



        <body>

            <h4>Disc 项目符号列表：</h4>
            <ul type="disc">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

            <h4>Circle 项目符号列表：</h4>
            <ul type="circle">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

            <h4>Square 项目符号列表：</h4>
            <ul type="square">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

        </body>

</html>

自定义列表（dl）

定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。自定义列表的列表项前没有任何项目符号。

语法格式：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    ...
</dl>

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <body>

            <h2>一个自定义列表：</h2>

            <dl>
                <dt>春天</dt>
                <dd>万物复苏 </dd>
                <dd>百花争艳 </dd>
                <dd>适合学习</dd>
                <dt>夏天</dt>
                <dd>夏日绵绵</dd>
                <dd>烈日炎炎</dd>
                <dd>适合学习</dd>
            </dl>

        </body>

</html>

Copyright © 2020 deepinos.org All Rights Reserved Powered by DOSU Development Team

By DOSU development team : Momen / PaperDragon / QINGDKJ / Golden

Copyright © 2020 deepinos.org
All Rights Reserved Powered by DOSU Development Team