HTML有哪些列表以及具体的使用!!!

文章目录

  • 一、HTML列表
  • 二、列表的应用
    • 1、无序列表
    • 2、有序列表
    • 3、自定义列表
  • 三、总结


一、HTML列表

html的列表有三种,一种是无序列表,一种是有序列表,还有一种为自定义列表。

二、列表的应用

1、无序列表

<ul> <li>
无序列表:无序列表基础版 主要使用<ul>标签
和<li>标签无序列表表示只是列表而已,
没有什么顺序之分它的展现形式是由<ul>标签包裹着<li>标签:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>

结果为:
在这里插入图片描述

2、有序列表

<ol> <li>
有序列表:简单的有序列表 由<ol>标签包裹着<li>标签组成
在网页上显示的时候会有1,2,3,4这样的数字图标显示,
表示为有顺序的显示:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ol><li>1</li><li>2</li><li>3</li></ol>
</body>
</html>

结果为:
在这里插入图片描述

3、自定义列表

自定义列表:简单的自定义列表 由<dl>标签包裹着
<dt><dd>标签组成
dl为声明列表,而dt一般为小标题,dd则为内容

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><dl><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd></dl>
</body>
</html>

结果为:
在这里插入图片描述

三、总结

标签名定义说明
ul无序列表里面只能包含li,没有顺序,使用比较多,li里面可以包含任何标签
ol有序列表里面只能包含li,有序,使用相对较少。li里面可以包含任何标签
dl自定义列表里面只能包含 dt 和 dd。dt和dd里面都可以放任何标签

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

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

相关文章

在GBASE南大通用ADO.NET 中调用一个存储过程

使用 GBASE南大通用ADO.NET 调用一个存储过程&#xff0c;要先创建一个GBASE南大通用Command 对象并且使用属性 CommandText 传递存储过程名&#xff0c;并将属性 CommandType 设为CommandType.StoredProcedure。为存储过程中的每个输入、输出参数创建一个GBaseCommand 参数。使…

nodejs 使用 ws/socket.io 模块 websocket 即时通讯

源码 koa-mongodb-template ws 模块 下载 npm install ws简单使用 服务端代码 const WebSocket require("ws"); const WebSocketServer WebSocket.WebSocketServer;const wss new WebSocketServer({ port: 8080 });// 监听客户端连接 wss.on("connectio…

【Linux】冯诺依曼体系结构与操作系统及其进程

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解冯诺依曼体系结构与操作系统&#xff0c;掌握…

我为什么从来不给患者方子?

有的患者问&#xff1a;“大夫我给您几百块钱处方费&#xff0c;拿您的方子自己去抓&#xff0c;行吗&#xff1f;” 我笑着回答&#xff1a;“不行的&#xff0c;跟钱没有关系&#xff0c;原因有以下四个。” 【1】 有的患者带方子走后&#xff0c;找抓药的人或者别的中医对…

用bash写脚本

本章主要介绍如何使用bash写脚本。 了解通配符 了解变量 了解返回值和数值运算 数值的对比 判断语句 循环语句 grep的用法是“grep 关键字 file”&#xff0c;意思是从file中过滤出含有关键字的行。 例如&#xff0c;grep root /var/log/messages&#xff0c;意思是从/var/log/…

【工作流Activiti】MyActivit的maven项目

1、Idea新建一个项目MyActivit的maven项目 2、安装插件 在 idea 里面&#xff0c;activiti 的插件叫 actiBPM&#xff0c;在插件库里面把它安装好&#xff0c;重启 idea 就行了。 3、 maven 项目中&#xff0c;并更改 pom.xml。pom 中依赖如下&#xff1a; <?xml version…

Postman使用总结-断言

让 Postman 工具 代替 人工 自动判断 预期结果 和 实际结果 是否一致 断言代码 书写在 Tests 标签页中。 查看断言结果 Test Results 标签页

安防视频云平台/可视化监控云平台EasyCVR获取设备录像失败,该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。GB28181音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视…

鸿蒙-arkTs:基础组件

图片组件 - Image(src: string | PixelMap | Resource) string格式&#xff1a;加载远程地址图片&#xff08;需要配置ohos.permission.INTERNET&#xff09;PixelMap格式&#xff1a;加载像素图Resource格式&#xff1a;加载本地图片&#xff08;Image($r(app.media.icon))&a…

torch.optim.lr_scheduler.LambdaLR( )函数的用法

torch.optim.lr_scheduler.LambdaLR(optimizer, lr_lambda, last_epoch-1) 是 PyTorch 中的学习率调度器类之一&#xff0c;用于根据自定义的函数 lr_lambda 调整优化器的学习率 用法: torch.optim.lr_scheduler.LambdaLR(optimizer,lr_lambda,last_epoch-1)参数说明&#xf…

linux中数据库的概念、mysql的两种安装方法

数据库 数据库数据库DBsql语言关系型数据库&#xff08;SQL&#xff09;非关系型数据库&#xff08;NOSQL&#xff09;关系型数据库与非关系型数据库的区别 Mysqlmysql定义版本演化 Mysql安装Mysql源码安装准备环境清理环境安装依赖包添加MySQL用户添加mysql组创建数据目录和其…

鸿蒙实现年月日十分选择框,支持年月日、月日、日、年月日时分、时分切换

import DateTimeUtils from ./DateTimeUtils;CustomDialog export default struct RQPickerDialog {controller: CustomDialogControllertitle: string 这是标题TAG: string RQPickerDialog// 0 - 日期类型&#xff08;年月日&#xff09; 1 - 时间类型&#xff08;时分&a…

Ubuntu安装ARM交叉编译器

Ubuntu安装交叉编译器 更新apt # 更新apt sudo apt update安装gcc sudo apt install build-essential查看gcc版本 gcc -v下载交叉编译工具 复制到用户目录 解压 tar -xvf gcc-linaro-5.5.0-2017.10-x86_64_arm-linux-gnueabihf.tar.xz移动到/opt/下 sudo ./gcc-linaro-5.…

14、Kafka 请求是怎么被处理的

Kafka 请求是怎么被处理的 1、处理请求的 2 种常见方案1.1、顺序处理请求1.2、每个请求使用单独线程处理 2、Kafka 是如何处理请求的&#xff1f;3、控制类请求和数据类请求分离 无论是 Kafka 客户端还是 Broker 端&#xff0c;它们之间的交互都是通过 “请求 / 响应” 的方式完…

42 经典回溯算法题-全排列

问题描述&#xff1a;给你的那个一个不好喊重复数字的数组nums&#xff0c;返回其所有可能的全排列&#xff0c;你可以按照任何顺序返回答案&#xff1b; 回溯算法求解&#xff1a;定义一个used数组用来表征数组nums是否被选择&#xff0c;每一个回溯函数都要经过nums.length个…

Home Assistant HAOS版如何安装HACS

环境&#xff1a; Home Assistant 11.2 SSH & Web Terminal 17.0 问题描述&#xff1a; Home Assistant HAOS版如何安装HACS 解决方案&#xff1a; 1.打开WEB 里面的终端输入下面命令 wget -O - https://hacs.vip/get | bash -如果上面的命令执行后卡住不动&#xff…

深度学习模型(目标检测)轻量化压缩算法的挑战与解决方法

深度学习模型&#xff0c;尤其是用于目标检测的模型&#xff0c;是高度复杂的&#xff0c;通常包括数以百万计的参数和复杂的层次结构。虽然模型压缩和轻量化算法允许这些模型在资源受限的设备上部署和运行&#xff0c;但这仍然是一个活跃和具有挑战性的研究领域&#xff0c;包…

R语言生物群落(生态)数据统计分析与绘图丨R语言基础、tidyverse数据清洗、多元统计分析、随机森林模型、回归及混合效应模型、结构方程模型、统计结果作图

R 语言的开源、自由、免费等特点使其广泛应用于生物群落数据统计分析。生物群落数据多样而复杂&#xff0c;涉及众多统计分析方法。本教程以生物群落数据分析中的最常用的统计方法回归和混合效应模型、多元统计分析技术及结构方程等数量分析方法为主线&#xff0c;通过多个来自…

js 字符串之间转换

一. 字符串转换 &#xff08;1&#xff09;对象转字符串stringify var str JSON.stringify(weather);&#xff08;2&#xff09;字符串转对象 var obj JSON.parse(str);&#xff08;3&#xff09;数字转字符串toString() var num 2023; var str ; str num.toString();…

记一次jar冲突的问题

问题 业务中需要在spark中链接redis作为服务缓存&#xff0c;spark程序中引入redis的jar包后上传spark集群运行是报java.lang.NoSuchMethodError: com.xxx.common.pool.ConnectionPool.startAsync()Lcom/google/common/util/concurrent/Service;根据报错信息发现是jar包冲突造…