上QQ阅读APP看书，第一时间看更新
4.8 使用嵌套列表
教学录像：光盘\TM\lx\4\使用嵌套列表．exe
嵌套列表指的是多于一级层次的列表，一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。
4.8.1 定义列表的嵌套
定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。
语法
<dl>
<dt>名词一</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dd>解释3</dd>
<dt>名词二</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<dd>解释3</dd>
…
</dl>
语法解释
在定义列表中，一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明，以实现定义列表的嵌套。
【例4.12】实例代码。（实例位置：光盘\TM\sl\4\12）
<html>
<head>
<title>定义列表嵌套</title>
</head>
<body>
<font color="#00FF00" size="+2">古诗介绍</font><br /><br/>
<dl>
<dt>赠孟浩然</dt><br/>
<dd>作者：李白</dd><br/>
<dd>诗体：五言律诗</dd><br/>
<dd>吾爱孟夫子，风流天下闻。<br/>
红颜弃轩冕，白首卧松云。<br/>
醉月频中圣，迷花不事君。<br/>
高山安可仰？徒此挹清芬。<br/>
</dd>
<dt>蜀相</dt><br/>
<dd>作者：杜甫</dd><br/>
<dd>诗体：七言律诗</dd><br/>
<dd>丞相祠堂何处寻？锦官城外柏森森，<br/>
映阶碧草自春色，隔叶黄鹂空好音。<br/>
三顾频烦天下计，两朝开济老臣心。<br/>
出师未捷身先死，长使英雄泪满襟。<br/>
</dd>
</body>
</html>
运行这段代码，效果如图4.16所示。
图4.16 定义列表的嵌套
4.8.2 无序列表和有序列表的嵌套
最常见的列表嵌套模式就是有序列表和无序列表的嵌套，可以重复使用<ol>和<ul>标记组合实现。
【例4.13】实例代码。（实例位置：光盘\TM\sl\4\13）
<html>
<head>
<title>有序与无序列表的嵌套</title>
</head>
<body>
<font color="#3333FF" size="+2">轻松一刻：心理测试</font>
<ul type="square">
<li><font size="+1" color="#FF9900">Question：当你赶路累了，一好心的女巫说送你到以下哪或者谁家
里休息</font></li>
</ul>
<ol type="1">
<li>红磨坊</li><br/>
<li>七个小矮人</li><br/>
<li>美人鱼</li><br/>
<li>一休</li><br/>
<li>饼屋</li><br/>
<li>茱利叶</li><br/>
<li>附近亲戚家</li><br/>
<li>不理她</li><br/>
</ol>
<ul type="square">
<li><font size="+1" color="#FF9900">Answer:</font></li>
</ul>
<ol type="1">
<li>花心</li><br/>
<li>纯情</li><br/>
<li>对爱充满幻想</li><br/>
<li>心如止水</li><br/>
<li>实在</li><br/>
<li>渴望浪漫悲壮的爱情</li><br/>
<li>顺从父母之命媒妁之言</li><br/>
<li>暂时不想谈恋爱</li><br/>
</ol
</body>
</html>
运行这段代码，效果如图4.17所示。
图4.17 有序列表与无序列表的嵌套
4.8.3 有序列表之间的嵌套
有序列表之间的嵌套就是有序列表的列表项同样是一个有序列表，在<ol>标记中可以重复使用<ol>标记来实现有序列表的嵌套。
【例4.14】实例代码。（实例位置：光盘\TM\sl\4\14）
<html>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<head>
<title>有序列表的嵌套</title>
</head>
<body>
<h2>HTML5基础教程</h2>
<ol type="A">
<li>第一篇</li>
<ol type="1">
<li>第一章
<ol type="I">
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
<li>第四节</li>
</ol>
</li>
<li>第二章</li>
<li>第三章</li>
</ol>
<li>第二篇</li>
<ol type="1">
<li>第四章
<ol type="I">
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ol>
</li>
<li>第五章</li>
<li>第六章</li>
</ol>
</ol>
</body>
</html>
运行结果如图4.18所示。
图4.18 有序列表的嵌套