W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 列表


HTML中无序列表和有序列表的示例:

无序列表:

  • Item
  • Item
  • Item
  • Item

有序列表:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item


HTML无序列表

无序列表以 <ul> 标签开始。 列表中的项以 <li> 标签开始。

列项目使用粗体圆点(典型的小黑圆圈)进行标记。

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

尝试一下 »


HTML 无序列表 - 样式属性

样式 属性可以添加到 无序列表 中, 以下为定义标记的样式:

样式 描述
list-style-type:disc 列表项将用小黑圆点标记(默认值)
list-style-type:circle 列表项将用圆圈标记
list-style-type:square 列表项将用正方形标记
list-style-type:none 列表项没有任何标记

黑圆点:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
尝试一下 »

圆圈:

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
尝试一下 »

正方形:

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
尝试一下 »

无:

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
尝试一下 »

HTML 有序列表

有序列表以 <ol> 标签开始。 列表中的项以 <li> 标签开始。

列表项将以数字标记:

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
尝试一下 »

HTML 有序列表 - 样式属性

样式 属性可以添加到 有序列表 中, 以下为定义标记的样式:

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

数字:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
尝试一下 »

大写字母:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
尝试一下 »

小写字母:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
尝试一下 »

大写罗马数字:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
尝试一下 »

小写罗马数字:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
尝试一下 »

HTML 描述列表

HTML也支持描述列表。

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

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
尝试一下 »

嵌套的HTML列表

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

Example

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
尝试一下 »
Note 列表项可以包含新列表和其他HTML元素,如图像和链接等。

水平列表

HTML列表可以用CSS以许多不同的方式来表达。

一种流行的方式,是样式列表显示水平:

Example

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

</body>
</html>
尝试一下 »

使用一些额外的样式,你可以使它看起来像一个菜单:

Example

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
尝试一下 »

HTML 列表标签

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