HTML网页列表标记学习教程
互联网 发布时间：2008-10-17 18:57:21 作者：佚名 
我要评论
我要评论HTML网页列表标记学习教程.
在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。
所谓有序，指的是按照数字或字母等顺序排列列表项目。
所谓
HTML网页列表标记学习教程.
在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。 所谓有序，指的是按照数字或字母等顺序排列列表项目。 所谓无序，是指以●、○、□等开头的，没有顺序的列表项目。
关于列表的主要标记，如下表所示
标记
描述
<ul>
无序列表
<ol>
有序列表
<dir>
目录列表
<dl>
定义列表
<menu>
菜单列表
<dt>、<dd>
定义列表的标记
<li>
列表项目的标记
有序列表标记<OL>
有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和两个start属性。
在有序列表中，使用<ol>作为有序的声明，使用<li>作为每一个项目的起始。 文件范例：7-1.htm
通过<ol>和<li>标记建立有序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-1.htm -->
03 <!-- 文件说明：建立有序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立有序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为有序，第12行到第15行使用了<li>标记作为列表项目的开始。
#p# 有序列表的类型属性TYPE
在有序列表的默认情况下，使用数字序号作为列表的开始，我们可以通过type属性将有序列表的类型设置为英文或罗马字母。
其中value的值如下表所示值
描述
1
数字1，2，3……
a
小写字母a，b，c
A
大写字母A，B，C
i
小写罗马数字i，ii，iii……
I
大写罗马数字Ⅰ，Ⅲ，Ⅲ……
文件范例：7-2.htm
通过type属性设定有序列表编号的类型。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-2.htm -->
03 <!-- 文件说明：设定有序列表编号类型-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定有序列表编号类型</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol type=a>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 <hr>
18 <h2>图像设计软件</h2>
19 <ol type=I>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ol>
25 <hr>
26 <h2>网页动画软件</h2>
27 <ol type=i>
28 <li>Flash
29 <li>LiveMotion
30 </OL>
31</body>
32 </html> 文件说明
第11行定义了列表的编号类型为小写字母，第19行定义了列表的编号类型为大写的罗马字母，第27行定义了列表的编号类型为小写的罗马字母。
#p# 有序列表的起始属性START
在默认的情况下，有序列表从数字1开始记数，这个起始值通过start属性可以调整，并且英文字母和罗马字母的起始值也可以调整。
其中不论列表编号的类型是数字、英文字母还是罗马字母，value的值都是其始的数字。 文件范例：7-3.htm
通过start属性设定有序列表的起始编号。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-3.htm -->
03 <!-- 文件说明：设定有序列表起始编号-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定有序列表起始编号</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol start=5>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 <hr>
18 <h2>图像设计软件</h2>
19 <ol type=I start=3>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ol>
25 </body>
26 </html> 文件说明
第11行定义了数字有序列表从5开始，第19行定义了罗马数字的有序列表从Ⅲ开始。
#p# 无序列表标记<UL>
在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。
在无序列表中，使用<ul>作为无序的声明，使用<li>作为每一个项目的起始。 文件范例：7-4.htm
通过<ul>和<li>标记建立无序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-4.htm -->
03 <!-- 文件说明：建立无序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立无序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ul>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为无序，第12行至15行使用了<li>标记作为列表项目的开始。
#p# 无序列表标记<UL>
在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。
在无序列表中，使用<ul>作为无序的声明，使用<li>作为每一个项目的起始。 文件范例：7-4.htm
通过<ul>和<li>标记建立无序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-4.htm -->
03 <!-- 文件说明：建立无序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立无序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ul>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为无序，第12行至15行使用了<li>标记作为列表项目的开始。
#p# 目录列表标记<DIR>
目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。
在目录列表中，使用<dir>作为目录列表的声明，使用<li>作为每一个项目的起始。 文件范例：7-5.htm
通过<dir>和<li>标记建立目录列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-5.htm -->
03 <!-- 文件说明：建立目录列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立目录列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <dir>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </dir>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为目录，第12行至第15行使用了<li>标记作为列表项目的开始。
#p# 定义列表标记<DL>
定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好象字典对文字进行解释一样。
在定义列表中，使用<dl>作为定义列表的声明，使用<dt>作为名词的标题，<dd>用来解释名词。 文件范例：7-6.htm
通过<dl>、<dt>、<dd>标记建立定义列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-6.htm -->
03 <!-- 文件说明：建立定义列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07<title>建立定义列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <dl>
12 <dt>Photoshop<dd>Adobe公司的图像处理软件
13 <dt>Illustrator<dd>Adobe公司的矢量绘图软件
14 <dt>Freehand<dd>Macromedia公司的矢量绘图软件
15 <dt>CorelDraw<dd>Corel公司的图形图像软件
16 </dl>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为定义列表，第12行至15行使用了<dt>显示软件名称，<dd>显示软件的说明。
#p# 菜单列表标记<MENU>
菜单列表用于显示菜单内容，设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。
在菜单列表中，使用<menu>作为菜单列表的声明，使用<li>作为每一个项目的起始。 文件范例：7-7.htm
通过<menu>和<li>标记建立目录列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-7.htm -->
03 <!-- 文件说明：建立菜单列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立菜单列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <menu>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </menu>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为菜单，第12行至第15行使用了<li>标记作为列表项目的开始。
#p# 无序列表的类型属性TYPE
在无序列表的默认情况下，使用●作为列表的开始，我们可以通过TYPE属性将无序列表的类型设置为○或□。
其中value的值如下表所示值
描述
disc
●
circle
○
square
□
文件范例：7-8.htm
通过type属性设定无序列表编号的类型。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-8.htm -->
03 <!-- 文件说明：设定无序列表编号类型-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定无序列表编号类型</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ul type=circle>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 <hr>
18 <h2>图像设计软件</h2>
19 <ul type=square>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ul>
25 <body>
26 </html> 文件说明
第11行定义了列表的编号类型为○，第19行定义了列表的编号类型为□。
#p# 定义列表的嵌套
嵌套列表指的是多于一级层次的列表，一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。
在定义列表中，一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明，以实现定义列表的嵌套。 文件范例：7-9.htm
通过<dl>、<dt>、<dd>标记建立定义列表的嵌套。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-9.htm -->
03 <!-- 文件说明：定义列表嵌套 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>定义列表嵌套</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <dl>
12 <dt><u>Photoshop</u>
13 <dd>Adobe公司出品
14 <dd>图像处理软件
15 <dt><u>Illustrator</u>
16 <dd>Adobe公司出品
17 <dd>矢量绘图软件
18 <dt><u>Freehand</u>
19 <dd>Macromedia公司出品
20 <dd>矢量绘图软件
21 <dt><u>CorelDraw</u>
22 <dd>Corel公司出品
23 <dd>图形图像软件
24 </dl>
25 </body>
26 </html> 文件说明
第12、15、18、21行定义了定义列表的第一级，并使用了<u>标记加注了下划线，第13和14行 、第16和第17行、第19行和第20行、第22行和23行定义了列表的解释。
#p# 无序列表和有序列表的嵌套
这种嵌套类型是最常见的列表嵌套，重复地使用<ol>和<ul标记可以组合出嵌套列表。 文件范例：7-10.htm
通过<ol>和<ul>标记建立列表的嵌套。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-10.htm -->
03 <!-- 文件说明：列表嵌套 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>列表嵌套</title>
08 </head>
09 <body>
10 <ul type=square>
11 <li><u>图像设计软件</u>
12 <ol type=I>
13 <li>Photoshop
14 <li>Illustrator
15 <li>Freehand
16 <li>CorelDraw
17 </ol>
18 <li><u>网页制作软件</u>
19 <ol type=I>
20 <li>Dreamweaver
21 <li>Frontpage
22 <li>Golive
23 </ol>
24 <li><u>网页动画软件</u>
25 <ol type=I>
26 <li>Flash
27 <li>LiveMotion
28 </ol>
29 </ul>
30 </body>
31 </html> 文件说明
第10行定义了列表的第一级，第11、18、24行定义了无序列表的内容，并使用了标记加注了下划线，第12至17行、第19至23行、第25至28行定义了二级列表。
在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。 所谓有序，指的是按照数字或字母等顺序排列列表项目。 所谓无序，是指以●、○、□等开头的，没有顺序的列表项目。
关于列表的主要标记，如下表所示
有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和两个start属性。
-
基本语法
<ol> <li>项目一 <li>项目二 <li>项目三 …… </ol>
在有序列表中，使用<ol>作为有序的声明，使用<li>作为每一个项目的起始。 文件范例：7-1.htm
通过<ol>和<li>标记建立有序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-1.htm -->
03 <!-- 文件说明：建立有序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立有序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为有序，第12行到第15行使用了<li>标记作为列表项目的开始。
#p# 有序列表的类型属性TYPE
在有序列表的默认情况下，使用数字序号作为列表的开始，我们可以通过type属性将有序列表的类型设置为英文或罗马字母。
-
基本语法
<ol type=value> </ol>
其中value的值如下表所示
通过type属性设定有序列表编号的类型。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-2.htm -->
03 <!-- 文件说明：设定有序列表编号类型-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定有序列表编号类型</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol type=a>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 <hr>
18 <h2>图像设计软件</h2>
19 <ol type=I>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ol>
25 <hr>
26 <h2>网页动画软件</h2>
27 <ol type=i>
28 <li>Flash
29 <li>LiveMotion
30 </OL>
31</body>
32 </html> 文件说明
第11行定义了列表的编号类型为小写字母，第19行定义了列表的编号类型为大写的罗马字母，第27行定义了列表的编号类型为小写的罗马字母。
#p# 有序列表的起始属性START
在默认的情况下，有序列表从数字1开始记数，这个起始值通过start属性可以调整，并且英文字母和罗马字母的起始值也可以调整。
-
基本语法
<ol start=value> </ol>
其中不论列表编号的类型是数字、英文字母还是罗马字母，value的值都是其始的数字。 文件范例：7-3.htm
通过start属性设定有序列表的起始编号。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-3.htm -->
03 <!-- 文件说明：设定有序列表起始编号-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定有序列表起始编号</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol start=5>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 <hr>
18 <h2>图像设计软件</h2>
19 <ol type=I start=3>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ol>
25 </body>
26 </html> 文件说明
第11行定义了数字有序列表从5开始，第19行定义了罗马数字的有序列表从Ⅲ开始。
#p# 无序列表标记<UL>
在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。
-
基本语法
<ul>
<li>项目一 <li>项目二 <li>项目三 …… </ul>
在无序列表中，使用<ul>作为无序的声明，使用<li>作为每一个项目的起始。 文件范例：7-4.htm
通过<ul>和<li>标记建立无序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-4.htm -->
03 <!-- 文件说明：建立无序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立无序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ul>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为无序，第12行至15行使用了<li>标记作为列表项目的开始。
#p# 无序列表标记<UL>
在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。
-
基本语法
<ul>
<li>项目一 <li>项目二 <li>项目三 …… </ul>
在无序列表中，使用<ul>作为无序的声明，使用<li>作为每一个项目的起始。 文件范例：7-4.htm
通过<ul>和<li>标记建立无序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-4.htm -->
03 <!-- 文件说明：建立无序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立无序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ul>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为无序，第12行至15行使用了<li>标记作为列表项目的开始。
#p# 目录列表标记<DIR>
目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。
-
基本语法
<dir> <li>项目一 <li>项目二 <li>项目三 …… </dir>
在目录列表中，使用<dir>作为目录列表的声明，使用<li>作为每一个项目的起始。 文件范例：7-5.htm
通过<dir>和<li>标记建立目录列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-5.htm -->
03 <!-- 文件说明：建立目录列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立目录列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <dir>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </dir>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为目录，第12行至第15行使用了<li>标记作为列表项目的开始。
#p# 定义列表标记<DL>
定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好象字典对文字进行解释一样。
-
基本语法
<dl> <dt>名词一<dd>解释一 <dt>名词二<dd>解释二 <dt>名词三<dd>解释三 …… </dl>
在定义列表中，使用<dl>作为定义列表的声明，使用<dt>作为名词的标题，<dd>用来解释名词。 文件范例：7-6.htm
通过<dl>、<dt>、<dd>标记建立定义列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-6.htm -->
03 <!-- 文件说明：建立定义列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07<title>建立定义列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <dl>
12 <dt>Photoshop<dd>Adobe公司的图像处理软件
13 <dt>Illustrator<dd>Adobe公司的矢量绘图软件
14 <dt>Freehand<dd>Macromedia公司的矢量绘图软件
15 <dt>CorelDraw<dd>Corel公司的图形图像软件
16 </dl>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为定义列表，第12行至15行使用了<dt>显示软件名称，<dd>显示软件的说明。
#p# 菜单列表标记<MENU>
菜单列表用于显示菜单内容，设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。
-
基本语法
<menu>
<li>项目一
<li>项目二
<li>项目三
……
</menu>
在菜单列表中，使用<menu>作为菜单列表的声明，使用<li>作为每一个项目的起始。 文件范例：7-7.htm
通过<menu>和<li>标记建立目录列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-7.htm -->
03 <!-- 文件说明：建立菜单列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立菜单列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <menu>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </menu>
17 </body>
18 </html> 文件说明
第11行定义了列表的类型为菜单，第12行至第15行使用了<li>标记作为列表项目的开始。
#p# 无序列表的类型属性TYPE
在无序列表的默认情况下，使用●作为列表的开始，我们可以通过TYPE属性将无序列表的类型设置为○或□。
-
基本语法
<ul type=value> </ul>
其中value的值如下表所示
通过type属性设定无序列表编号的类型。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-8.htm -->
03 <!-- 文件说明：设定无序列表编号类型-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定无序列表编号类型</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ul type=circle>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 <hr>
18 <h2>图像设计软件</h2>
19 <ul type=square>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ul>
25 <body>
26 </html> 文件说明
第11行定义了列表的编号类型为○，第19行定义了列表的编号类型为□。
#p# 定义列表的嵌套
嵌套列表指的是多于一级层次的列表，一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。
-
基本语法
<dl> <dt>名词一 <dd>解释一 <dd>解释二 <dd>解释三 <dt>名词二 <dd>解释一 <dd>解释二 <dd>解释三 …… </dl>
在定义列表中，一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明，以实现定义列表的嵌套。 文件范例：7-9.htm
通过<dl>、<dt>、<dd>标记建立定义列表的嵌套。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-9.htm -->
03 <!-- 文件说明：定义列表嵌套 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>定义列表嵌套</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <dl>
12 <dt><u>Photoshop</u>
13 <dd>Adobe公司出品
14 <dd>图像处理软件
15 <dt><u>Illustrator</u>
16 <dd>Adobe公司出品
17 <dd>矢量绘图软件
18 <dt><u>Freehand</u>
19 <dd>Macromedia公司出品
20 <dd>矢量绘图软件
21 <dt><u>CorelDraw</u>
22 <dd>Corel公司出品
23 <dd>图形图像软件
24 </dl>
25 </body>
26 </html> 文件说明
第12、15、18、21行定义了定义列表的第一级，并使用了<u>标记加注了下划线，第13和14行 、第16和第17行、第19行和第20行、第22行和23行定义了列表的解释。
#p# 无序列表和有序列表的嵌套
这种嵌套类型是最常见的列表嵌套，重复地使用<ol>和<ul标记可以组合出嵌套列表。 文件范例：7-10.htm
通过<ol>和<ul>标记建立列表的嵌套。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-10.htm -->
03 <!-- 文件说明：列表嵌套 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>列表嵌套</title>
08 </head>
09 <body>
10 <ul type=square>
11 <li><u>图像设计软件</u>
12 <ol type=I>
13 <li>Photoshop
14 <li>Illustrator
15 <li>Freehand
16 <li>CorelDraw
17 </ol>
18 <li><u>网页制作软件</u>
19 <ol type=I>
20 <li>Dreamweaver
21 <li>Frontpage
22 <li>Golive
23 </ol>
24 <li><u>网页动画软件</u>
25 <ol type=I>
26 <li>Flash
27 <li>LiveMotion
28 </ol>
29 </ul>
30 </body>
31 </html> 文件说明
第10行定义了列表的第一级，第11、18、24行定义了无序列表的内容，并使用了标记加注了下划线，第12至17行、第19至23行、第25至28行定义了二级列表。
相关文章
文章介绍了HTML中img标签的使用,包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，本文主要给大家介绍HTML img标签和超链2025-06-20- HTML meta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引，本文给大家介绍HTML中meta2025-06-20
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTML input 标签，感兴趣的朋友一起看看吧2025-06-20
这篇文章主要介绍了html 滚动条滚动过快会留下边框线的解决方案,解决方法很简单，可以将 dialog 单独拿出来别放在 transform 的子元素里,需要的朋友可以参考下2025-06-09- 本文将介绍如何使用<img>标签在 HTML 中添加图片，并展示一些常见的用法和技巧,通过本文的介绍，应该掌握了在 HTML 中添加和调整图片的基础知识，感兴趣的朋友一起看2025-05-16
- HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格2025-03-12
- 本文介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点，感兴2025-02-24
在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域（textarea）的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
最新评论