一、列表标签是什么?
什么是HTML列表?把内容制成表,以表显示容器里面装载着文字或图表的一种形式,叫做列表。列表最大的特点就是整齐、整洁、有序。
列表标签的作用:给一堆数据添加列表语义,也就是告诉搜索引擎/浏览器这一堆数据是一个整体。
二、列表标签分类
HTML 的列表分为有序、无序和定义列表:
(1)有序列表,使用 <ol> + <li> 标签
(2)无序列表,使用 <ul> + <li> 标签
(3)定义列表,使用 <dl> + <dt> + <dd> 标签
1. 无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<html><body><!--一个无序列表:--><ul><li>咖啡</li><li>牛奶</li><li>绿茶</li><li>可乐</li><li>酸奶</li></ul></body></html>
最后呈现的结果如图:
无序列表需要使用 <ul> 和 <li> 标签:
(1)<ul> 是 unordered list 的简称,表示无序列表。
(2)<ul> 和 <ol> 中的 <li> 一样,都表示列表中的每一项。默认情况下,无序列表的每一项都使用●符号表示。
注意:<ul> 一般和 <li> 配合使用,不会单独出现,而且不建议在 <ul> 中直接使用除 <li> 之外的其他标签。
2. 有序列表
有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<html><body><!--一个有序列表:--><ol><li>咖啡</li><li>牛奶</li><li>绿茶</li><li>可乐</li><li>酸奶</li></ol></body></html>
最后呈现的结果如图:
有序列表需要使用 <ol> 和 <li> 标签:
(1)<ol> 是 order list 的简称,表示有序列表,它可以为列表的每一项进行编号,默认从数字 1 开始。
(3)<li> 是 list item 的简称,表示列表的每一项,<ol> 中有多少个 <li> 就表示有多少条内容。列表项中可以包含文本、图片、链接等,甚至还可以是另外一个列表。
注意:<ol> 一般和 <li> 配合使用,不会单独出现,而且不建议在 <ol> 中直接使用除 <li> 之外的其他标签。
3. 定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<html><body><!--一个有序列表:--><dl><dt>咖啡</dt><dd>热饮</dd><dt>牛奶</dt><dd>冷饮</dd></dl></body></html>
最后呈现的结果如图:
定义列表需要使用 <dl>、<dt> 和 <dd> 标签:
(1)<dl> 是 definition list 的简称,表示定义列表。
(2)<dt> 是 definition term 的简称,表示定义术语,也就是我们说的标题。
(3)<dd> 是 definition description 的简称,表示定义描述 。
可以认为 <dt> 定义了一个概念(术语),<dd> 用来对概念(术语)进行解释。
注意:<dt> 和 <dd> 是同级标签,它们都是 <dl> 的子标签。一般情况下,每个 <dt> 搭配一个 <dd>,一个 <dl> 可以包含多对 <dt> 和 <dd>。
总结:列表标签