HTML5列表标签

列表标签

原创  2014年07月03日 20:16:37

• 标签：
• HTML

• 1104

 

    列表(List)，就是在网页中将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表和定义列表三种。另外，还有不太常用的目录列表和菜单列表。

                                                 列表类型与标记符号

列表类型	标记符号	列表类型	标记符号
无序列表	ul	目录列表	dir
有序列表	ol	菜单列表	menu
定义列表	dl

 

一、无序列表

    无序列表(Unordered List)是一个没有特定顺序的相关条目(或称为列表项)的集合。在无序列表中，各个列表项之间属并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。

×基本语法

    <ul type=” ”>

        <li> 项目名称 </li>

        ……

        <li> 项目名称 </li>

    </ul>

×语法说明

    在HTML中，可以使用成对的<ul></ul>标记插入无序列表，其中的列表项标记<li></li>(list-items)用来定义列表项序列。

使用无序列表标记的type属性，可以指定出现在列表项前的项目符号的样式，其取值以及相对应的符号样式如下：

(1)disc：指定项目符号为一个实心圆点(IE浏览器默认值是disc)；

(2)circle：指定项目符号为一个空心圆点；

(3)square：指定项目符号为一个实心方块。

 

二、有序列表

 

1、有序列表及其编号样式

    有序列表(Ordered List)是一个有特定顺序的相关条目(或称为列表项)的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。

×基本语法

    <ol type=” ”>

        <li> 项目名称 </li>

        ……

        <li> 项目名称 </li>

    </ol>

×语法说明

    在HTML中，可以使用成对的<ol></ol>标记插入有序列表，其中的列表项标记<li></li>(list-items)用来定义列表项序列。

使用有序列表标记的type属性，可以指定出现在列表项前的项目编号的样式，其取值以及相对应的符号样式如下：

(1)1：指定项目编号为阿拉伯数字(IE浏览器的默认值)；

(2)a：指定项目编号为小写英文字母；

(3)A：指定项目编号为大写英文字母；

(4)i：指定项目编号为小写罗马数字；

(5)I：指定项目编号为大写罗马数字。

 

2、编号起始值

    通常，在指定列表的编号样式后，浏览器会从1、a、A、ⅰ、Ⅰ开始自动编号。而在使用有序列表标记的start属性后，用户则可改变标号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号。

 

3、列表项样式

    除了对列表标记<ol></ol>进行属性设置外，还可以对列表项标记<li></li>进行属性设置。使用列表项标记<li></li>的type属性，可以指定单个列表项的符号(对于无序列表而言)或编号(对于有序列表而言)。在列表标记<ol></ol>的type属性和列表项标记<li></li>的type属性发生冲突的情况下，所指定的单个列表项遵循<li></li>的type属性进行设置。

[注]：

(1)所指定的单个列表项只有样式发生了变化，其顺序值大小不变。

(2)列表项标记<li></li>的type属性只影响当前列表项，后续的列表项标记将恢复遵循列表中设置的type属性。

(3)列表项标记<li></li>的type属性的指定，即使用于无序列表也使用于有序列表。

 

4、列表项编号

    列表项标记的type属性只能改变当前列表项的符号或编号的样式，并不会改变其值的大小。使用列表项标记的<li></li>的value属性，可以改变当前列表项的编号大小，并会影响其后所有列表项编号的大小。但该属性只适用于有序列表。

 

三、嵌套列表

    列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。嵌套列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是有序列表和无序列表的混合嵌套。

 

四、定义列表

    在HTML文件中，只要在适当的地方插入<dl></dl>标记，即可自动生成定义列表(Definition List)。它的每一项前既没有项目符号，也没有编号，它是通过缩进的形式使内容层次清晰。

×基本语法

    <dl>

        <dt> … </dt>

            <dd> … </dd>

            <dd> … </dd>

        <dt> … </dt>

            <dd> … </dd>

            <dd> … </dd>

    </dl>

×语法说明

(1)<dl></dl>标记用来创建定义列表。

(2)<dt></dt>标记用来创建列表中的上层项目，此标记只能在<dl></dl>标记中使用。显示时，<dt></dt>标记定义的内容将左对齐。

(3)<dd></dd>标记用来创建列表中的下层项目，此标记只能在<dl></dl>标记中使用。显示时<dd></dd>标记的内容将相对于<dt></dt>标记定义的内容向右缩进。

 

五、菜单列表和目录列表

    菜单列表(Menu List)通常用于显示一个简单的单列列表，一般不做嵌套。目录列表(Directory List)通常用于显示一个多列的文件列表，可做嵌套。他们的使用均和无序列表类似，并且可以看成是无序列表的一种特殊形式。一般不建议使用此两种列表。

×基本语法

(1)菜单列表

    <menu>

        <li> 项目名称 </li>

        ……

        <li> 项目名称 </li>

    </menu>

(2)目录列表

    <dir>

        <li> 项目名称 </li>

        ……

        <li> 项目名称 </li>

    </dir>

原创  2014年07月03日 20:16:37

• 标签：
• HTML

• 1104

 

    列表(List)，就是在网页中将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表和定义列表三种。另外，还有不太常用的目录列表和菜单列表。

                                                 列表类型与标记符号

列表类型	标记符号	列表类型	标记符号
无序列表	ul	目录列表	dir
有序列表	ol	菜单列表	menu
定义列表	dl

 

一、无序列表

    无序列表(Unordered List)是一个没有特定顺序的相关条目(或称为列表项)的集合。在无序列表中，各个列表项之间属并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。

×基本语法

    <ul type=” ”>

        <li> 项目名称 </li>

        ……

        <li> 项目名称 </li>

    </ul>

×语法说明

    在HTML中，可以使用成对的<ul></ul>标记插入无序列表，其中的列表项标记<li></li>(list-items)用来定义列表项序列。

使用无序列表标记的type属性，可以指定出现在列表项前的项目符号的样式，其取值以及相对应的符号样式如下：

(1)disc：指定项目符号为一个实心圆点(IE浏览器默认值是disc)；

(2)circle：指定项目符号为一个空心圆点；

(3)square：指定项目符号为一个实心方块。

 

二、有序列表

 

1、有序列表及其编号样式

    有序列表(Ordered List)是一个有特定顺序的相关条目(或称为列表项)的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。

×基本语法

    <ol type=” ”>

        <li> 项目名称 </li>

        ……

        <li> 项目名称 </li>

    </ol>

×语法说明

    在HTML中，可以使用成对的<ol></ol>标记插入有序列表，其中的列表项标记<li></li>(list-items)用来定义列表项序列。

使用有序列表标记的type属性，可以指定出现在列表项前的项目编号的样式，其取值以及相对应的符号样式如下：

(1)1：指定项目编号为阿拉伯数字(IE浏览器的默认值)；

(2)a：指定项目编号为小写英文字母；

(3)A：指定项目编号为大写英文字母；

(4)i：指定项目编号为小写罗马数字；

(5)I：指定项目编号为大写罗马数字。

 

2、编号起始值

    通常，在指定列表的编号样式后，浏览器会从1、a、A、ⅰ、Ⅰ开始自动编号。而在使用有序列表标记的start属性后，用户则可改变标号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号。

 

3、列表项样式

    除了对列表标记<ol></ol>进行属性设置外，还可以对列表项标记<li></li>进行属性设置。使用列表项标记<li></li>的type属性，可以指定单个列表项的符号(对于无序列表而言)或编号(对于有序列表而言)。在列表标记<ol></ol>的type属性和列表项标记<li></li>的type属性发生冲突的情况下，所指定的单个列表项遵循<li></li>的type属性进行设置。

[注]：

(1)所指定的单个列表项只有样式发生了变化，其顺序值大小不变。

(2)列表项标记<li></li>的type属性只影响当前列表项，后续的列表项标记将恢复遵循列表中设置的type属性。

(3)列表项标记<li></li>的type属性的指定，即使用于无序列表也使用于有序列表。

 

4、列表项编号

    列表项标记的type属性只能改变当前列表项的符号或编号的样式，并不会改变其值的大小。使用列表项标记的<li></li>的value属性，可以改变当前列表项的编号大小，并会影响其后所有列表项编号的大小。但该属性只适用于有序列表。

 

三、嵌套列表

    列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。嵌套列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是有序列表和无序列表的混合嵌套。

 

四、定义列表

    在HTML文件中，只要在适当的地方插入<dl></dl>标记，即可自动生成定义列表(Definition List)。它的每一项前既没有项目符号，也没有编号，它是通过缩进的形式使内容层次清晰。

×基本语法

    <dl>

        <dt> … </dt>

            <dd> … </dd>

            <dd> … </dd>

        <dt> … </dt>

            <dd> … </dd>

            <dd> … </dd>

    </dl>

×语法说明

(1)<dl></dl>标记用来创建定义列表。

(2)<dt></dt>标记用来创建列表中的上层项目，此标记只能在<dl></dl>标记中使用。显示时，<dt></dt>标记定义的内容将左对齐。

(3)<dd></dd>标记用来创建列表中的下层项目，此标记只能在<dl></dl>标记中使用。显示时<dd></dd>标记的内容将相对于<dt></dt>标记定义的内容向右缩进。

 

五、菜单列表和目录列表

    菜单列表(Menu List)通常用于显示一个简单的单列列表，一般不做嵌套。目录列表(Directory List)通常用于显示一个多列的文件列表，可做嵌套。他们的使用均和无序列表类似，并且可以看成是无序列表的一种特殊形式。一般不建议使用此两种列表。

×基本语法

(1)菜单列表

    <menu>

        <li> 项目名称 </li>

        ……

        <li> 项目名称 </li>

    </menu>

(2)目录列表

    <dir>

        <li> 项目名称 </li>

        ……

        <li> 项目名称 </li>

    </dir>