图文详解HTML中有序列表、无序列表和自定义列表的区别

在页面布局时,经常会用到列表,列表分为有序列表无序列表和自定义列表,那你知道有序列表、无序列表和自定义列表之间的区别吗?这篇文章就给大家介绍有序列表、无序列表和自定义列表分别用什么标签,以及三者之间的区别,有一定的参考价值,感兴趣的朋友可以看看。

一、无序列表

标签用来定义无序列表,将 标签与 标签一起使用,就可以创建无序列表。

举例:用无序列表列举四大名著,代码如下:


登录后复制登录后复制   红楼梦   水浒传   三国演义   西游记

效果图:

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

图片1.jpg

无序列表属性type,默认的样式是小黑圆,就是disc,type属性有disc(实心圆默认)、circle(空心圆)、square(实心正方形)、none(取消前缀)。

 二、有序列表

标签可以定义有序列表,将 标签与 标签一起使用,就可以创建有序列表,列表排序以数字来显示。

示范代码如下:

       
  1. 红楼梦
  2.    
  3. 水浒传
  4.    
  5. 三国演义
  6.    
  7. 西游记

登录后复制

效果图:

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

图片2.jpg

有序列表有两个属性,分别是type和start。 type有五个属性值:1、a、A、i、I(罗马数字),用来表示列表前缀的样式。start表示从type类型的第几个数字开始,比如当type=“a”,start=“4”,指选择的是小写字母类型,从第四个字母d开始列举。

三、自定义列表

标签可以定义描述列表, 标签与 和 一起使用,创建自定义列表(描述列表)。

示范代码如下:


登录后复制登录后复制     中国四大名著       红楼梦      西游记       水浒传       三国演义

效果图:

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

图片3.jpg

自定义列表(描述列表)中,在dt和dd中有了一个缩进。

有序列表、无序列表和自定义列表的区别:

有序列表和无序列表都有前缀,但是有序列表是大写字母、小写字母、数字和罗马数字等,而无序列表的前缀是实心圆、空心圆、实心正方形。自定义列表与有序列表,无序列表的区别是它有缩进而没有前缀。

【相关教程推荐】

1. CSS3视频教程
2. CSS3视频教程
3. CSS3视频教程

以上就是图文详解HTML中有序列表、无序列表和自定义列表的区别的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月9日 03:48:20
下一篇 2025年3月9日 03:48:25

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

相关推荐

  • html和css的面试知识点总结(附示例)

    本篇文章给大家带来的内容是关于html和css的面试知识点总结(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS优先级算法 优先级就近原则,同权重情况下样式定义最近者为准载入样式以最后载入的定位为准优先级为:…

    编程技术 2025年3月9日
    200
  • HTML学习之html列表介绍(代码实例)

    本篇文章就给大家带来html学习之html列表介绍,通过简单的代码示例来介绍。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 一,效果图。 二,代码。 html 列表 An Unordered list Cofferr t…

    2025年3月9日
    200
  • 如何选择Web前端模板引擎(推荐)

    本篇文章给大家带来的内容是关于如何选择web前端模板引擎(推荐),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 模板引擎负责组装数据,以另外一种形式或外观展现数据。 浏览器中的页面是 Web 模板引擎最终的展现。 无论你是…

    2025年3月9日
    200
  • html中form表单的内标签是什么?如何使用 ?

    本篇文章给大家带来的内容是介绍html中form表单的内标签是什么?如何使用 ?。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。 表单标记  1.普通文本框:  登录后复制 2.密码框: 登录后复制登录后复制登录后复制登录后…

    2025年3月9日 编程技术
    200
  • HTML如何制作百度首页?代码是什么

    本篇文章给大家带来的内容是关于HTML如何制作百度首页?代码是什么,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 制作百度首页时候,除了要用到p进行分块,还需要对快的位置进行控制,一般有 对p进行规范大小width,hei…

    2025年3月9日
    200
  • 页面性能优化的方法总结

    本篇文章给大家带来的内容是关于页面性能优化的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 互联网有一项著名的8秒原则。用户在访问web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问…

    2025年3月9日 编程技术
    200
  • html标签元素有哪些种类?html的常用标签元素的介绍

    本篇文章给大家带来的内容是介绍html标签元素的种类,让大家了解html中常用的标签元素有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下html标签元素可以分成哪些类型? HTML中标签元素一般会…

    2025年3月9日
    200
  • html怎么设置字体的加粗效果

    html设置字体加粗效果的方法:首先创建一个HTML示例文件;然后在body中定义一个div;最后通过使用标签来设置字体的加粗效果即可。 本文操作环境:Windows7系统、Dell G3电脑、HTML5&&CSS3版。 h…

    2025年3月9日
    200
  • 详解html中strong标签如何设置字体加粗?(代码示例)

    html中标签如何设置字体加粗?本篇文章给大家介绍html中标签是什么,有什么作用,让大家可以了解html中的标签设置字体加粗的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下标签的意思与作用。 标…

    2025年3月9日
    200
  • html中b标签与strong标签有什么区别?b标签与strong标签的简单比较

    html中b标签与strong标签有什么区别?本篇文章就给大家通过简单的b标签与strong标签比较,介绍html中b标签与strong标签的区别是什么。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来看看标签和…

    2025年3月9日
    200

发表回复

登录后才能评论