Dotcpp  >  编程教程  >  HTML语法  >  HTML列表标签

HTML列表标签

点击打开在线编译器,边学边练

一、列表标签是什么?

什么是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>定义定义的描述。



本文固定URL:https://www.dotcpp.com/course/1109

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)