html 列表由 （顺序列表）<ol> 和（无序列表） <ul> 标签创建。可以使用属性或 CSS 进行修饰。
还有一种是描述列表： 由 <dl>、<dt> 和 <dd> 标签创建。
HTML 列表
HTML 提供三种指定信息列表的方法：有序列表、无序列表、描述列表。所有列表必须包含一个或多个列表项。
HTML 列表示例
在下面的例子中，我们将看到无序列表、有序列表、描述列表及其变体，也将使用 CSS 来装饰列表。
HTML 无序列表
通过使用 html <ul> & <li> 标签，我们可以创建一个无序列表。
下面在无序列表中创建 5 个项目。
<!DOCTYPE html>
<html>
<head>
<title>HTML 列表</title>
</head>
<body>
<h2>HTML 列表示例</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ul>
</body>
</html>
HTML 有序列表
排序列表默认用数字标记，也可以将数字转换为字母、罗马数字等。
下面创建 5 个项目的数字排序列表。
<!DOCTYPE html>
<html>
<head>
<title>HTML 列表</title>
</head>
<body>
<h2>HTML 列表示例</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ol>
</body>
</html>
HTML 描述列表
描述列表是带有描述的项目列表，要创建描述列表，我们可以使用 <dl>、<dt> 和 <dd> 标签。
下面创建带有描述的 3 个描述列表。
<!DOCTYPE html>
<html>
<head>
<title>HTML 列表</title>
</head>
<body>
<h2>HTML 列表示例</h2>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>级联样式表</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
</body>
</html>
HTML 嵌套列表
在另一个列表中创建列表称为嵌套列表。HTML 允许将列表嵌套在一起以生成复杂的文档结构。
下面将无序列表嵌套在有序列表中。
<!DOCTYPE html>
<html>
<head>
<title>HTML 列表</title>
</head>
<body>
<h2>HTML嵌套列表示例</h2>
<ol>
<li>项目 1</li>
<li>项目 2
<ul>
<li>分项目 A</li>
<li>分项目 B</li>
</ul>
</li>
<li>项目三</li>
</ol>
</body>
</html>
使用 <div> 标签分组
为了增强样式和布局，列表通常包装在 <div> 标签中。这种分组有助于应用一致的样式并创建具有视觉吸引力的列表结构。
下面使用 div 标签对无序列表进行分组。
<!DOCTYPE html>
<html>
<head>
<title>HTML 列表</title>
</head>
<body>
<h2>使用div标签对HTML列表元素进行分组</h2>
<div>
<p>第一个列表</p>
<ol>
<li>项目 1</li>
<li>项目 2</li>
</ol>
</div>
<div>
<p>第二个列表</p>
<ol>
<li>项目 3</li>
<li>项目 4</li>
</ol>
</div>
</body>
</html>
给列表指定 CSS 样式
可以使用 CSS 设置列表样式以增强视觉呈现。自定义样式可以应用于列表项，从而创建独特且具有视觉吸引力的设计。为此，我们使用 <style> 标签，这是一种指定内部 CSS 的方法。
下面使用样式标签将 CSS 应用于 HTML 列表。
<!DOCTYPE html>
<html>
<head>
<title>HTML 列表</title>
<style>
li {
font-size: 16px;
}
div {
color: red;
}
</style>
</head>
<body>
<h2>带CSS的HTML列表</h2>
<div>
<p>第一个列表</p>
<ol>
<li>项目 1</li>
<li>项目 2</li>
</ol>
</div>
<div>
<p>第二个列表</p>
<ol>
<li>项目 3</li>
<li>项目 4</li>
</ol>
</div>
</body>
</html>
HTML 列表的标签类型
CSS 允许自定义列表项的标签类型。为此，我们使用 CSS 的 list-style-type 属性，该属性可以设置为将标签更改为圆形、正方形或其他符号。
在此示例中，我们使用 CSS 的 list-style-type 属性来设置列表项的类型。
<!DOCTYPE html>
<html>
<head>
<title>HTML 列表</title>
<style>
li {
font-size: 16px;
list-style-type: square;
}
</style>
</head>
<body>
<h2>HTML list-style-type 属性</h2>
<div>
<p>第一个列表</p>
<ol>
<li>项目 1</li>
<li>项目 2</li>
</ol>
</div>
<div>
<p>第二个列表</p>
<ol>
<li>项目 3</li>
<li>项目 4</li>
</ol>
</div>
</body>
</html>
