当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML 嵌套列表

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-05-25 09:17:12

HTML 列表能够把相关数据有效的组织起来。HTML 列表可以使用<ul>元素定义无序列表，使用<ol>元素定义有序列表，使用<dl>元素定义描述列表，这些列表除了基本使用之外，还可以嵌套使用。

列表的嵌套即一个列表中包含着另外一个列表的情况。

HTML 嵌套列表

无序列表的嵌套定义

无序列表使用<ul>元素进行定义，在<ul>和</ul>标签之间可以包含一个或多个使用<li>标签定义的列表项。

若需要在列表项内需要定义其它列表，在在<li>和</li>标签间再次定义<ul>元素即可。

<p>无序列表嵌套定义的例子</p>

<ul>

 <li>WEB前端技术

  <ul>

   <li>HTML</li>

   <li>CSS</li>

   <li>JavaScript</li>

  </ul>

 </li>

 <li>WEB后端

  <ul>

   <li>ASP.NET</li>

   <li>JSP</li>

   <li>PHP</li>

   <li>Python</li>

  </ul>

 </li>

</ul>

其效果显示如下图所示：

HTML无序列表嵌套定义

有序列表的嵌套定义

有序列表使用<ol>元素进行定义，在<ol>和</ol>标签之间使用<li>标签定义每个列表项。

若需要定义一个嵌套的有序列表，则可以在<li>和<li/>标签之间定义新的<ol>元素。

下面是有序列表嵌套定义的例子。

<p>有序列表嵌套定义的例子</p>

<ol>

 <li>WEB前端技术

  <ol type="a">

   <li>HTML</li>

   <li>CSS</li>

   <li>JavaScript</li>

  </ol>

 </li>

 <li>WEB后端

  <ol type="i">

   <li>ASP.NET</li>

   <li>JSP</li>

   <li>PHP</li>

   <li>Python</li>

  </ol>

 </li>

</ol>

其效果如下图所示：

定义列表的嵌套定义

定义列表（描述列表）使用<dl>元素进行定义，在<dl>和</dl>元素中使用<dt>标签和<dd>标签分别定义术语（名称）和对术语（名称）的描述信息。

我们可以在<dl>元素中进一步的使用<dl>来定义一个新描述列表。

下面是一个有关图书目录的例子：

<h2>《数据库原理与应用》目录</h2>



<dl>

 <dt>第1章 数据库概述</dt>

 <dd>

  <dl>

   <dt>1.1 数据库基本概念</dt>

   <dd>1.1.1 数据</dd>

   <dd>1.1.2 数据库</dd>

   <dd>1.1.3 数据库管理系统</dd>

   <dd>1.1.4 数据库系统</dd>

  </dl>

  <dl>

   <dt>1.2 数据管理技术的发展</dt>

   <dd>1.2.1 文件系统阶段</dd>

   <dd>1.2.2 数据库系统阶段</dd>

  </dl>

 </dd>

  <dt>第2章 数据库系统结构</dt>

  <dd>

   <dl>

    <dt>2.1 数据和数据模型</dt>

    <dd>2.1.1 数据与信息</dd>

    <dd>2.1.2 数据模型</dd>

   </dl>

 </dd>

</dl>