HTML 列表用于指定信息列表。所有列表都可能包含一个或多个列表元素。共有三种不同类型的 HTML 列表:

  1. 有序列表或编号列表 (ol)
  2. 无序列表或项目符号列表 (ul)
  3. 描述列表或定义列表 (dl)

注意:我们可以在另一个列表中创建一个列表,这将被称为嵌套列表。

HTML 有序列表或编号列表

在有序的 HTML 列表中,默认情况下所有列表项都用数字标记。它也被称为编号列表。有序列表以 <ol> 标签开始,列表项以 <li> 标签开始。

<ol>  
 <li>Aries</li>  
 <li>Bingo</li>  
 <li>Leo</li>  
 <li>Oracle</li>  
</ol>  

输出:

  1. Aries
  2. Bingo
  3. Leo
  4. Oracle

HTML 无序列表或项目符号列表

在 HTML 无序列表中,所有列表项都用项目符号标记。它也被称为项目符号列表。无序列表以 <ul> 标签开头,列表项以 <li> 标签开头。

<ul>  
 <li>Aries</li>  
 <li>Bingo</li>  
 <li>Leo</li>  
 <li>Oracle</li>  
</ul>  

输出:

  • Aries
  • Bingo
  • Leo
  • Oracle

HTML 描述列表或定义列表

HTML Description list也是HTML和XHTML都支持的一种列表样式。它也被称为定义列表,其中的条目像字典或百科全书一样列出。

当您想要呈现词汇表、术语列表或其他名称-值列表时,定义列表非常合适。

HTML 定义列表包含以下三个标签:

  1. <dl> 标签定义列表的开始。
  2. <dt> 标签定义了一个术语。
  3. <dd> 标签定义术语定义(描述)。
<dl>  
  <dt>Aries</dt>  
  <dd>-One of the 12 horoscope sign.</dd>  
  <dt>Bingo</dt>  
  <dd>-One of my evening snacks</dd>  
 <dt>Leo</dt>  
 <dd>-It is also an one of the 12 horoscope sign.</dd>  
  <dt>Oracle</dt>  
  <dd>-It is a multinational technology corporation.</dd>   
</dl>  

输出:

  • Aries

-One of the 12 horoscope sign.

  • Bingo

-One of my evening snacks

  • Leo

-It is also an one of the 12 horoscope sign.

  • Oracle

-It is a multinational technology corporation.

HTML 嵌套列表

另一个列表中的列表称为嵌套列表。如果你想在编号列表中添加项目符号列表,那么这种类型的列表将称为嵌套列表。

代码:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Nested list</title>  
</head>  
<body>  
    <p>List of Indian States with thier capital</p>  
<ol>  
    <li>Delhi  
        <ul>  
            <li>NewDelhi</li>  
        </ul>  
    </li>  
    <li>Haryana  
        <ul>  
            <li>Chandigarh</li>  
        </ul>  
    </li>  
    <li>Gujarat  
        <ul>  
            <li>Gandhinagar</li>  
        </ul>  
    </li>  
    <li>Rajasthan   
        <ul>  
            <li>Jaipur</li>  
        </ul>  
    </li>  
    <li>Maharashtra  
        <ul>  
            <li>Mumbai</li>  
        </ul>  
    </li>  
    <li>Uttarpradesh  
        <ul>  
            <li>Lucknow</li></ul>  
    </li>  
</ol>  
</body>  
</html>  

输出:

html-lists.png

支持浏览器

元素chrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<ol><ul><dl>YesYesYesYesYes

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想