HTML提供了几种列表模式

青灯夜游

发布时间：2021-11-17 16:41:50

8821人浏览过

来源于php中文网

原创

HTML提供了3种列表模式：1、有序列表，使用“”和“”标签创建，有序列表之间的内容有先后顺序之分；2、无序列表，使用“”和“”标签创建；3、定义列表，使用“”、“”和“”标签创建。

HTML提供了几种列表模式

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

HTML 列表（List）可以将若干条相关的内容整理起来，让内容看起来更加有条理。在列表内您可以放置文本、图像、链接等，也可以在一个列表中定义另一个列表（列表嵌套）。

HTML 为我们提供了三种不同形式的列表：

有序列表，使用

标签

无序列表，使用

标签
定义列表，使用
+
+

标签

1. 有序列表

在 HTML 中，

立即学习“前端免费学习笔记（深入）”；

我们来看一个简单的实例：

HTML有序列表

煮米饭的步骤：

将水煮沸
加入一勺米
搅拌均匀
继续煮10分钟

有序列表需要使用

标签：

是 list item 的简称，表示列表的每一项，
1. 就表示有多少条内容。列表项中可以包含文本、图片、链接等，甚至还可以是另外一个列表。

注意，

配合使用，不会单独出现，而且不建议在

之外的其他标签。

2. 无序列表

HTML 使用

标签来表示列表的每一项，但是无序列表之间的内容没有顺序。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。

我们来看一个简单的例子：

复制纯文本复制

HTML无序列表

早餐的种类：

网趣购物系统加强升级版

新版本程序更新主要体现在：完美整合BBS论坛程序，用户只须注册一个帐号，即可全站通用!采用目前流行的Flash滚动切换广告变换形式多样，受人喜爱!在原有提供的5种在线支付基础上增加北京云网支付!对留言本重新进行编排，加入留言验证码，后台有留言审核开关对购物系统的前台进行了一处安全更新。在原有文字友情链接基础上，增加LOGO友情链接功能强大的6种在线支付方式可选，自由切换。对新闻列表进行了调整，

下载

鸡蛋
牛奶
面包
生菜

HTML无序列表

早餐的种类：

鸡蛋
牛奶
面包
生菜

浏览器运行结果如图所示：

无序列表需要使用

标签：

1. 一样，都表示列表中的每一项。默认情况下，无序列表的每一项都使用●符号表示。

注意，

配合使用，不会单独出现，而且不建议在

之外的其他标签。

3. 定义列表

在 HTML 中，

标签用于创建定义列表。定义列表由标题（术语）和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。

定义列表具体语法格式如下：


    标题1

    
描述文本2

    
标题2

    
描述文本2

    
标题3

    
描述文本3

定义列表需要使用

和

标签：

是 definition list 的简称，表示定义列表。
是 definition term 的简称，表示定义术语，也就是我们说的标题。
是 definition description 的简称，表示定义描述。

可以认为

定义了一个概念（术语），

用来对概念（术语）进行解释。

注意，

和

是同级标签，它们都是

搭配一个

，一个

和

。

我们来看一个简单的例子：




    
    HTML定义列表


    
        HTML
        HTML 是一种专门用来开发网页的标记语言，您可以转到《HTML教程》了解更多。
        CSS
        CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页，您可以转到《CSS教程》了解更多。
        JavaScript
        JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言，您可以转到《JS教程》了解更多。

和

虽然是同级标签，但是它们的默认样式不同，

带有一段缩进，而

顶格显示，这样层次更加分明。 4. 总结 列表分类说明 有序列表 表示有序列表， 表示列表中的每一项，默认使用阿拉伯数字编号。 无序列表 表示无序列表， 表示列表中的每一项，默认使用●符号作为作为每一项的标记。 定义列表 表示定义列表， 表示定义术语、 表示定义描述。一般情况下，每个 搭配一个 ，一个 可以包含多对 和 。 推荐教程：《html视频教程》

列表分类	说明
有序列表	表示有序列表，表示列表中的每一项，默认使用阿拉伯数字编号。
无序列表	表示无序列表，表示列表中的每一项，默认使用`●`符号作为作为每一项的标记。
定义列表	表示定义列表，表示定义术语、表示定义描述。一般情况下，每个搭配一个，一个可以包含多对和。