html入门教程(初学者) -HTML列表 - 书目录

html入门教程(初学者) -HTML列表

HTML列表

<!DOCTYPE html>

<html>

<head>

	<title>Fruit</title>

</head>

<body>

	<h1>Favorite Fruit</h1>

	<ul>

		<li>Bananas</li>

		<li>Oranges</li>

	</ul>

</body>

</html>

在上面的例子中,我创建了一个HTML列表并添加了我们的成果。

该列表是使用<ul>标签指定的,每个列表项都使用<li>标签嵌套在内部。

该<ul>元素表示无序列表。这是因为这些项目没有按特定顺序列出。这会在列表中的每个项目前加相同的项目符号。

如果我们想按特定顺序列出项目,我们将使用有序列表。要做到这一点,我们只需将<ul>标签交换为<ol>标签,以便它看起来像这样:

<ol>
	<li>Bananas</li>
	<li>Oranges</li>
</ol>

列表项标签(即,<li>)将保持不变(尽管我们需要确保它们按照正确的顺序列出)。

HTML列表也有助于浏览器了解它也是一个列表。这样它可以以特定的方式呈现列表(例如,用项目符号或数字等)。但是,您可以使用层叠样式表(CSS)更改此设置。实际上,您可以使用CSS更改任何HTML元素的样式。我们稍后在教程中讨论CSS。

列表的类型

HTML包含不同类型列表的各种标签。这是一个解释。

<ul>
该<ul>元素表示无序列表。无序列表是列表项不按特定顺序列出的列表。因此,每个列表项可以被列出而没有数字或其他排序机制。无序列表通常会在每个项目旁边显示圆形或方形的子弹点(而不是数字或字母等)。图像也可以用来创建自己的自定义项目符号。喜欢这个:

<ul>
	<li>Bananas</li>
	<li>Oranges</li>
</ul>
<ol>
此元素表示有序列表。有序清单是故意订购物品的清单。有序列表的要点在于列表项目需要排序才能表达意图的含义。更改订单将改变列表(或文档)的含义。例如,如果我们想按优先顺序显示水果,我们需要使用有序列表。这使我们能够按照偏好的顺序列出水果。通过改变顺序会改变意义。另一个例子是如果我们的水果是配方中的成分列表,并且他们必须按照正确的顺序添加。可以使用十进制数(例如,1. 2. 3. …等),小写拉丁字母(例如abc等),大写拉丁字母(例如ABC …等),小写罗马数字(例如,i。ii。iii。等)或大写的罗马数字(例如I. I. II。III等等)。您可以指定列表是升序(例如,1. 2. 3. …等)还是降序(3. 2. 1. …等)。

<ol>
	<li>Bananas</li>
	<li>Oranges</li>
</ol>
<dl>
代表一个定义列表。在定义列表中,每个列表项都包含两个或多个条目; 一个术语和至少一个描述。该术语由<dt>元素表示,描述由<dd>元素表示。定义列表的一个例子就是你现在正在阅读的定义列表。我在这里列出的三种类型的列表显示在定义列表中。定义列表是这样写的:

<dl>
	<dt>Bananas</dt>
	<dd>A sweet yellow fruit...</dd>
	<dt>Oranges</dt>
	<dd>A sweet orange fruit...</dd>
</dl>

HTML还包含其他列表方法,例如在表单的下拉菜单中提供项目列表,但我们稍后会介绍。

133664

 

英语原文:http://www.html.am/html-tutorial/html-lists.cfm