一、列表标签是什么?
什么是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>。
总结:列表标签
标签 | 描述 |
<ol> | 定义有序列表。 |
<ul> | 定义无序列表。 |
<li> | 定义列表项。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义项目。 |
<dd> | 定义定义的描述。 |
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:
一点编程也不会写的:零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码?手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程