-
列表标签概述
表格是用来显示数据的,而列表则是用来布局页面的。列表最大的特点就是整齐有序。
根据使用场景不同,列表可分为三类:无序列表、有序列表和自定义列表。 -
无序列表
使用<ul>
标签表示HTML页面中项目的无序列表,列表中的项使用<li>
标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
……
</ul>
无序列表特点:
- 无序列表的各个列表项之间无顺序之分。
<ul></ul>
中只能嵌套<li></li>
,无法在<ul></ul>
标签中插入其他标签或文字。<li></li>
标签中可以容纳所有元素。- 无序列表会带有自己的样式属性,但在实际使用中,我们会使用CSS来设置。
- 有序列表
在HTML文档中,使用<ol></ol>
标签用于定义有序列表,列表排序以数字来显示,并且使用<li></li>
标签来定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
……
</ol>
有序列表特点
-
有序列表中的元素会自动根据输入顺序排序。
-
<ol></ol>
中只能嵌套<li></li>
,无法在<ol></ol>
标签中插入其他标签或文字。 -
<li></li>
标签中可以容纳所有元素。 -
有序列表会带有自己的样式属性,但在实际使用中,我们会使用CSS来设置。
-
自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何符号。
在HTML文档中,使用<dl></dl>
标签用于定义描述列表,该标签会和<dt></dt>
(定义项目)和<dd></dd>
(描述项目)一起使用。
<dl>
<dt>项目1</dt>
<dd>项目内容1</dd>
<dd>项目内容2</dd>
</dl>
自定义列表特点
<dl></dl>
里面只能包含<dt></dt>
和<dd></dd>
。
<dt></dt>
和<dd></dd>
没有个数限制,经常是一个<dt></dt>
对应多个<dd></dd>
。
- 各列表标签应用场景区分:
当列表中元素并列出现时,使用无序列表,例如网页中的推荐页面;当列表元素呈现明显顺序时,使用有序列表,例如排行榜;当列表元素具有类似父子关系的关系时,使用自定义列表,例如网页中最下方的内容。