HTML - 列表

HTML 列表是相关信息的集合。列表可以根据要求进行排序或排序。在html中，我们可以使用<ol>和<ul>标签创建顺序和无序列表。每种类型的列表都可以使用 porper 属性或 CSS 进行修饰。还有一个列表是描述列表 - HTML <dl>、<dt> 和 <dd> 标签用于创建描述列表。

HTML 中的列表

由于 HTML 提供了三种指定信息列表的方法，即有序列表、无序列表和定义列表。所有列表必须包含一个或多个列表项。

HTML 列表示例

在下面的例子中，我们将看到无序列表、订单列表、描述列表及其变体，也将使用 CSS 来装饰列表。

HTML 取消排序列表

无序列表用项目符号标记，通过使用 html <ul> & <li> 标签，我们可以创建一个无序列表。这也称为取消排序列表。

例

在此示例中，我们将在无序列表中创建 5 个项目。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML List</title>
</head>
<body>
	 <h2>Example of HTML List</h2>
	 <ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>Java</li>
			<li>JavaFX</li>
	 </ul>
</body>
</html>

HTML 订单列表

订单列表默认用数字标记，我们可以将数字转换为字母、罗马数字等。通过使用 html <ol> & <li> 标签，我们可以创建一个订单列表，并使用 type 属性，我们可以更改默认的数字标记。

例

在此示例中，我们将在订单列表中创建 5 个项目，尝试使用 type 属性来更改数字订单标记。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML List</title>
</head>
<body>
	 <h2>Example of HTML List</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 List</title>
</head>
<body>
		<h2>Example of HTML List</h2>
		<dl>
				<dt>HTML</dt>
				<dd>HyperText markup languague</dd>
				<dt>CSS</dt>
				<dd>Cascading Style Sheet</dd>
				<dt>JS</dt>
				<dd>JavaScript</dd>
		</dl>
</body>
</html>

HTML 嵌套列表

在另一个列表中创建的列表称为嵌套列表。HTML 还允许将列表嵌套在一起以生成复杂的文档结构。

例

在下面的示例中，我们将无序列表嵌套在有序列表中。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML List</title>
</head>
<body>
	 <h2>Example of HTML Nested List</h2>
	 <ol>
			<li>Item One</li>
			<li>Item Two
				 <ul>
						<li>Subitem A</li>
						<li>Subitem B</li>
				 </ul>
			</li>
			<li>Item Three</li>
	 </ol>
</body>
</html>

使用 <div> 标签进行分组

为了增强样式和布局，列表通常包装在 <div> 元素中。这种分组有助于应用一致的样式并创建具有视觉吸引力的列表结构。

例

在此示例中，我们使用 div 标签对无序列表进行分组。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML List</title>
</head>
<body>
	 <h2>Grouping of HTML List elements with div tag</h2>
	 <div>
			<p>First List</p>
			<ol>
				 <li>Item One</li>
				 <li>Item Two</li>
			</ol>
	 </div>
	 <div>
			<p>Second List</p>
			<ol>
				 <li>Item Three</li>
				 <li>Item Four</li>
			</ol>
	 </div>
</body>
</html>

将 CSS 应用于 HTML 列表

可以使用 CSS 设置列表样式以增强视觉呈现。自定义样式可以应用于列表项，从而创建独特且具有视觉吸引力的设计。为此，我们使用 <style> 标签，这是一种指定内部 CSS 的方法。

例

下面的示例演示如何使用样式标签将 CSS 应用于 HTML 列表。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML List</title>
	 <style>
			li {
				 font-size: 16px;
			}
			div {
				 color: red;
			}
	 </style>
</head>
<body>
	 <h2>HTML List with CSS</h2>
	 <div>
			<p>First List</p>
			<ol>
				 <li>Item One</li>
				 <li>Item Two</li>
			</ol>
	 </div>
	 <div>
			<p>Second List</p>
			<ol>
				 <li>Item Three</li>
				 <li>Item Four</li>
			</ol>
	 </div>
</body>
</html>

HTML 列表中的标签类型

CSS 允许自定义列表项的标签类型。为此，我们使用 CSS list-style-type 属性，该属性可以设置为将标签更改为圆形、正方形或其他符号。

例

在此示例中，我们使用 CSS 的 list-style-type 属性来设置列表项的标记。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML List</title>
	 <style>
			li {
				 font-size: 16px;
				 list-style-type: square;
			}
	 </style>
</head>
<body>
	 <h2>HTML list-style-type Property</h2>
	 <div>
			<p>First List</p>
			<ol>
				 <li>Item One</li>
				 <li>Item Two</li>
			</ol>
	 </div>
	 <div>
			<p>Second List</p>
			<ol>
				 <li>Item Three</li>
				 <li>Item Four</li>
			</ol>
	 </div>
</body>
</html>

打印本页