HTML列表

无序列表

一个无序列表使用<ul>开始。每一个列表项以<li>标签开始。

默认情况下，列表项目将被标记为子弹（黑色小圆圈）：

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

让我试试

无序列表-选择列表项标记

CSS list-style-type 属性用于定义列表项标记的样式:

值 描述
disc 将列表项标记设置为一个子弹（默认）
circle 将列表项标记设置为一个圆
square 将列表项标记设置为一个正方形
none 列表项将不被标记

例如 - Disc

<ul style="list-style-type:disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

让我试试

例如 - Circle

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

让我试试

例如 - Square

<ul style="list-style-type:square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

让我试试

例如 - None

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

让我试试

有序列表

有序列表用<ol>标签开始。 每个列表项使用<li>标签开始。

默认情况下，列表项将标有数字：

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

让我试试

有序列表 - type属性

<ol> 标签的type属性,定义列表项标记的类型：

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

数字

<ol type="1">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

让我试试

大写字母

<ol type="A">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

让我试试

小写字母

<ol type="a">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

让我试试

大写罗马

<ol type="I">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

让我试试

小写罗马

<ol type="i">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

让我试试

HTML描述列表

HTML还支持描述列表。

一个描述列表是一个列表的术语，每个术语都有一个描述。

<dl>标签定义了描述列表，<dt> 标签定义了术语（名称）, <dd> 签描述的每一个术语：

<dl>
  <dt>咖啡</dt>
  <dd>- 一种黑热饮料</dd>
  <dt>牛奶</dt>
  <dd>- 一种白冷饮料</dd>
</dl>

让我试试

嵌套的HTML列表

列表可以嵌套（列表内嵌套列表）:

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

让我试试

注意: 列表可以包含新的列表，和其他的HTML元素，如图片、链接等。

水平列表

HTML列表可以通过使用CSS样式，以不同的样式展示。

一种流行的方法是使用水平列表，创建菜单：

<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <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>

让我试试

本章小结

  • 使用 HTML <ul> 元素定义一个无序列表
  • 使用 CSS list-style-type 属性定义列表项标记
  • 使用 HTML <ol> 定义一个有序列表的元素
  • 使用 HTML type 属性定义编号类型
  • 使用 HTML <li> 元素定义一个列表项
  • 使用 HTML <dl> 元素定义一个描述列表
  • 使用 HTML <dt> 元素定义描述项
  • 使用 HTML <dd> 元素描述描述列表中的术语
  • 列表可以嵌套在列表中
  • 列表项可以包含其他HTML元素
  • 使用CSS float:left 或者 display:inline 属性可以显示一个水平列表

HTML列表标签

标签 描述
<ul> 定义一个无序列表
<ol> 定义一个有序列表
<li> 定义一个列表项
<dl> 定义描述列表
<dt> 在描述列表中定义一个术语
<dd> 描述描述列表中的术语