HTML 列表
HTML 列表是显示信息的常用元素,它可以将有序的和无序的信息分类、展示,这给用户带来了便利。本文将介绍 HTML 中的三种列表:有序列表、无序列表和定义列表。
有序列表
有序列表用于递增的项目,其项目标志为数字。以下是创建有序列表的代码示例:
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
在此代码示例中,<ol>
表示有序列表的开始标志,</ol>
表示有序列表的结束标志,<li>
表示列表项的开始标志,</li>
表示列表项的结束标志。<ol>
标签可以包含多个 <li>
标签。上述代码将会输出以下结果:
- 第一项
- 第二项
- 第三项
有序列表还有一些属性可以使用,例如:
type
:可以设置列表项的序号类型,可选值包括阿拉伯数字(默认值)、大写字母、小写字母、罗马数字等。
<ol type="A">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
将会输出以下结果:
A. 第一项 B. 第二项 C. 第三项
start
:可以设置列表项的起始值。
<ol start="4">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
将会输出以下结果:
- 第一项
- 第二项
- 第三项
无序列表
无序列表用于不递增的项目,其项目标志为符号。以下是创建无序列表的代码示例:
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
在此代码示例中,<ul>
表示无序列表的开始标志,</ul>
表示无序列表的结束标志,<li>
表示列表项的开始标志,</li>
表示列表项的结束标志。<ul>
标签可以包含多个 <li>
标签。上述代码将会输出以下结果:
- 第一项
- 第二项
- 第三项
无序列表也有一些属性可以使用,例如:
type
:可以设置列表项的符号类型,可选值包括实心点(默认值)、实心圆、空心圆、空心正方形等。
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
将会输出以下结果:
○ 第一项 ○ 第二项 ○ 第三项
定义列表
定义列表用于将名称和值成对地展示,其项目标志为名称项。以下是创建定义列表的代码示例:
<dl>
<dt>名称</dt>
<dd>值</dd>
<dt>名称</dt>
<dd>值</dd>
</dl>
在此代码示例中,<dl>
表示定义列表的开始标志,</dl>
表示定义列表的结束标志,<dt>
表示名称项的开始标志,</dt>
表示名称项的结束标志,<dd>
表示值项的开始标志,</dd>
表示值项的结束标志。<dl>
标签可以包含多对 <dt>
和 <dd>
标签。上述代码将会输出以下结果:
名称
值
名称
值
定义列表还有一个属性 compact
可以使用,可将列表缩小,具体效果可以见实际效果。
以上就是 HTML 中的三种列表的介绍,适当使用列表可以使文档更加直观明了,为用户提供更好的浏览体验。