HTML列表

HTML 列表允许 Web 开发人员在列表中对一组相关项进行分组。

HTML 无序列表

无序列表以 <ul> 标签开头。每个列表项都以 <li> 标记开头。

默认情况下，列表项将标有项目符号（黑色小圆圈）：

示例

<ul>  
 <li>Coffee</li> 
 <li>Tea</li> 
  <li>Milk</li> 
</ul>

HTML 有序列表

有序列表以 <ol> 标签开头。每个列表项都以 <li> 标记开头。

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

示例

<ol>   
<li>Coffee</li>
  <li>Tea</li>  
 <li>Milk</li> 
</ol>

有序列表 - type属性

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

type="1" 列表项将用大写数字编号（默认）
type="A" 项列表项将用大写编号
type="a" 列表项将用小写编号
type="I" 列表项将用大写罗马数字字符
type="i" 列表项将用小写罗马数字编号

当然也可以使用type="10" 直接设置数字编号的开始值。

示例

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol type="10">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML 描述列表

HTML 还支持描述列表。

描述列表是术语列表，其中包含每个术语的描述。

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

示例

<dl>   
<dt>Coffee</dt>   
<dd>- black hot drink</dd>  
 <dt>Milk</dt>  
 <dd>- white cold drink</dd> </dl>

嵌套列表

列表可以嵌套（列表中的列表）：

示例

<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>

注意：列表项 ( <li> ) 可以包含新列表和其他 HTML 元素，如图像和链接等。

水平列表

HTML 列表可以使用 CSS 以多种不同方式设置样式。

一种流行的方法是水平设置列表样式，以创建导航菜单：

示例

<!DOCTYPE html>
<html>
<head>
<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>

<h2>导航菜单</h2>
<p>在本例中，我们使用CSS水平设置列表样式，以创建导航菜单:</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>