HTML2.1列表标签

news2024/11/17 7:56:07

 

列表标签种类

无序列表 有序列表 自定义列表

使用场景:在列表中按照行展示关联性内容。

特点:按照行的形式,整齐显示内容。

一、无序列表

标签名说明
ul无序列表整体,用于包裹li标签
li表示无序列表的每一项,用于包含每一项内容

显示特点:列表每一项前默认显示圆点标识。

注:ul中只允许包含li标签。li标签中可以包含任何内容

代码: 

网页效果展示:

 

二、有序列表 

使用场景:一组有顺序之分的列表。

有序列表标签组成
标签名说明
ol有序整体,包裹li标签
li有序列表每一项,包含每一行

 显示特点:列表每一项前默认显示序号标识。

注:ol标签中只允许包含li标签。li标签可以包含任意内容

代码(注意区分与ul的区别):

 

网页效果展示: 

 

三、自定义列表

使用场景:网页底部导航。

例如京东网页底部导航:

 

自定义标签组成
标签名说明
dl自定义标签整体,包裹dt/dd标签
dt自定义列表主题
dd自定义列表针对主题的每一项内容

 显示特点:dd前默认显示缩进

注:dl标签只允许包含dt/dd标签。dt/dd标签可以包含任意内容

代码:

 

 网页效果展示:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/419772.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【iOS】—— 消息传递和消息转发

消息传递和消息转发 文章目录消息传递和消息转发消息传递(方法调用)IMP指针IMP与SEL的区别与联系SEL是通过表取对应关系的IMP,进行方法的调用快速查找imp过程汇编代码查找过程总结消息发送快速查找imp(汇编):方法缓存慢速查找总结慢速查找消息…

全链路日志追踪

背景 最近线上的日志全局追踪 traceId 不好使了,不同请求经常出现重复的 traceId,或者通过某个请求的 traceId 追踪搜索,检索出了与该请求完全不相干的日志。我领导叫我去排查解决这个问题,这里我把我排查的过程思路以及如何解决…

真题详解(单元测试)-软件设计(五十)

真题详解(0/1背包)-软件设计(四十九)https://blog.csdn.net/ke1ying/article/details/130163955 单元测试 五个特征:模块接口、局部数据结构、重要执行路径、出错处理、边界条件。 模块接口,保证测试模块数据流正确的流入和流出。 测试模块用…

大数据相关知识

1、大数据整体简介 1、1 简介 百度百科这样写道 大数据(big data),IT行业术语,是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优…

C++类的学习1

类的定义一般包括两部分,一是类的属性,二是他所拥有的方法。类的实例化是指给类的加载并初始化过程,比如一个people类,我们具体到每一个人就是类的实例化,此外一个类可以在此类上进行扩展。比如people类,我…

vue项目使用luckyexcel预览excel表格

场景 最近工作中在开发文档上传并能在新窗口打开预览的功能。在此记录下心路历程。 方法 我总共尝试了2种方法预览excel,均可实现。还发现一种方法可以实现,需要后端配合,叫做KKfileview。 1.使用luckyexcel插件实现xlsx的预览 2.使用fi…

组合式升降压PFC的分析方法

1. 组合式升降压PFC的基本原理 组合式升降压PFC采用两组储能元件,基本单元为Cuk,Sepic和Zeta。参考论文《New Efficient Bridgeless Cuk Rectifiers for PFC Applications》中的三种拓扑进行分析。   Cuk型PFC的TypeI如下图所示,正半周Dp一…

Jef-log-tail日志采集工具使用说明

介绍 jef-log-tail是一款基于netty实现的日志采集工具,支持指定目录、指定文件、指定后缀的动态持续日志采集,日常使用场景如:集群部署后将多台主机的日志集中存放到一台日志服务器上,或者将日志统一输出到数据库、redis、kafka、…

STM32实战项目-温湿度传感器

程序功能: 1、软件模拟I2C协议与SHT30数字温湿度传感器通讯; 2、数码管显示环境温湿度; 3、串口打印环境温湿度。 目录 一、硬件电路 二、技术讲解 2.1IIC简介 2.2 IIC总线协议 2.2设备接入 三、SHT30数字温湿度传感器 3.1性能介绍 …

Rollup 实践:插件生态和实用技巧(续)

在前面的文章中,我们已经了解了 Rollup 的性能优化和高级用法。本篇文章将继续探讨 Rollup 的插件生态和实用技巧。 插件生态 Rollup 拥有一个丰富的插件生态,下面我们介绍几个实用的插件: rollup-plugin-terser:使用 Terser 压…

FlowForge 使用教程 团队资源管理

前言 本篇文章结合FF的操作来给大家解释一下,FF在团队管理上都与那些资源可以操作。 团队创建 使用超管第一次登录FF平台,默认什么资源都没有,你只能先去创建一个团队才能继续往下操作。 在FF平台上,团队就代表一个租户,也是一种资源隔离的手段。 创建团队可以通过右上…

Rollup 实践:性能优化和高级用法(续)

在前面的文章中,我们已经了解了 Rollup 的基本概念和配置。本篇文章将继续探讨 Rollup 的性能优化和高级用法。 懒加载 通过 Rollup 的代码分割功能,我们可以实现懒加载,从而减小初始页面加载时间。假设我们有一个动态导入的模块 dynamic.j…

vue项目用后端返回的文件流实现docx和pdf文件预览

前端docx和pdf文件预览实现效果图docx-preview文件预览pdf文件预览写这篇文章的目的,是因为我比较懒,想把代码记录一下,方便日后使用;哈哈,如果你也需要,也可以复制粘贴啊,为了方便自己和需要的…

windows10开发环境下部署kafka消息服务

下载kafka,官方地址https://kafka.apache.org/downloads 百度网盘链接:https://pan.baidu.com/s/1h3iXtfzEIBoajGPId5Dcag?pwd0000 提取码:0000直接把下载的文件解压到某个盘的根目录,要不然后面的命令就会遇到“命令行过长”的报…

linux 系统的一些使用小技巧

实现RedHat非正常关机的自动磁盘修复 先登录到服务器,然后在/etc/sysconfig里增加一个文件autofsck,内容如下: AUTOFSCK_DEF_CHECKyes PROMPTyes 改变文件或目录之最后修改时间(变为当前时间) 执行格式:touch name ( name 可为文件或目录名称…

Matlab vs Python:哪个更适合数据分析和可视化?

当谈到数据分析和可视化时,许多人会思考使用哪种编程语言来实现这一目标。在IT行业,最流行的两种编程语言是Matlab和Python。这两种语言都有广泛的应用,但是对于初学者来说,选择哪种语言可能会有些困难。在本文中,我们…

【ENVI】监督分类

好久没用ENVI了,用起来有点生疏,这里记录一下操作流程。。。 基础数据:从91卫图下载相应地区影像数据。 下载影像推荐:地理空间数据云、91卫图、水经注等。 1、加载tif数据 2、样本选择 (1)在图层管理器…

Baumer工业相机堡盟工业相机如何通过BGAPISDK里的工具函数来计算工业相机的实时帧率(C#)

Baumer工业相机堡盟工业相机如何通过BGAPISDK里函数来计算相机的实时帧率(C#)Baumer工业相机Baumer工业相机的帧率的技术背景Baumer工业相机的帧率计算方式在BufferEvent声明显示FrameID设计显示帧率的函数Baumer工业相机通过BGAPI SDK计算帧率的优势​B…

亚马逊云科技:智能家居时代已来,如何抢滩海外市场的“真空区”?

在充满着不确定性的2022年,电子消费市场一片哀鸿遍野,智能家居行业却如同逆水行舟,显示出稳健的发展之势,宣告着智能家居时代已来。在2023年3月24日举办的“智能家居,出海闭门会”上,为进一步发挥产业带潜力…

微前端--qiankun原理概述

demo放最后了。。。 一、微前端 一》微前端概述 微前端概念是从微服务概念扩展而来的,摒弃大型单体方式,将前端整体分解为小而简单的块,这些块可以独立开发、测试和部署,同时仍然聚合为一个产品出现在客户面前。可以理解微前端是…