HTML 列表元素

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

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

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。


HTML无序列表

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

<ul>
  <li>HTML+CSS网页设计基础</li>
  <li>Javascript高级程序设计</li>
  <li>Python语言程序设计基础</li>
</ul>

效果展示:

无序列表:
  • HTML+CSS网页设计基础
  • Javascript高级程序设计
  • Python语言程序设计基础

亲自试试


HTML 有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

  • 有序列表始于 <ol> 标签。
  • 每个列表项始于 <li> 标签。
  • 列表项使用数字来标记。
<h5>有序列表:</h5>
<ol>
  <li>HTML+CSS网页设计基础</li>
  <li>Javascript高级程序设计</li>
  <li>Python语言程序设计基础</li>
</ol>

效果展示:

有序列表:
  1. HTML+CSS网页设计基础
  2. Javascript高级程序设计
  3. Python语言程序设计基础

亲自试试


HTML 自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

  • 自定义列表以 <dl> 标签开始。
  • 每个自定义列表项以 <dt> 开始。
  • 每个自定义列表项的定义以 <dd> 开始。
<dl>
  <dt>HTML</dt>
  <dd>- HTML+CSS网页设计基础</dd>
  <dt>JavaScript</dt>
  <dd>- Javascript高级程序设计</dd>
  <dt>Python</dt>
  <dd>- Javascript高级程序设计</dd>
</dl>

效果展示:

HTML
– HTML+CSS网页设计基础
JavaScript
– Javascript高级程序设计
Python
– Javascript高级程序设计

更多在线示例

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

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

嵌套列表
本例演示如何嵌套列表。

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

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


HTML 列表标签

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

相关