HTML提供了几种列表模式

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

HTML提供了几种列表模式

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

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

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

有序列表,使用 + 标签无序列表,使用 + 标签定义列表,使用 + + 标签

1. 有序列表

在 HTML 中,

标签用来表示有序列表。有序列表之间的内容有先后顺序之分,例如菜谱中的一系列步骤,这些步骤需要按顺序完成,这时就可以使用有序列表。

立即学习“前端免费学习笔记(深入)”;

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

nbsp;html>        HTML有序列表    

煮米饭的步骤:

    
            
  1. 将水煮沸
  2.         
  3. 加入一勺米
  4.         
  5. 搅拌均匀
  6.         
  7. 继续煮10分钟
  8.     

登录后复制

1.png

有序列表需要使用

和 标签: 是 order list 的简称,表示有序列表,它可以为列表的每一项进行编号,默认从数字 1 开始。 是 list item 的简称,表示列表的每一项, 中有多少个 就表示有多少条内容。列表项中可以包含文本、图片、链接等,甚至还可以是另外一个列表。

注意,

一般和 配合使用,不会单独出现,而且不建议在 中直接使用除 之外的其他标签。

2. 无序列表

HTML 使用

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

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

复制纯文本复制

登录后复制

nbsp;html>        HTML无序列表    

早餐的种类:

    

登录后复制        鸡蛋        牛奶        面包        生菜    

nbsp;html>        HTML无序列表    

早餐的种类:

    

登录后复制        鸡蛋        牛奶        面包        生菜    

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

2.png

无序列表需要使用

和 标签: 是 unordered list 的简称,表示无序列表。 和 中的 一样,都表示列表中的每一项。默认情况下,无序列表的每一项都使用●符号表示。

注意,

一般和 配合使用,不会单独出现,而且不建议在 中直接使用除 之外的其他标签。

3. 定义列表

在 HTML 中,

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

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


登录后复制    标题1    描述文本2    标题2    描述文本2    标题3    描述文本3

定义列表需要使用

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

可以认为

定义了一个概念(术语), 用来对概念(术语)进行解释。

注意,

和 是同级标签,它们都是 的子标签。一般情况下,每个 搭配一个 ,一个 可以包含多对 和 。

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

nbsp;html>        HTML定义列表    

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

3.png

和 虽然是同级标签,但是它们的默认样式不同, 带有一段缩进,而 顶格显示,这样层次更加分明。

4. 总结

列表分类 说明

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

推荐教程:《html视频教程》

以上就是HTML提供了几种列表模式的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2944203.html

(0)
上一篇 2025年3月11日 22:22:40
下一篇 2025年3月11日 22:22:47

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • html、css容易被忽略的小知识点_html/css_WEB-ITnose

    都说前端容易,谁说的。前端上手快,越往后学习越困难。学习前端快一年了,依然发现一些小的知识点不会。这些经验性的东西不碰到永远学不会。 (1)title前面的logo。 就像这个编辑文章前面的logo。不知道大家知不知道这个图标是如何加载过来…

    编程技术 2025年4月4日
    100
  • html节点属性操作

    nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> …

    编程技术 2025年4月4日
    100
  • html教程:用tabIndex轻松实现网页导航

    最近,当我在一个网站上输入表格数据时,我填写了一栏,并点击[tab]键移到下一栏;当我抬头时,我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中,但不久[tab]键又再次出现问题。这一情形使我想了解一下页面设计,以及t…

    编程技术 2025年4月4日
    100
  • html教程:WEB标准从头开始_DOCTYPE声明

    在较早之前的网页上,我们经常可以看到如下的网页结构代码: 这是一个网页 …… 立即学习“前端免费学习笔记(深入)”; …… 立即学习“前端免费学习笔记(深入)”; 很显然的,这种结构的网页代码是不符合Web标准规范的,但是浏览器仍然可以很好…

    编程技术 2025年4月4日
    100
  • 一步步学习html—-第一课

    在讲授第一课的时候,首先要给大家表明的一个概念是:我们学习的是一门语言,而不是一个编译工具,所以我们要习惯在编写程序的时候忽略编译工具的概念,因为只有忽略了编译工具,才能真正意义上的明白一门语言的精髓在哪里,也才能真正掌握一门语言到底是怎么…

    编程技术 2025年4月4日
    100
  • 一步步学习html—-第三课

    经过前面两课的学习,不知道你们对于什么是html有没有了一定程度上的了解,今天的第三课算是第一阶段的一个总结,会加入一点新的内容,但是更多的是会做总结,好了,废话不说了,进入今天的课程吧!在前两课的基础上,这一课主要是加入了一个插入图片的问…

    编程技术 2025年4月4日
    100
  • 一步步学习html—-第四课

    这一课我们主要讲解一下链接的问题:这个也可以定义为超文本链接,标签则是这个标签的全称是anchor,中文意思是锚;例子:http://www.baidu.com”>click!在网页上就会出现一个链接,其文本表现形式就是正…

    编程技术 2025年4月4日
    100
  • HTML的分段与换行代码说明

    在网页的排版中,经常会对文本进行分段和换行的操作,这两种操作由 标签 和标签来实现。 1、 -段落标签 p是英文单词“paragraph”的首字母,用来定义网页中的一段文本, 一般是成对出现。 2、-换行标签 br是英文单词“break”的…

    编程技术 2025年4月4日
    100
  • HTML的标题设置代码

    在word文档中,标题往往都需要格外醒目,例如加粗字体较大等。同样地在html文档中也可以设置标题以同样的格式显示。 我们可以用html标题标签来设置标题,一共有6个标题标签,从 到 ,数字越小,级别越高,文字也相应越大。 下面通过实例介绍…

    编程技术 2025年4月4日
    100
  • HTML的列表代码说明

    在编辑文档时,有时希望某些内容以列表形式显示出来,是其结构化和条理化。在html文档中,html列表标签主要分为序号列表和项目列表,前者是每个列表项都有个数字编号,后者则在每个列表项前有个圆点符号。 1、序号列表(也称为有序列表) 序号列表…

    编程技术 2025年4月4日
    100

发表回复

登录后才能评论