html网页列表标记详解

关于列表的主要标记:

在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。

所谓有序，指的是按照数字或字母等顺序排列列表项目。

所谓无序，是指以●、○、□等开头的，没有顺序的列表项目。

关于列表的主要标记，如下表所示：

标记描述

<ul>无序列表

<ol>有序列表

<dir>目录列表

<dl>定义列表

<menu>菜单列表

<dt>、<dd>定义列表的标记

<li>列表项目的标记

1、有序列表标记<OL>：

有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和两个start属性。

通过<ol>和<li>标记建立有序列表。

基本语法：

<ol>

<li>项目一

<li>项目二

<li>项目三

……

</ol>

语法解释：

在有序列表中，使用<ol>作为有序的声明，使用<li>作为每一个项目的起始。

<H2>图像设计软件</H2>

<OL>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></OL>

图像设计软件

Photoshop Illustrator Freehand CorelDraw

2、有序列表的类型属性TYPE：

在有序列表的默认情况下，使用数字序号作为列表的开始，我们可以通过type属性将有序列表的类型设置为英文或罗马字母。

通过type属性设定有序列表编号的类型。

基本语法：

<ol type=value>

</ol>

语法解释：

其中value的值如下表所示

值描述

1数字1，2，3……

a小写字母a，b，c

A大写字母A，B，C

i小写罗马数字i，ii，iii……

Ⅰ大写罗马数字Ⅰ，Ⅲ，Ⅲ……

<H2>图像设计软件</H2>

<OL type=A>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></OL>

图像设计软件

Photoshop Illustrator Freehand CorelDraw

3、有序列表的起始属性START：

在默认的情况下，有序列表从数字1开始记数，这个起始值通过start属性可以调整，并且英文字母和罗马字母的起始值也可以调整。

通过start属性设定有序列表的起始编号。

基本语法：

<ol start=value>

</ol>

语法解释：

其中不论列表编号的类型是数字、英文字母还是罗马字母，value的值都是其始的数字。

<H2>图像设计软件</H2>

<OL start=5>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></OL>

<H2>图像设计软件</H2>

<OL type=a start=3>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></OL>

图像设计软件

Photoshop Illustrator Freehand CorelDraw

图像设计软件

Photoshop Illustrator Freehand CorelDraw

4、无序列表标记<UL>：

在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。

通过<ul>和<li>标记建立无序列表。

基本语法：

<ul>

<li>项目一

<li>项目二

<li>项目三

……

</ul>

语法解释：

在无序列表中，使用<ul>作为无序的声明，使用<li>作为每一个项目的起始。

<H2>图像设计软件</H2>

<UL>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></UL>

图像设计软件

Photoshop Illustrator Freehand CorelDraw

5、目录列表标记<DIR>：

目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。

通过<dir>和<li>标记建立目录列表。

基本语法：

<dir>

<li>项目一

<li>项目二

<li>项目三

……

</dir>

语法解释：

在目录列表中，使用<dir>作为目录列表的声明，使用<li>作为每一个项目的起始。

<H2>图像设计软件</H2>

<dir>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></dir>

图像设计软件

Photoshop Illustrator Freehand CorelDraw

6、定义列表标记<DL>：

定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好象字典对文字进行解释一样。

通过<dl>、<dt>、<dd>标记建立定义列表。

基本语法：

<dl>

<dt>名词一<dd>解释一

<dt>名词二<dd>解释二

<dt>名词三<dd>解释三

……

</dl>

语法解释：

在定义列表中，使用<dl>作为定义列表的声明，使用<dt>作为名词的标题，<dd>用来解释名词。

<H2>图像设计软件</H2>

<DL>

<DT>Photoshop

<DD>Adobe公司的图像处理软件

<DT>Illustrator

<DD>Adobe公司的矢量绘图软件

<DT>Freehand

<DD>Macromedia公司的矢量绘图软件

<DT>CorelDraw

<DD>Corel公司的图形图像软件 </DD></DL>

图像设计软件

Photoshop Adobe公司的图像处理软件 Illustrator Adobe公司的矢量绘图软件 Freehand Macromedia公司的矢量绘图软件 CorelDraw Corel公司的图形图像软件

7、菜单列表标记<MENU>：

菜单列表用于显示菜单内容，设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。

通过<menu>和<li>标记建立目录列表。

基本语法：

<menu>

<li>项目一

<li>项目二

<li>项目三

……

</menu>

语法解释：

在菜单列表中，使用<menu>作为菜单列表的声明，使用<li>作为每一个项目的起始。

<H2>图像设计软件</H2>

<MENU>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></MENU>

图像设计软件

Photoshop Illustrator Freehand CorelDraw

8、无序列表的类型属性TYPE：

在无序列表的默认情况下，使用●作为列表的开始，我们可以通过TYPE属性将无序列表的类型设置为○或□。

通过type属性设定无序列表编号的类型。

基本语法：

<ul type=value>

</ul>

语法解释：

其中value的值如下表所示

值描述

disc●

circle○

square□

<H2>图像设计软件</H2>

<ul type=circle>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></ul>

<H2>图像设计软件</H2>

<ul type=square>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></ul>

图像设计软件

Photoshop Illustrator Freehand CorelDraw

图像设计软件

Photoshop Illustrator Freehand CorelDraw

9、定义列表的嵌套：

嵌套列表指的是多于一级层次的列表，一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。

通过<dl>、<dt>、<dd>标记建立定义列表的嵌套。

基本语法：

<dl>

<dt>名词一

<dd>解释一

<dd>解释二

<dd>解释三

<dt>名词二

<dd>解释一

<dd>解释二

<dd>解释三

……

</dl>

语法解释：

在定义列表中，一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明，以实现定义列表的嵌套。

<H2>图像设计软件</H2>

<DL>

<DT><U>Photoshop</U>

<DD>Adobe公司出品

<DD>图像处理软件

<DT><U>Illustrator</U>

<DD>Adobe公司出品

<DD>矢量绘图软件

<DT><U>Freehand</U>

<DD>Macromedia公司出品

<DD>矢量绘图软件

<DT><U>CorelDraw</U>

<DD>Corel公司出品

<DD>图形图像软件 </DD></DL>

图像设计软件

Photoshop Adobe公司出品 图像处理软件 Illustrator Adobe公司出品 矢量绘图软件 Freehand Macromedia公司出品 矢量绘图软件 CorelDraw Corel公司出品 图形图像软件

10、无序列表和有序列表的嵌套：

这种嵌套类型是最常见的列表嵌套，重复地使用<ol>和<ul标记可以组合出嵌套列表。

通过<ol>和<ul>标记建立列表的嵌套。

<UL type=square>

<LI><U>图像设计软件</U>

<OL type=I>

<LI>Photoshop

<LI>Illustrator

<LI>Freehand

<LI>CorelDraw </LI></OL>

<LI><U>网页制作软件</U>

<OL type=I>

<LI>Dreamweaver

<LI>Frontpage

<LI>Golive </LI></OL>

<LI><U>网页动画软件</U>

<OL type=I>

<LI>Flash

<LI>LiveMotion </LI></OL></LI></UL>

图像设计软件 Photoshop Illustrator Freehand CorelDraw

网页制作软件 Dreamweaver Frontpage Golive

网页动画软件 Flash LiveMotion