网页列表标记
列表的标记
在html页面中,列表可以起到提纲契领的作用。列表分为两种类型,一是有序列表,一是无序列表。前者用项目符号来标记无序的项目,而后者则使用编号来记录项目的顺序。
所谓有序,指的是按照数字或字母等顺序排列列表项目。
所谓无序,是指以●、○、□等开头的,没有顺序的列表项目。
列表的主要标记
标记 描述
<ul> 无序列表
<ol> 有序列表
<dir> 目录列表
<dl> 定义列表
<menu> 菜单列表
<dt>、<dd> 定义列表的标记
<li> 列表项目的标记
有序列表标记<ol>
有序列表使用编号,而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头,通常各项目间有先后的顺序性。在有序列表中,主要使用<ol>和<li>两个标记以及type和两个start属性。
基本语法
<ol>
<li>项目一
<li>项目二
<li>项目三
……
</ol>
语法解释
在有序列表中,使用<ol>作为有序的声明,使用<li>作为每一个项目的起始。
有序列表的类型属性type
在有序列表的默认情况下,使用数字序号作为列表的开始,我们可以通过type属性将有序列表的类型设置为英文或罗马字母。
基本语法
<ol type=value> ...... </ol>
有序列表的类型
值 描述
1 数字1,2,3……
a 小写字母a,b,c
A 大写字母A,B,C
i 小写罗马数字i,ii,iii……
I 大写罗马数字Ⅰ,Ⅲ,Ⅲ……
有序列表的起始属性start
在默认的情况下,有序列表从数字1开始记数,这个起始值通过start属性可以调整,并且英文字母和罗马字母的起始值也可以调整。
基本语法
<ol start=value> ...... </ol>
语法解释
其中不论列表编号的类型是数字、英文字母还是罗马字母,value的值都是其始的数字。
无序列表标记<ul>
在无序列表中,各个列表项之间没有顺序级别之分,它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。
基本语法
<ul>
<li>项目一
<li>项目二
<li>项目三
……
</ul>
语法解释
在无序列表中,使用<ul>作为无序的声明,使用<li>作为每一个项目的起始。
目录列表标记<dir>
目录列表用于显示文件内容的目录大纲,通常用于设计一个压缩窄列的列表,用于显示一系列的列表内容,例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。
基本语法
<dir>
<li>项目一
<li>项目二
<li>项目三
……
</dir>
语法解释
在目录列表中,使用<dir>作为目录列表的声明,使用<li>作为每一个项目的起始。
定义列表标记<dl>
定义列表是一种两个层次的列表,用于解释名词的定义,名词为第一层次,解释为第二层次,并且不包含项目符号。定义列表也称为字典列表,因为它与字典具有相同的格式。在定义列表中,每个列表项带有一个缩进的定义字段,就好象字典对文字进行解释一样。
基本语法
<dl>
<dt>名词一<dd>解释一
<dt>名词二<dd>解释二
<dt>名词三<dd>解释三
……
</dl>
语法解释
在定义列表中,使用<dl>作为定义列表的声明,使用<dt>作为名词的标题,<dd>用来解释名词。
菜单列表标记<menu>
菜单列表用于显示菜单内容,设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。
基本语法
<menu>
<li>项目一
<li>项目二
<li>项目三
……
</menu>
语法解释
在菜单列表中,使用<menu>作为菜单列表的声明,使用<li>作为每一个项目的起始。
无序列表的类型属性type
在无序列表的默认情况下,使用●作为列表的开始,我们可以通过TYPE属性将无序列表的类型设置为○或□。
基本语法
<ul type=value> ...... </ul>
无序列表的类型
值 描述
disc ●
circle ○
square □
定义列表的嵌套
嵌套列表指的是多于一级层次的列表,一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套,以实现多级项目列表的形式。定义列表是一种两个层次的列表,用于解释名词的定义,名词为第一层次,解释为第二层次,并且不包含项目符号。
基本语法
<dl>
<dt>名词一
<dd>解释一
<dd>解释二
<dd>解释三
<dt>名词二
<dd>解释一
<dd>解释二
<dd>解释三
……
</dl>
语法解释
在定义列表中,一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明,以实现定义列表的嵌套。
无序列表和有序列表的嵌套
这种嵌套类型是最常见的列表嵌套,重复地使用<ol>和<ul标记可以组合出嵌套列表。
<html>
<head>
<title>列表嵌套</title>
</head>
<body>
<ul type=square>
<li><u>图像设计软件</u>
<ol type=I>
<li>Photoshop
<li>Illustrator
<li>Freehand
<li>CorelDraw
</ol>
<li><u>网页制作软件</u>
<ol type=I>
<li>Dreamweaver
<li>Frontpage
<li>Golive
</ol>
<li><u>网页动画软件</u>
<ol type=I>
<li>Flash
<li>LiveMotion
</ol>
</ul>
</body>
</html>