HTML列表

本文概述

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

  1. 有序列表或编号列表(ol)
  2. 无序列表或项目符号列表(ul)
  3. 说明列表或定义列表(dl)

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


HTML有序列表或编号列表

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

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

立即测试

输出:

  1. 白羊座
  2. 答对了
  3. 狮子座
  4. 甲骨文

单击此处以获取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定义列表包含以下三个标签:

  1. <dl>标记定义列表的开始。
  2. <dt>标签定义一个术语。
  3. <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>

立即测试

输出:

HTML列表

支持的浏览器

Element Chrome IE Firefox Opera Safari
<ol><ul><dl> Yes Yes Yes Yes Yes

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?