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>
输出:
- Aries
- Bingo
- Leo
- Oracle
HTML 无序列表或项目符号列表
在 HTML 无序列表中,所有列表项都用项目符号标记。它也被称为项目符号列表。无序列表以 <ul> 标签开头,列表项以 <li> 标签开头。
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
输出:
- Aries
- Bingo
- Leo
- Oracle
HTML 描述列表或定义列表
HTML Description list也是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>
输出:
- Aries
-One of the 12 horoscope sign.
- Bingo
-One of my evening snacks
- Leo
-It is also an one of the 12 horoscope sign.
- Oracle
-It is a multinational technology corporation.
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>
输出:
支持浏览器
元素 | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
<ol><ul><dl> | Yes | Yes | Yes | Yes | Yes |