目录导航

HTML列表用于以列表形式显示信息。列表可以有以下三种形式:

  • 有序列表
  • 无序列表
  • 描述列表

HTML有序列表

HTML有序列表以<ol>标记开头,每个项目以<li>标记开头。下面是有序列表的示例:

  1. 苹果
  2. 香蕉
  3. 芒果
  4. 荔枝
  5. 莲雾
  6. 龙眼

下面是HTML列表的示例,使用HTML有序列表:

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML基本标签</h2>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>芒果</li>
        <li>荔枝</li>
        <li>莲雾</li>
        <li>龙眼</li>
    </ol>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML有序列表

HTML排序列表类型属性

可以将type属性添加到有序列表,以定义标记的类型。下面表列出并描述了有序列表中使用的标记类型的列表。

属性 描述
type="1" 列表项将用数字编号(默认)
type="a" 列表项将以小写字母编号
type="A" 列表项将以大写字母编号
type="i" 列表项将使用小写罗马数字编号
type="I" 列表项将使用大写罗马数字编号

我们来看下面的示例(全部合为一体),使标记的类型变为:1AaIi

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML列表</h2>
    <ol type="1">
        <li>HTML</li>
        <li>列表</li>
    </ol>
    <ol type="A">
        <li>HTML</li>
        <li>列表</li>
    </ol>
    <ol type="a">
        <li>HTML</li>
        <li>列表</li>
    </ol>
    <ol type="I">
        <li>HTML</li>
        <li>列表</li>
    </ol>
    <ol type="i">
        <li>HTML</li>
        <li>列表</li>
    </ol>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML无序列表

HTML无序列表以<ul>标记开头,每个项目以<li>标记开头。下面是无序列表的示例。

  • 苹果
  • 香蕉
  • 芒果
  • 荔枝
  • 莲雾
  • 龙眼

默认情况下,列表项将标有项目符号(黑色小圆圈)

下面是HTML无序列表的示例。

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML列表</h2>
    <ul>
        <li>JAVA</li>
        <li>PHP</li>
        <li>HTML</li>
        <li>MySQL</li>
        <li>Python</li>
        <li>C#</li>
    </ul>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML无序列表样式类型属性

可以将样式属性添加到无序列表,以定义标记的样式。 下表列出并描述了HTML无序列表样式类型的属性。

样式 描述
list-style-type:circle 列表项将用圆圈标记
list-style-type:disc 列表项将用项目符号标记(默认)
list-style-type:square 列表项将用正方形标记
list-style-type:none 列表项不会被标记

HTML标记为实心圆

我们来看看下面的示例,将标记设为实心圆(disc):

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML列表</h2>
    <ul style="list-style-type:disc">
        <li>JAVA</li>
        <li>PHP</li>
        <li>HTML</li>
        <li>MySQL</li>
        <li>Python</li>
        <li>C#</li>
    </ul>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML标记为空心圆

我们来看看下面的示例,将标记设置为空心圆(circle):

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML列表</h2>
    <ul style="list-style-type:circle">
        <li>JAVA</li>
        <li>PHP</li>
        <li>HTML</li>
        <li>MySQL</li>
        <li>Python</li>
        <li>C#</li>
    </ul>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML标记为正方形

让我们看下面的示例,将标记设为正方形:

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML列表</h2>
    <ul style="list-style-type:square">
        <li>JAVA</li>
        <li>PHP</li>
        <li>HTML</li>
        <li>MySQL</li>
        <li>Python</li>
        <li>C#</li>
    </ul>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML标记为正方形

HTML删除标记

让我们看下面的示例,示例中演示如何从列表中删除标记:

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML列表</h2>
    <ul style="list-style-type:none">
        <li>JAVA</li>
        <li>PHP</li>
        <li>HTML</li>
        <li>MySQL</li>
        <li>Python</li>
        <li>C#</li>
    </ul>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML删除标记

HTML描述列表

描述列表是术语列表,其中包含每个术语的描述。

<dl>标记定义描述列表,<dt>标记定义术语(名称),<dd>标记定义数据(描述)。下面是一个使用HTML中的描述列表的示例:

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML列表</h2>
    <dl>
    <dt>HTML</dt>
        <dd>HTML - 超文本标记语言</dd>
        <dt>列表</dt>
        <dd>有组织的,无组织的描述列表</dd>
    </dl>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML描述列表

HTML嵌套列表

可以自由地将一个列表嵌套到另一个列表,也称为嵌套列表。 以下示例显示了如何在HTML文档中使用嵌套列表。

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
</head>
<body>
    <h2>HTML列表</h2>
    <ul>
    <li>HTML
    <ul>
        <li>列表
        <ul>
            <li>列表教程</li>
            <li>列表示例</li>
        </ul>
        </li>
        <li>列表标签
        <ul>
            <li>列表标签教程</li>
            <li>列表标签示例</li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML嵌套列表

HTML创建水平列表

还可以使用CSS在HTML中创建水平列表。 以下示例显示了如何在HTML中创建水平列表:

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML基本标签示例</title>
    <meta charset="utf-8">
    <style>
        ul li{display:inline;}
    </style>
</head>
<body>
    <h2>HTML列表</h2>
    <ul>
    <li>JAVA</li>
        <li>PHP</li>
        <li>HTML</li>
        <li>MySQL</li>
        <li>Python</li>
        <li>C#</li>
    </ul>
    </body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML创建水平列表

HTML创建花式或交互式水平列表

稍微增加一些样式,就可以使列表更加美观和交互。以下示例显示了如何在HTML中创建精美的或交互式的水平列表。

<!DOCTYPE html>
<html>
<head>
    <title>HTML列表示例</title>
    <meta charset="utf-8">
    <style>
        ul
        {
            padding: 0;
        }
        ul li
        {
            display: inline;
        }
        ul li a
        {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 4px 4px 0 0;
            line-height:50px;
        }
        ul li a:hover
        {
            background-color: white;
            color:red;
        }
    </style>
</head>
<body>

<ul>
    <li><a href="http://www.xntutor.com/html/">HTML</a></li>
    <li><a href="http://www.xntutor.com/js/">JS</a></li>
    <li><a href="http://www.xntutor.com/css/">CSS</a></li>
    <li><a href="http://www.xntutor.com/java/">Java</a></li>
    <li><a href="http://www.xntutor.com/jsp/">JSP</a></li>
    <li><a href="http://www.xntutor.com/servlet/">Servlet</a></li>
</ul>

</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML创建花式或交互式水平列表