1．ul元素
ul无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下：
| <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul> |
下面通过案例2-17对ul无序列表的用法进行演示，如图2-17所示。
例2-17 example17.html
| <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>我的爱好</title>
</head>
<body>
<h1>我的爱好</h1>
<hr>
<ul>
<li>我最喜欢的诗</li>
<li>我最想看的电影</li>
<li>我最想读的书</li>
<li>我最想做的事</li>
</ul>
</body>
</html> |
图2-17 ul无序列表的用法
图2-18 ol有序列表的用法
2.ol元素
ol有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：
| <ol type="" start=""> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ol> |
下面通过一个案例对ol有序列表的用法进行演示，如例2-18所示。
例2-18 example18.html
| <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>我的爱好</title> </head> <body> <h1>我的爱好</h1> <hr> <ul> <li>我最喜欢的诗 <ul> <li>李白的“静思夜”</li> <li>李白的“下江陵”</li> </ul> </li> <li>我最想看的电影 <ol> <li>Just Like Heaven</li> <li>Vantage Point</li> <li>I am Legend</li> <li>Babel</li> </ol> </li> <li>我最想读的书</li> <li>我最想做的事</li> </ul> </body> </html> |
3.dl元素
定义dl列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下：
| <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl> |
下面通过一个案例对定义dl列表的用法进行演示，如例2-19所示。
例2-19 example19.html
| <!doctype html> <html> <head> <meta charset="utf-8"> <title>dl元素的使用</title> </head> <body> <dl> <dt>计算机</dt> <!--定义术语名词--> <dd>用于大型运算的机器</dd> <!--解释和描述名词--> <dd>可以上网冲浪</dd> <dd>工作效率非常高</dd> </dl> </body> </html> |
图2-19 dl元素的使用示例
图2-20 列表元素的嵌套使用
在例2-19中，定义了一个定义列表，其中<dt></dt>标记内为术语名词“计算机”，其后紧跟着<dd></dd>标记，用于对<dt></dt>标记中的名词进行解释和描述，效果如图2-19所示。
在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类。同样，在使用列表时，列表项中也有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。
下面通过一个案例对列表的嵌套进行演示，如例2-20所示。
例2-20 example20.html
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表元素的嵌套使用</title>
</head>
<body>
<h2>饮品</h2>
<ul>
<li>咖啡
<ol> <!--有序列表的嵌套-->
<li>拿铁</li>
<li>摩卡</li>
</ol>
</li>
<li>茶
<ul> <!--无序列表的嵌套-->
<li>碧螺春</li>
<li>龙井</li>
</ul>
</li>
</ul>
</body> |
在例2-20中，首先定义了一个包含两个列表项的无序列表，然后在第一个列表项中嵌套一个有序列表，在第二个列表项中嵌套一个无序列表，方法为在<li></li>中定义有序或无序列表。运行例2-20，效果如图2-20所示。
来源：服务器，转载请保留出处和链接！
本文链接：http://www.cau168.com/post/151.html
