【学习笔记】Html：列表应用及区别

俺一直以来乱用列表，今天总结一下。

Html最常见的列表是ol（order list，有序列表）和ul（unorder list，无序列表，也称项目列表），除此之外还有dl（defined list，自定义列表），下面依次介绍。

1.   有序列表ol：有序列表ol的type属性决定了列表项序号的样式，取值有：1（默认值，数字）、a（小写英文字母）、A（大写英文字母）、i（消息罗马数字）、I（大学罗马数字）。

eg：<ol>

            <li style=“a”>有序列表内容1</li>

            <li style=“A”>有序列表内容2</li>

     <li>有序列表内容3</li>

        <ol>

表现为：

a．有序列表内容1

B．有序列表内容2

3．有序列表内容3

注：不知道你注意到了么，当单独设置项目符号类型时间，上下是不相互干扰的哦~~~

 

2.    无序列表ul：与 ol的差别在于li前面的项目符号是大圆点，也通过type属性改变样式，取值有:disc（默认值，实心圆点）、circle（空心圆环）、square（实心正方体）。

eg：<ul>

    <litype="circle">无序列表内容1</li>

    <litype="disc">无序列表内容2</li>

    <litype="square">无序列表内容3</li>

      </ul>

表现为：

        

        注：对于高级点的浏览器（如chorm，firefox等），已经支持ul和ol的混用。也就说，你设置ul li的style=“A”是有效的。

 

3.    自定义列表dl：

< dl>< /dl>用来创建一个普通的列表, 可理解为内容块。

< dt>< /dt>用来创建列表中的上层项目，可理解为内容块的标题。

< dd>< /dd>用来创建列表中最下层项目，可理解为内容。

eg：<dl>

           <dt>标题</dt>

           <dd>内容1</dd>

           <dd>内容2</dd>

       </dl>

表现为：

标题

        内容1

        内容2

注：可能你看不出端倪来，其实内容块默认是相对于dl左缩进了40px的，哈哈哈~~要是不想要这个缩进，用margin-left：0px就解决了！

     <dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。 dt，dd中可以再加入 ol，ul，li，p等。