HTML列表 - 珊瑚贝

本文概述

HTML有序列表或编号列表
HTML无序列表或项目符号列表
HTML说明列表或定义列表
HTML嵌套列表
支持的浏览器

HTML列表用于指定信息列表。所有列表可能包含一个或多个列表元素。有三种不同类型的HTML列表：

有序列表或编号列表（ol）
无序列表或项目符号列表（ul）
说明列表或定义列表（dl）

注意：我们可以在另一个列表中创建一个列表, 该列表称为嵌套列表。

HTML有序列表或编号列表

在排序的HTML列表中, 默认情况下, 所有列表项都标有数字。也称为编号列表。有序列表以<ol>标记开头, 列表项以<li>标记开头。

<ol>
 <li>Aries</li>
 <li>Bingo</li>
 <li>Leo</li>
 <li>Oracle</li>
</ol>

立即测试

输出：

白羊座
答对了
狮子座
甲骨文

单击此处以获取HTML有序列表的完整详细信息。 HTML有序列表

HTML无序列表或项目符号列表

在“ HTML无序”列表中, 所有列表项都用项目符号标记。它也被称为项目符号列表。无序列表以<ul>标记开头, 列表项以<li>标记开头。

<ul>
 <li>Aries</li>
 <li>Bingo</li>
 <li>Leo</li>
 <li>Oracle</li>
</ul>

立即测试

输出：

白羊座
答对了
狮子座
甲骨文

单击此处, 获取HTML无序列表的完整详细信息。 HTML无序列表

HTML说明列表或定义列表

HTML说明列表也是HTML和XHTML支持的列表样式。这也称为定义列表, 其中条目如字典或百科全书一样列出。

当你要显示词汇表, 术语列表或其他名称/值列表时, 定义列表非常合适。

HTML定义列表包含以下三个标签：

<dl>标记定义列表的开始。
<dt>标签定义一个术语。
<dd>标签定义术语定义（描述）。

<dl>
  <dt>Aries</dt>
  <dd>-One of the 12 horoscope sign.</dd>
  <dt>Bingo</dt>
  <dd>-One of my evening snacks</dd>
 <dt>Leo</dt>
 <dd>-It is also an one of the 12 horoscope sign.</dd>
  <dt>Oracle</dt>
  <dd>-It is a multinational technology corporation.</dd> 
</dl>

立即测试

输出：

白羊座

-12个星座之一。

答对了

-我的晚间小吃之一

狮子座

-这也是十二个星座之一。

甲骨文

-这是一家跨国技术公司。

单击此处以获取HTML描述列表的完整详细信息。 HTML说明清单

HTML嵌套列表

另一个列表中的列表称为嵌套列表。如果要在编号列表中包含项目符号列表, 则这种类型的列表将称为嵌套列表。

码：

<!DOCTYPE html>
<html>
<head>
	<title>Nested list</title>
</head>
<body>
	<p>List of Indian States with thier capital</p>
<ol>
	<li>Delhi
		<ul>
			<li>NewDelhi</li>
		</ul>
	</li>
	<li>Haryana
		<ul>
			<li>Chandigarh</li>
		</ul>
	</li>
	<li>Gujarat
		<ul>
			<li>Gandhinagar</li>
		</ul>
	</li>
	<li>Rajasthan 
		<ul>
			<li>Jaipur</li>
		</ul>
	</li>
	<li>Maharashtra
		<ul>
			<li>Mumbai</li>
		</ul>
	</li>
	<li>Uttarpradesh
		<ul>
			<li>Lucknow</li></ul>
	</li>
</ol>
</body>
</html>

立即测试

输出：