HTML - 列表_HTML 菜鸟教程

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>

<< HTML - 嵌套表格 HTML - 无序列表 >>