HTML 简明教程 ( HTML5 标准 ) - 列表 ( list )

HTML 中有三种形式的列表

无序列表
有序列表
说明列表 (这个词优点不恰当，但有时候看起来还挺恰当的)

HTML 无序列表

HTML <ul> 标记标签用于定义一组无序列表，而 <li> 标记标签则用于定义每个列表项

默认情况下，无序列表的每个列表项的外观使用的是 黑色实心圆点

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ul>

显示如下

苹果
香蕉
菠萝

我们可以使用 CSS 中的 list-style-type 属性来定义不同的列表项

list-style-type 属性的可选值有

值	说明
disc	默认，将列表项标记设置为项目符号，也就是黑色实心圆点
circle	将列表项标记设置为空心的黑色圆点
square	将列表项标记设置为黑色实心方块
none	不设置列表项标记

list-style-type:disc

<ul style="list-style-type:disc">
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ul>

显示如下

苹果
香蕉
菠萝

list-style-type:circle

<ul style="list-style-type:circle">
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ul>

显示如下

苹果
香蕉
菠萝

list-style-type:square

<ul style="list-style-type:square">
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ul>

显示如下

苹果
香蕉
菠萝

list-style-type: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>

显示如下

苹果
香蕉
菠萝

我们可以使用 type 属性来定义列表项的类型

type 属性的可选值如下

属性值	说明
type="1"	默认，列表项将使用数字编号
type="A"	列表项使用大写字母编号
type="a"	列表项使用小写字母编号
type="I"	列表使用大写罗马字符编号
type="i"	列表项使用小写罗马字符编号

type="1"

<ol type="1" >
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ol>

显示如下

苹果
香蕉
菠萝

type="A"

<ol type="A" >
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ol>

显示如下

苹果
香蕉
菠萝

type="a"

<ol type="a" >
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ol>

显示如下

苹果
香蕉
菠萝

type="I"

<ol type="I" >
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ol>

显示如下

苹果
香蕉
菠萝

type="i"

<ol type="i" >
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ol>

显示如下

苹果
香蕉
菠萝

有序列表默认从 1 开始，如果想要从其它值开始，可以使用 start 属性来定义

例如下面的示例使用 start 属性从 20 开始编号

<ol start="20">
  <li>苹果</li>
  <li>香蕉</li>
  <li>菠萝</li>
</ol>

显示如下

苹果
香蕉
菠萝

说明列表

说明列表不仅定义了一组列表项，还为每个列表项添加了说明

HTML 提供了 <dl> 标记标签用于定义说明列表，提供了 <dt> 标记标签定义说明列表的项目，提供了 <dl> 标记标签定义列表项的说明信息

<dl>
  <dt>苹果</dt>
  <dd>- 最喜欢吃的水果</dd>
  <dt>橘子</dt>
  <dd>- 最不喜欢吃的水果</dd>
</dl>

嵌套列表

列表可以嵌套，这意味着我们可以在列表中定义另一个列表，例如

<ul>
  <li>HTML</li>
  <li>CSS
    <ul>
      <li>CSS2.0</li>
      <li>CSS3.0</li>
    </ul>
  </li>
  <li>JavaScript</li>
</ul>

显示结果如下

HTML
CSS
- CSS2.0
- CSS3.0
JavaScript

水平列表

默认情况下，<li> 、<dt> 和 <dd> 三个标记标签都是独占一行的，也就是说 HTML 列表会是垂直显示

如果要水平显示，我们可以使用 CSS 样式来自定义

下面的示例使用 <ul> 标签和 <li> 标签创建水平菜单列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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>