HTML 列表

HTML列表实例

无序列表:

  • 项目
  • 项目
  • 项目
  • 项目

有序列表:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项
运行 »

HTML无序列表

无序列表以<ul>标签开头。每个列表项都以<li>标签开头。

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记):

实例

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

运行 »


HTML无序列表 - 定义列表项符号

CSS list-style-type属性用于定义列表项标签的样式:

描述
disc 标记是实心圆 (默认)
circle 标记是空心圆
square 标记是实心方块
none 无标记

示例 - 实心圆(disc)

<ul style="list-style-type:disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
运行 »

示例 - 空心圆(circle)

<ul style="list-style-type:circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
运行 »

示例 - 实心方块(square)

<ul style="list-style-type:square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
运行 »

示例 - 无标记(none)

<ul style="list-style-type:none">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
运行 »


HTML有序列表

有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。

默认情况下,列表项使用数字来标记:

实例

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
运行 »

HTML有序列表 - 类型属性

<ol>标签的type属性定义了列表项标签的类型:

类型(Type)描述
type="1" 表示列表项目用数字标号(1,2,3...) (默认)
type="A" 表示列表项目用大写字母标号(A,B,C...)
type="a" 表示列表项目用小写字母标号(a,b,c...)
type="I" 表示列表项目用大写罗马数字标号(I,II,III...)
type="i" 表示列表项目用小写罗马数字标号(i,ii,iii...)

数字:

<ol type="1">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
运行 »

大写字母:

<ol type="A">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
运行 »

小写字母:

<ol type="a">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
运行 »

大写罗马数字:

<ol type="I">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
运行 »

小写罗马数字:

<ol type="i">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
运行 »

HTML自定义列表

HTML还支持自定义列表。

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

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以, <dd> 开始

实例

<dl>
  <dt>咖啡</dt>
  <dd>- 我喜欢白天喝</dd>
  <dt>牛奶</dt>
  <dd>- 我喜欢晚上喝</dd>
</dl>
运行 »

HTML列表嵌套

列表可以嵌套(列表中的列表):

实例

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>红茶</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
运行 »

注意:列表项可以包含新列表和其他HTML元素,如图像和链接等。


控制列表计数

默认情况下,有序列表将从1开始计数。如果要从指定的数字开始计数,可以使用start属性:

实例

<ol start="50">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
运行 »

CSS水平列表

可以使用CSS以多种不同方式设置HTML列表的样式。

一种流行的方法是水平设置列表,以创建导航菜单:

实例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>
运行 »

提示:您可以在我们的CSS教程中学习更多关于CSS的知识。


章节总结

  • 使用HTML <ul>元素定义无序列表
  • 使用CSS list-style-type属性定义列表项标签
  • 使用HTML <ol>元素定义有序列表
  • 使用HTML type属性定义编号类型
  • 使用HTML <li>元素定义列表项
  • 使用HTML <dl>元素定义描述列表
  • 使用HTML <dt>元素定义描述术语
  • 使用HTML <dd>元素在描述列表中描述术语
  • 列表可以嵌套在列表中
  • 列表项可以包含其他HTML元素
  • 使用CSS属性float:leftdisplay:inline可以水平显示列表

HTML列表标签

标签描述
<ul> 定义无序列表
<ol> 定义有序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述