HTML 列表


HTML支持有序列表、无序列表和定义列表。


HTML列表

  • 这是第一项
  • 这是第二项
  • 这是第三项

示例

试一个

无序列表

有序列表

(本页底部提供了更多示例)


无序列表

无序列表(unordered list)由一组项目构成,其中每个项目都有项目符号(通常是个小黑点)标示。

整个无序列表以<ul>标签开始,列表中的每一项以<li>标签开始。

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

在浏览器中的显示效果为:

你可以在列表项中插入段落、换行、图像、链接或其他列表等等。


有序列表

有序列表(ordered list)也是一组项目,但它的每个项目是用数字标示的。

整个有序列表以<ol>标签开始,其中每一项以<li>标签开始。

<ol>
<li>咖啡</li>
<li>牛奶</li>
</ol>

在浏览器中的显示效果为:

  1. 咖啡
  2. 牛奶

你可以在列表项中插入段落、换行、图像、链接或其他列表等等。


定义列表

构成定义列表(definition list)的,不是单个项目,而是项目(术语)以及对各个项目(术语)的描述。

定义列表以<dl>(“dl”是definition list的缩写)标签开始。

其中每一项以<dt>(“dt”是definition term的缩写)标签开始。

每个项目的描述以<dd>(“dd”是definition description的缩写)标签开始。

<dl>
<dt>咖啡</dt>
<dd>黑色热饮</dd>
<dt>牛奶</dt>
<dd>白色冷饮</dd>
</dl>

在浏览器中的显示效果为:

咖啡
黑色热饮
牛奶
白色冷饮

你可以在<dd>元素中插入段落、换行、图像、链接或其他列表等等。


示例

更多示例

不同类型的有序列表
本例演示了不同类型的有序列表。

不同类型的无序列表
本例演示了不同类型的无序列表。

嵌套列表
本例演示了如何在列表中嵌套列表。

嵌套列表2
本例演示了更复杂的嵌套列表的情况。

定义列表
本例演示一个定义列表。


列表标签

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义一个列表项
<dl> 创建一个定义列表
<dt> 在定义列表中创建一项(即一个术语)
<dd> 为定义列表中的术语创建描述
<dir> 被弃用的,请用<ul>替代
<menu> 被弃用的,请用<ul>替代

粤ICP备11097351号-1