Html 简明教程
HTML - Lists
HTML List is a collection of related infomation. The lists can be ordered or underdered depending on the requirement. In html we can create both order and unorder lists by using <ol> and <ul> tags. Each type of list can be decorated using porper attributes or CSS also. There is one more list which is description list - HTML <dl>, <dt> & <dd> tag are used to create description lists.
Lists in HTML
-
由于 HTML 提供了三种方法来指定信息列表，即有序列表、无序列表和定义列表。所有的列表都必须包含一个或多个列表项之一。
As HTML offers three ways for specifying lists of information namely ordered, unordered, and definition lists. All lists must contain one or more list items.
尝试单击图标运行按钮，以运行以下 HTML 代码并查看输出。
Try to click the icon run button to run the following HTML code to see the output.
Examples of HTML Lists
-
在下面的示例中，我们将看到无序列表、有序列表、描述列表及其变体，还将使用 CSS 来修饰列表。
In the below examples we will see unorder list, order list, description lists, and their variation as well, will use CSS to decorate the list.
Example
在这个示例中，我们将在无序列表中创建 5 项。
In this example we will create 5 items in a unorder list.
<!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 Order Lists
Example
在这个示例中，我们将在有序列表中创建 5 项，尝试使用 type 属性更改数字标记。
In this example we will create 5 items in a order list, try to use the type attribute to chnage numeric order marking.
<!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>Example
在这个示例中，我们将创建 3 个带有描述的描述列表。
In this example we will create 3 description list with the descripion.
<!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 Nested Lists
在另一个列表中创建的列表称为 Nested List 。HTML 也允许在列表中嵌套列表，以生成复杂的文档结构。
A list created within another list is known as Nested List. HTML also allow nesting of lists within one another to generate a complex document structures.
Example
在下面的示例中，我们在有序列表中嵌套无序列表。
In the following example, we are nesting an unordered list within an ordered list.
<!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>Grouping with the <div> Tag
为了增强样式和布局，列表通常封装在 * <div>* 元素中。此分组有助于应用一致的样式并创建视觉上吸引人的列表结构。
To enhance styling and layout, lists are often wrapped inside the <div> elements. This grouping aids in applying consistent styles and creating visually appealing list structures.
Example
在这个示例中，我们使用 div 标记对无序列表进行分组。
In this example, we are grouping unordered lists with div tag.
<!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>Applying CSS to HTML List
可以使用 CSS 对列表进行样式化，以增强视觉效果。可以将自定义样式应用于列表项，创建独特且视觉上吸引人的设计。为此，我们使用 * <style>* 标记，这是指定内部 CSS 的一种方法。
Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items, creating unique and visually appealing designs. For this, we use the <style> tag which is a way of specifying internal CSS.
Example
以下示例展示了如何使用 style 標籤將 CSS 套用於 HTML 清單。
The following example demonstrate how to apply CSS to the HTML list using style tag.
<!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>Marker Types in HTML Lists
CSS 允許自訂清單項目符號類型。為此，我們使用 CSS * list-style-type* 屬性，它可以設定為將符號變更為圓圈、方塊或其他符號。
CSS allows customization of marker types for list items. To do so, we use the CSS list-style-type property which can be set to change markers to circles, squares, or other symbols.
Example
在這個範例中，我們使用 list-style-type CSS 屬性來設定清單項目符號。
In this example, we are using the list-style-type property of CSS to set the markers of list items.
<!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>