HTML列表标签及自定义列表的应用

HTML列表标签及自定义列表的应用1 无序列表无序列表是一个项目的列表 此列项目使用粗体圆点 典型的小黑圆圈 进行标记 无序列表始于 ul 标签 每个列表项始于 li 也可以通过 CSS 改变项目符号 也可以自己设置图片 如 liimgsrc 2 有序列表有序列表也是一列项目 列表项目使用数字进行标记 有序列表始于 ol 标签 每个列表项始于 amp ol liimgsrc li ul

在这里插入图片描述

1.无序列表

    标签。每个列表项始于


  • HTML列表标签及自定义列表的应用HTML列表标签及自定义列表的应用
    也可以通过CSS改变项目符号,也可以自己设置图片,如

  • HTML列表标签及自定义列表的应用HTML列表标签及自定义列表的应用

    2.有序列表

      标签。每个列表项始于

    1. 标签。
      HTML列表标签及自定义列表的应用HTML列表标签及自定义列表的应用
      改变排序方式
      HTML列表标签及自定义列表的应用HTML列表标签及自定义列表的应用HTML列表标签及自定义列表的应用HTML列表标签及自定义列表的应用

      3.自定义列表

      标签开始。每个自定义列表项以

      开始。每个自定义列表项的定义以
      开始。

      HTML列表标签及自定义列表的应用 HTML列表标签及自定义列表的应用

      4.列表的嵌套:

      列表嵌套可以增强网页页面层次性,比如图书的目录。有序列表和无序列表不仅能自身嵌套也能互相嵌套。

      HTML列表标签及自定义列表的应用HTML列表标签及自定义列表的应用
      注:dl元素只允许包含dt和dd,同时dt不能包含块状元素,只允许包含行内元素,对于dd可以包含任何元素。
      有序列表和无序列表之间的区别是:前缀的不同,有序的是有大写字母和小写字母、数字、罗马数字等,而无序列表是实心圆、空心圆、实心正方形。但是共同点是都有前缀。
      而自定义列表与有序无序的区别是没有前缀,而且是有缩进。


      扩展:

      1.行内元素
        行内元素最常使用的就是span,其他的只在特定功能下使用,修饰字体标签,还有这两个标签可以直接做出平方的效果,而不需要类似移动属性的帮助,很实用。
        行内元素特征:(1)设置宽高无效
               (2)对margin仅设置左右方向有效,上下无效;padding 设置上下左右都有效,即会撑大空间
               (3)不会自动进行换行
      2.块状元素
        块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。
      块状元素特征:(1)能够识别宽高
             (2)margin和padding的上下左右均对其有效
             (3)可以自动换行
             (4)多个块状元素标签写在一起,默认排列方式为从上至下
      自定义列表的好处:
      在自定义列表中,在dt和dd中有了一个缩进。在有序和无序列表要实现此结构就要用到列表的嵌套。
      当遭遇一系列术语与解释的列表(比如术语表)时,自定义列表就会很有用了。
      dl元素像ul元素和ol元素一样确立列表。不同的是,自定义列表用dt(definition term,定义术语)元素来代替li元素,其后跟随dd(definition description,定义描述)元素。
      不局限于一个dt跟着一个dd,而是任意的。自定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义,也可以只有术语名称或只有定义,即















      在其中数量不限,对应关系不限。
      自定义列表一般用于以下内容
      1.比如有很多同义词,就可能多个dt跟着一个dd。如果有一个有许多不同意义的词,就可能一个dt后有多个dd。
      2.网页搜索下面的相关搜索
      在这里插入图片描述
      像这种的列表使用自定义列表要比使用ul更好些。










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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/221340.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午6:21
下一篇 2026年3月17日 下午6:21


相关推荐

  • 小程序怎么开发自己的小程序_微信小程序建议使用

    小程序怎么开发自己的小程序_微信小程序建议使用微信小程序入门前言随着科技的不断进步,很多功能将会开放,那么很多需求也将会因为现实而得到满足,这是一种不需要下载和安装就可以使用的应用软件。用户只需扫描和搜索就可以打开应用程序。它很容易使用,而且很容易实现。小程序带来了巨大的流量,吸引了很多大的人和企业家前来追踪,也显示出它强大的生命力。小程序是下一个被确定为互联网新品种的程序,信已经成为不可缺少的交流工具,小程序依附于微信,用户搜索起来也会更方便,其实这就是小程序发展的前景和优势。提示:以下是本篇文章正文内容,下面案例可供参考一、小程序的概

    2026年4月15日
    4
  • 文心一言在 AIGC 领域的应用价值与意义

    文心一言在 AIGC 领域的应用价值与意义

    2026年3月12日
    2
  • leetcode链表问题_c++反转链表

    leetcode链表问题_c++反转链表给你单链表的头指针 head 和两个整数 left 和 right ,其中 left <= right 。请你反转从位置 left 到位置 right 的链表节点,返回 反转后的链表 。示例 1:输入:head = [1,2,3,4,5], left = 2, right = 4输出:[1,4,3,2,5]示例 2:输入:head = [5], left = 1, right = 1输出:[5] 提示:链表中节点数目为 n1 <= n <= 500-500

    2022年8月8日
    6
  • [springboot]Slf4j日志框架的体系结构

    [springboot]Slf4j日志框架的体系结构刚刚接触到 javalog 日志的同学可能会被各种日志框架吓到 包括各种日志框架之间的 jar 总是发生冲突 另很多小伙伴头疼不已 那我们本篇的内容就是将各种 java 日志框架发展过程 以及他们之间的关系 以及如何选型来介绍给大家

    2026年3月17日
    3
  • QGIS 3.0 使用教程

    QGIS 3.0 使用教程网易云课堂:https://study.163.com/course/courseMain.htm?courseId=1005249002&utm_campaign=commission&utm_source=cp-400000000343054&utm_medium=share课程中所需要的数据和地图服务地址从这里下载:链接:https://pan…

    2022年6月16日
    34
  • u盘文件夹exe病毒彻底_u盘中病毒文件变成快捷方式怎么办

    u盘文件夹exe病毒彻底_u盘中病毒文件变成快捷方式怎么办笔者在使用U盘时,无意之间发现U盘所有文件的后缀名均变为“.exe”,经过查询相关资料,确认这是一种病毒(文件夹EXE病毒)一、简介:木马名称:Worm.Win32.AutoRun.soq,当把U盘插入到一台电脑后,U盘内生成了以原文件夹名字命名的文件,且扩展名为exe,其原理是把原来的文件隐藏,重新生成同名的exe文件。二、解决方案:百度下载USBCleaner,根据软件提示进行操作即可完…

    2025年7月29日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号