HTML 列表

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

在线实例

本例演示无序列表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学做网站论坛站长百科（www.xuewangzhan.net/baike/）</title>
</head>
<body>
<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>

本例演示有序列表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学做网站论坛站长百科（www.xuewangzhan.net/baike/）</title>
</head>
<body>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
</body>
</html>

HTML无序列表

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

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

HTML 有序列表

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

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

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

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

注意事项

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

更多实例

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>学做网站论坛站长百科（www.xuewangzhan.net/baike/）</title> 
</head>
<body>
<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>
<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>
<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>学做网站论坛站长百科（www.xuewangzhan.net/baike/）</title> 
</head>
<body>
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>
</body>
</html>

本例演示如何嵌套列表。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>学做网站论坛站长百科（www.xuewangzhan.net/baike/）</title> 
</head>
<body>
<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>学做网站论坛站长百科（www.xuewangzhan.net/baike/）</title> 
</head>
<body>
<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</body>
</html>

本例演示一个定义列表。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>学做网站论坛站长百科（www.xuewangzhan.net/baike/）</title> 
</head>
<body>
<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
</body>
</html>

HTML 列表标签

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

上一课: HTML 块元素下一课: HTML 表格

学做网站论坛专注网站培训

当前位置：

HTML 列表

在线实例

HTML无序列表

HTML 有序列表

HTML 自定义列表

注意事项

更多实例

HTML 列表标签

发表回复取消回复

相关教程

教程目录

网站标签

当前位置：

在线实例

HTML无序列表

HTML 有序列表

HTML 自定义列表

注意事项

更多实例

HTML 列表标签

发表回复 取消回复

相关教程

教程目录

网站标签

发表回复取消回复