前端HTML列表<ol> <ul> <dl>标签的属性和使用

1. 什么是列表&作用

将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来

2.列表的分类

列表是由 列表类型 和 列表项 组成的

          列表类型：

               有序列表

               无序列表

自定义列表

          列表项：

               表示具体的列表中的内容 

3.使用列表

1、有序列表

               1、语法:

                    <ol></ol>  --> Order List

                    列表项：<li>内容</li> --> List Item

               2、ol 的属性

                    1、type

                         列表标识的类型

                         取值：

                              1、1 ：数字(默认值)

                              2、a ：小写字母

                              3、A ：大写字母

                              4、i ：小写罗马字符

                              5、I ：大写罗马字符

                    2、start

                         列表标识的起始编号

                         默认为1

<ol type="a" strat="b">

<li>a</li>

<li>b</li>

<li>c</li>

</ol>

          2、无序列表

               1、语法

                    <ul></ul>->Unorder List

                    列表项：<li></li>

               2、属性

                    1、type

                         取值：

                              1、disc,实心圆(默认值)

                              2、circle,空心圆

                              3、square,实心矩形

                              4、none,不显示标识

     3、列表嵌套

          注意：显示的内容只能放在 li 中

          <ol>

<li>姓名：

<ul>

<li>小明</li>

<li>小红</li>

<li>小王</li>

</ul>

</li>

<li>

<ol>成绩：

<li>98</li>

<li>77</li>

<li>88</li>

</ol>

</li>

</ol>

     4、定义列表

          1、作用

               用于要给出一类事物的定义的情形。

          2、语法

               1、<dl></dl> 定义一个定义列表

               2、<dt></dt> 定义 列表中的一个术语

               3、<dd></dd> 对 术语 进行解释和说明

          3、使用场合

               图文混排

 

4.CSS中列表项标志的使用

1、列表项标志

          属性：list-style-type

          取值：

               none ：无标记

               disc ：实心圆

               circle ：空心圆

               square ：实心矩形

     2、列表项图像

          属性：list-style-image

          取值：url(图像URL);

     3、列表项位置

          属性：list-style-positioin

          取值：

               1、outside：标志位于文本区域之外，默认值

               2、inside：标志位于文本区域之内

     4、列表属性简写

          属性：list-style

          取值：type url() position;

          最常用方式：list-style:none;   -------取消列表项标记