- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 313字
- 2024-12-21 22:00:45
5.3 菜单列表和定义列表
实例143 使用<menu>标记来设置菜单列表
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\05\143
实例说明
菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的，因此它的功能也可以通过无序列表来实现。本实例将使用<menu>标记来设置菜单列表，其运行结果如图5.6所示。
图5.6 菜单列表的效果
技术要点
在菜单列表中，主要使用<menu>和<li>两个标记。语法如下：
<menu>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
…
</menu>
在该语法中，<menu>和</menu>标志着菜单列表的开始和结束。
实现过程
创建index.html文件，在文件中应用<menu>和<li>标记创建一个菜单列表，代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>创建菜单列表</title>
</head>
<body>
<font size="+3" color="#3300FF">本章中介绍的列表主要包括：</font><br/>
<menu>
<li>有序列表</li>
<li>无序列表</li>
<li>菜单列表</li>
<li>定义列表</li>
<li>目录列表</li>
</menu>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
使用<menu>标记设置酒店的菜单。
设置菜单列表的CSS样式。
实例144 使用<dl>标记来创建定义列表
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\05\144
实例说明
定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好像字典对文字进行解释一样。本实例将使用<dl>标记来设置定义列表，运行结果如图5.7所示。
图5.7 创建定义列表
技术要点
创建定义列表应使用定义列表标记<dl>、定义名词术语标记<dt>和名词术语解释标记<dd>。语法如下：
<dl>
<dt>名词1</dt><dd>解释1</dd>
<dt>名词2</dt><dd>解释2</dd>
<dt>名词3</dt><dd>解释3</dd>
…
</dl>
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面就是要解释的名称，而在<dd>后面则添加该名词的具体解释。作为解释的内容在显示时会自动缩进，有些像字典中的词语解释。
说明：定义列表标记<dl>必须有结束标记</dl>，而<dt>和<dd>标记的结束标记</dt>和</dd>可以省略。
实现过程
创建index.html文件，在文件中以一个心理测试题为例，首先应用<ol>和<li>标记定义问题的4个选项，然后应用<dl>、<dt>和<dd>标记定义4个选项的具体含义，代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>创建定义列表</title>
</head>
<body>
<font color="#0000FF">如果可以让你有一种超能力，你会想要有哪一种?</font><br/>
<ol type="A">
<li>穿越时光术</li><br/>
<li>隐形透明术</li><br/>
<li>神秘读心术</li><br/>
<li>青春不老术</li><br/>
</ol>
<hr color="#0000FF" size="3"/>
<dl>
<dt>A:穿越时光术</dt><dd>这类型的人个性很被动，想法天马行空，可是都只限于想而不实际行动。</dd><br/>
<dt>B:隐形透明术</dt><dd>这类型的人个性内向不喜欢跟人有实际上的接触，凡事都跟人保持距离，不喜欢成为注目的焦点，宁愿躲在一边自己做自己的事情，但是都跟正事无关。</dd><br/>
<dt>C:神秘读心术</dt><dd>这类型的人好奇心很强，喜欢吸收不同的信息，包括八卦，是一个小型的广播电台，而且很喜欢到处哈拉，常常跟朋友讲八卦讲到电话线都快烧掉了，要注意，你的电话费可能常常会暴增喔!</dd><br/>
<dt>D:青春不老术</dt><dd>这类型的人非常的自恋，他认为把自己打扮的美美的是一件很开心的事情，而且认为自己真的就是这么的美丽，永远保持美貌感觉是很棒的，根据很多统计喜欢自拍、喜欢照镜子…等等，这类型的占蛮多数的。
</dd><br/>
</dl>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
使用定义列表标记定义专业术语及其解释。
使用定义列表标记为图书分类。