使用列表

１、使用无序列表

１）无序列表标记ul：ul用于设置无序列表，在每个项目文字之前，以项目符号作为每条列表项的前缀，各个列表之间没有顺序级别之分。

语法：<ul>

<li>列表项</li> <li>列表项</li> ……

</ul>

说明：<ul>和</ul>表示无序列表的开始和结束，<li>和</li>则表示一个列表项的开始和结束。(列表项间有自动换行的功能)

用途：在网页中的应用非常广泛，列举产品、功能等时候是最好的选择。

 

２）设置无序表的类型：默认情况下，无序列表的项目符号是“●”，而通过type属性可以调整无序列表的项目符号，以避免列表符号的单调。

 

无序列表的符号类型

属性值

示例

disc

●

cricle

○

square

■

例如：<ul type="square">

<li type="circle">列表项</li>

<li>列表项</li>

</ul>

注：ul、li都可使用type来定义项目符号。

 

３）定义列表标记dl：dl标记用于解释名词，包括定义条件和定义描述。定义列表由<dl>和</dl>元素起始和结尾，<dt>用来指定定义条件，<dd>用来指定定义描述。

语法：<dl>

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

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

</dl>

说明：<dl>和</dl>标记分别定义了定义列表的开始和结束，<dt>后面就是要解释的名称，<dd>后面则添加该名词的具体解释。

 

４）菜单列表标记：主要用于显示菜单内容，以及设计单列的菜单。菜单列表在浏览器中的显示效果和无序列表是相同的，因此它的功能也可以通过列表来实现。

语法：<menu>

<li>列表项</li><li>列表项</li>

</menu>

注：menu默认项目符号为“●”，ie支持其type类型改变项目符号，opera、firefox不支持其type类型改变项目符号，但可以通过li的type类型来定义项目符号。（无语）

 

５）目录列表dir：用于显示文件内容的目录大纲，使用目录列表能够设计一个压缩窄列的列表，以及显示一系列的列表内容。（好像与ul无任何区别……）

语法：<dir type="square">

<li>列表项</li><li>列表项</li>

</dir>

注：默认项目符号为“●”，ie、firefox支持其type类型改变项目符号，opera不支持其type类型改变项目符号，但可以通过li的type类型来定义项目符号。（无语）

 

疑问：menu与dir既然和ul有一样的功能，那还要它们干吗？一个就够了的么~

 

２、使用有序列表

１）有序列表标记ol：有序列表使用编号，而不是项目符号来列举项目，列表中的项目采用数字或英文字母开头，通常各项目之间有先后顺序。

语法：<ol>

<li>列表项</li><li>列表项</li>

</ol>

说明：<ol>和</ol>标记表示有序列表的开始和结束，而<li>和</li>标记表示一个项的开始。

 

２）有序列表的类型type：默认情况下，有序列表的序号是数字，通过type属性可以改变序号的类型，包括大小写字母、阿拉伯数字和大小写罗马数字。（另外也可以使用无序列表的类型：disc、circle和square，但毕竟是有序列表，不能没有序号……；同理无序列表的类型也可以使用有序列表的类型值，但毕竟是无序列表，只要符号就够了，无需序号……）

 

有序列表的序号类型

属性值

说明

1

数字1、2、3、4……

a

小写英文字母a、b、c、d……

A

大写英文字母A、B、C、D……

i

小写罗马数字i、ii、iii、iv……

I

大写罗马数字I、II、III、IV……

疑问：i和I是不是字母中的字母，好像是的……

注：罗马数字不适合于数字圈套的项目编号，不仅显示空间需要调整，而且一般用户很难直观地把罗马数字同阿拉伯数字联系起来，因此大小写罗马数字编号一般用在20以内的编号中。

 

３）有序列表的起始数值start：默认情况下，有序列表的编号是从１开始的，通过start属性可以调整编号的起始值。

语法：<ol start=”起始数值”>

<li>列表项</li><li>列表项</li>

　</ol>

说明：起始数值只能是数字，但是同样可以对字母的罗马数字起作用。

 

３、使用嵌套列表：指的是在列表中还有列表，如一级项目下面可以有二级项目、三级项目等。无序列表可以进行嵌套，以实现多级项目列表的形式。

１）定义列表的嵌套：是具有两个层次的列表，常用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。

语法：<dl>

<dt>名词一</dt><dd>解释１</dd><dd>解释２</dd><dd>解释３</dd>

<dt>名词二</dt><dd>解释１</dd><dd>解释２</dd><dd>解释３</dd>

</dl>

说明：一个<dt>标记对应多个<dd>标记作为名词的解释和说明，以实现定义列表的嵌套。

 

２）无序列表和有序列表的嵌套：是最常见的列表嵌套，重复使用<ol>和<ul>标记可以组合出多种嵌套形式。

注：在嵌套列表中，包含其他标记的标记称为父标记，被嵌套在内的标记称为子标记，通常嵌套的标记要缩进，这样容易看出它们与父标记之间的关系。