列表元素 |
列表在文档中占有极重要的地位,HTML规定了多种列表元素,可设置无序列表(项目列表)、有序列表和自定义列表等。
1.无序列表(Unorderes List):UL元素和LI元素
UL元素可用于创建一个以圆点等项目符号开始的无序列表。列表中的每一项用LI元素加以标识。LI的意思是List Item,该元素不可以
加结束标记。
无序列表默认的项目符号为圆点,但也可以通过TYPE属性改变。TYPE属性值有DISC、CIRCLE和SQUARE,可以加到<UL>标记中,也可以加到<LI>标记中。不过,如果加到<UL>中列表使用相同的项目符号,而加到<LI>中则各项目符号可以不同。
UL元素还支持COMPACT属性,COMPACT属性用来同志浏览器将其后的文字用小于当前字体的字符显示。
提示:无序列表的TYPE属性只有Netscape Navigator浏览器支持,在IE或其他浏览器中看不到应有的效果。
|
示例HTML源代码
|
显示效果
|
<UL>
<LI>Yestoday
<LI>Today
<LI>Tomorrow
</UL>
<UL>
<LI TYPE=DISC>Yestoday
<LI TYPE=CIRCLE>Today
<LI TYPE=SQUARE>Tomorrow
|
|
2.有序列表(Ordered List):OL元素和LI元素
另一种列表方式为有序列表。它与无序列表类似,但项目符号为序号数字或字母(默认为阿拉伯数字形式)。
有序列表也支持TYPE元素,不过,有序列表的TYPE元素是用来指定序号类型的。
OL元素还支持START属性。START属性指定有序列表的开始序号,按数字形式给定。OL元素还支持COMPACT和ALIGN属性。
|
示例HTML源代码 |
显示效果 |
<OL>
<LI>Yestoday
<LI>Today
<LI>Tomorrow
</OL>
<OL TYPE=A>
<LI>Yestoday
<LI>Today
<LI>Tomorrow
</OL>
<OL TYPE=a>
<LI>Yestoday
<LI>Today
<LI>Tomorrow
</OL>
<OL TYPE=I>
<LI>Yestoday
<LI>Today
<LI>Tomorrow
</OL>
<OL TYPE=i>
<LI>Yestoday
<LI>Today
<LI>Tomorrow
</OL>
<OL START=5>
<LI>Yestoday
<LI>Today
<LI>Tomorrow
</OL>
|
- Yestoday
- Today
- Tomorrow
- Yestoday
- Today
- Tomorrow
- Yestoday
- Today
- Tomorrow
- Yestoday
- Today
- Tomorrow
- Yestoday
- Today
- Tomorrow
- Yestoday
- Today
- Tomorrow
|
3.定义列表(Definition List):DL元素、DT元素和DD元素
定义列表由一组词语和响应的定义组成,浏览器通常将定义列表中的词语居左显示,而将相应的定义按照段落风格进行缩进显示。
定义列表元素DL由一系列词语元素DT和定义元素DD组成,通常DT和DD是成对出现的,也可以将多哥DT元素与一个DD元素相匹配,但不能包含多哥连续的DD元素。
定义将大列表时,可在DL元素中使用COMPACT属性,以便以紧凑或小号字体显示。
|
示例HTML源代码
|
显示效果
|
<dl>
<dt>Today
<dd>Today will be yesterday.
<dt>Tomorrow
<dd>Tomorrow will be today.
</dl>
<dl compact>
<dt>Today
<dd>Today will be yesterday.
<dt>Tomorrow
<dd>Tomorrow will be today.
</dl>
|
Today
- Today will be yesterday.
- Tomorrow
- Tomorrow will be today.
- Today
- Today will be yesterday.
- Tomorrow
- Tomorrow will be today.
|
4.目录列表(Directory List):DIR元素和LI元素
如果要表示数量较多的一系列短条目(每个不超过20个字符),可使用DIR元素。浏览器通常以多列目录咧咧表方式显示这些条目,其宽度不超过24个字符。DIR元素的内容由一组列表项元素LI组成。
|
示例HTML源代码
|
显示效果
|
<DIR>
<LI>A
<LI>B
<LI>C
<LI>D
<LI>E
</DIR>
|
A
B
C
D
E
|
5.菜单列表(Menu List):MENU元素和LI元素
菜单列表元素MENU用来显示一组列表项,每行一项。MENU元素的内容也是一系列列表项元素LI。MENU元素支持COMPACT属性。
|
示例HTML源代码
|
显示效果
|
<MENU>
<LI>无序列表
<LI>有序列表
<LI>定义列表
<LI>目录列表
</MENU>
|
|
|
|