使用列表

前言：列表是一种非常有用的数据排列方式，它以列表的形式来显示数据。HTML中共有3种列表，分别是无序列表、有序列表和定义列表。无序列表的所有列表项目之间没有先后顺序之分。有序列表的列表项目是有先后顺序之分的。定义列表是一组带有特殊含义的列表，一个列表项目里包含条件和说明两部分。

目录：

• 了解列表标记概述
• 掌握有序列表
• 掌握无序列表
• 掌握定义列表
• 掌握菜单列表

一、 认识列表标记

​ HTML列表共有3种类型，一种是无序列表，项目符号由几个符号构成；一种是有序列表，项目符号由字母或数字进行排序；一种是定义列表，它用作产生条件和描述的双重列表，可以对列表进行更为灵活的定义。

二、 有序列表

​ 有序列表在列表中将每个元素按数字或字母顺序标号。创建一个有序列表时，以打开和关闭 ol 为开始，然后在每个列表元素前用标记 li 标识，标识的结束标记为 /li 。

1. 有序列表标记 ol

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ol>

说明：有序列表中各个列表项使用编号排列，列表中的项目有先后顺序，一般采用数字或字母作为顺序号。在该语法中， ol 和 /ol 标记标志着有序列表的开始和结束，而 li 和 /li 标记表示这是一个列表项。

举例：

2. 有序列表的序号类型type

<ol type="序号类型">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ol>

说明：默认情况下，有序列表的序号是数字的，通过 type 属性可以改变序号的类型，包括大小写字母、阿拉伯数字和大小写罗马数字。属性如下：

type	列表项目的序号类型
1	数字1、2、3、4 ······
a	小写英文字母a、b、c、d ······
A	大写英文字母A、B、C、D ······
i	小写罗马数字i、ii、iii、iv ······
I	大写罗马数字I、Ⅱ、Ⅲ、Ⅳ ······

举例：

说明：type属性仅仅适合于有序和无序列表，并不适用于目录列表、自定义项和菜单列表。

3. 有序列表的起始数值 start

<ol start="起始数值">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ol>

说明：默认情况下，有序列表的编号是从1开始的，通过start属性可以调整编号的起始值。在该语法中，起始数值只能是数字，但是同样可以对字母和罗马数字起作用。

举例：

三、 无序列表

说明：无序列表除了不使用数字或字母以外，其他的和有序列表类似。无序列表并不依赖顺序来表示重要的程度。

1. 无序列表标记 ul

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

说明：无序列表的项目排列没有顺序，只以符号作为分项标识。在该语法中，使用 ul /ul 标记表示这一个无序列表的开始和结束，li 则表示一个列表项的开始。在一个无序列表中可以包含多个列表项。

举例：

注意：无序列表和有序列表可以互相嵌套。

2. 无序列表的类型 type

<ul type="符号类型">
		<li>one</li>
		<li>two</li>
		<li>three</li>
		<li>four</li>
	</ul>

说明：默认情况下，无序列表的项目符号是●，而通过type参数可以调整无序列表的项目符号，避免列表符号的单调。在该语法中，无序列表其他的属性不变，type属性则决定了列表项开始的符号。它可以设置的值有3个，如下：

类型值	列表项目的符号
disc	默认值，黑心实心原点 “●”
circle	空心圆环项目符号 “○”
square	正方形的项目符号 “□”

举例：

3. 目录列表标记 dir

<dir>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</dir>

说明：目录列表一般用来创建多列的目录列表，它在浏览器中的显示效果与无序列表相同，因为它的功能也可以通过无序列表来实现。在该语法中，dir 和 /dir 标志着目录列表的开始和结束。

举例：

4. 定义列表标记

<dl>
    <dt>定义条件</dt>
    <dd>定义描述</dd>
</dl>

说明：在该语法中，dl 标记和 /dl 标记分别定义了定义列表的开始和结束，dt 后面添加要解释的名词，而在 dd 后面则添加该名词的具体解释。

举例：

注意：在自定义列表之外也可以使用 dd 标签进行文本缩进，但这并不是有效的HTML,并且它会在某些浏览器中造成难以预料的后果。

5. 菜单列表标记 menu

<menu>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</menu>

说明：菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的，因为它的功能也可以通过无序列表来实现。

举例：

想了解更多，可以点这里：

[HTML列表](HTML 列表 (w3school.com.cn))