当前位置： 首页 > news >正文

HTML（五）列表详解

news 2026/1/3 12:22:27

在HTML中，列表可以分为两种，一种为有序列表。另一种为无序列表

今天就来详细讲解一下这两种列表如何实现，效果如何

1.有序列表

有序列表的标准格式如下：

   <ol><li>列表项一</li><li>列表项二</li></ol>

这里的列表项可以随意更改内容，使用示例如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><ol><li>吃饭</li><li>睡觉</li></ol></body>
</html>

效果图如下：

2.有序列表更改前导符

什么是前导符？

前导符就是我们在使用列表打出文字前的小标题，如上图中的 1.    2. 这些都是前导符

前导符的标准语言使用如下：

 <ol type="前导符"><li>列表项一</li><li>列表项二</li></ol>

 这里的前导符有五种，如下图：

 接下来是实际代码演示+效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><ol type="a"><li>列表项一</li><li>列表项二</li></ol><ol type="A"><li>列表项一</li><li>列表项二</li></ol><ol type="1"><li>列表项一</li><li>列表项二</li></ol><ol type="i"><li>列表项一</li><li>列表项二</li></ol><ol type="I"><li>列表项一</li><li>列表项二</li></ol>
</body>
</html>

 3.无序列表

在HTML中另外一种列表被称作无序列表，无序列表与有序列表极其相似，只有微小的差距

无序列表标准格式如下：

    <ul><li>列表项一</li><li>列表项儿</li></ul>

无序列表使用及效果如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><ul><li>吃饭</li><li>睡觉</li></ul></body>
</html>

 4.无序列表更改前导符

这里不做演示了，与有序列表使用方法相同

相关文章：

HTML（五）列表详解

在HTML中&#xff0c;列表可以分为两种&#xff0c;一种为有序列表。另一种为无序列表 今天就来详细讲解一下这两种列表如何实现&#xff0c;效果如何 1.有序列表 有序列表的标准格式如下&#xff1a; <ol><li>列表项一</li><li>列表项二</li>…...

编程日记 2024/10/13 13:28:04

SparkSQL介绍及使用

SparkSQL介绍及使用 一、什么是SparkSQL&#xff08;了解&#xff09; spark开发时可以使用rdd进行开发&#xff0c;spark还提供saprksql工具&#xff0c;将数据转为结构化数据进行操作 1-1 介绍 官网&#xff1a;https://spark.apache.org/sql/ Spark SQL是 Apache Spark 用于…...

编程日记 2024/10/13 13:25:01

【聚星文社】3.2版一键推文工具更新啦

【聚星文社】3.2版一键推文工具更新啦。调试了好几个通宵就是为了效果和质量。 旧版尽早更新新版&#xff0c;从此告别手搓&#xff01; 工具入口https://iimenvrieak.feishu.cn/docx/ZhRNdEWT6oGdCwxdhOPcdds7nof...

编程日记 2024/10/13 13:22:59

C++基础补充（03）C++20 的 std::format 函数

文章目录 1. 使用C20 std::format2. 基本用法3. 格式说明 1. 使用C20 std::format 需要将VisualStudio默认的标准修改为C20 菜单“项目”-“项目属性”&#xff0c;打开如下对话框 代码中加入头文件 2. 基本用法 通过占位符{}制定格式化的位置&#xff0c;后面传入变量 #…...

编程日记 2024/10/13 13:21:56

[论文笔记]DAPR: A Benchmark on Document-Aware Passage Retrieval

引言 今天带来论文DAPR: A Benchmark on Document-Aware Passage Retrieval的笔记。 本文提出了一个基准&#xff1a;文档感知段落检索(Document-Aware Passage Retrieval,DAPR)以及介绍了一些上下文段落表示的方法。 为了简单&#xff0c;下文中以翻译的口吻记录&#xff0c…...

编程日记 2024/10/13 13:20:55

Spring Boot知识管理：智能搜索与分析

3系统分析 3.1可行性分析 通过对本知识管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本知识管理系统采用JAVA作为开发语言&#xff0c;Spring Boot框…...

编程日记 2024/10/13 13:19:54

操作系统(2) (进程调度/进程调度器类型/三种进程调度/调度算法)

目录 1. 介绍进程调度&#xff08;Introduction to Process Scheduling&#xff09; 2. 优先级调度&#xff08;Priority Scheduling&#xff09; 3. CPU 利用率&#xff08;CPU Utilization&#xff09; 4. 吞吐量&#xff08;Throughput&#xff09; 5. 周转时间&#xf…...

编程日记 2024/10/13 13:18:50

鸿蒙--知乎评论

这里我们将采用组件化的思想进行开发 在开发中默认展示的是首页也就是 pages/Index.ets页面 这里存放的是所有页面的配置文件，类似与uniapp中的pages.json 如果我们此时要更改默认显示Zh...

编程日记 2024/10/13 13:16:48

2024 - 两台CentOS服务器上的1000个Docker容器（每台500个）之间实现UDP通信(C语言版本)

两台CentOS服务器上的1000个Docker容器&#xff08;每台500个&#xff09;之间实现UDP通信(C语言版本) 给女朋友对象写得&#xff0c;她不会&#xff0c;我就写了一个 为了帮助您在两台CentOS服务器上的1000个Docker容器&#xff08;每台500个&#xff09;之间实现UDP通信&…...

编程日记 2024/10/13 13:15:48

小程序该如何上架

小程序的上架流程通常包括准备工作、代码审核、人工审核以及上线发布等关键步骤。以下是一个详细的小程序上架指南&#xff1a; 一、准备工作 注册开发者账号&#xff1a; 在微信小程序平台或支付宝开放平台等相应的小程序发布平台上注册开发者账号。 开发小程序&#xff1a; …...

编程日记 2024/10/13 13:12:44

XMOJ3065 旅游线路

10分钟没啥思路就去看题解了&#xff0c;结果发现很蠢。 题目大意 有一条河&#xff0c;河的东侧和西侧分别有 n , m n,m n,m 个景点&#xff0c;每个景点有个权值。有 k k k 条船&#xff0c;每条船连接东侧和西侧的一个景点。定义一个旅游线路是通过船连接起来的景点序列…...

编程日记 2024/10/13 13:10:42

量化之一：均值回归策略

文章目录 均值回归策略理论基础数学公式 关键指标简单移动平均线&#xff08;SMA&#xff09;标准差Z-Score 交易信号实际应用优缺点分析优点缺点 结论 实践backtrader参数&#xff1a;正常情况&#xff1a;异常情况&#xff1a; 均值回归策略 均值回归&#xff08;Mean Rever…...

编程日记 2024/10/13 13:08:40

NVIDIA Bluefield DPU上的启动流程4个阶段分别是什么？作用是什么？

文章目录 Bluefield上的硬件介绍启动流程启动流程：eMMC中的两个存储分区：ATF介绍ATF启动的四个阶段：四个主要步骤：各个阶段依赖的启动文件一次烧录fw失败后的信息看启动流程综述Bluefield上的硬件介绍 本文以Bluefield2为例，可以看到RSHIM实际上是Boot相关的集合。也能看…...

编程日记 2024/10/13 13:07:37

最优美公式-欧拉公式，轻松理解版

Alan Becker创作的火柴人大战数学的打斗视频&#xff0c;风靡一时&#xff0c;并在B站荣耀斩获了“金知奖”。下面是网友对此视频的部分评价截图。 视频原址&#xff1a;火柴人 vs 数学&#xff0c;后续又一口气看完了“火柴人vs 几何”与“火柴人vs 物理”&#xff0c;通过火柴…...

编程日记 2024/10/13 13:02:32

【力扣 | SQL题 | 每日3题】力扣1107，1112， 1077

今天三道mid题都可以用窗口函数轻松秒杀。 1. 力扣1107&#xff1a;每日新用户统计 1.1 题目&#xff1a; Traffic 表&#xff1a; ------------------------ | Column Name | Type | ------------------------ | user_id | int | | activity | enum …...

编程日记 2024/10/13 13:01:31

计算机网络（十一） —— 数据链路层

目录 一&#xff0c;关于数据链路层 二&#xff0c;以太网协议 2.1 局域网 2.2 Mac地址 2.3 Mac帧报头 2.4 MTU 三&#xff0c;ARP协议 3.1 ARP是什么 3.2 ARP原理 3.3 ARP报头 3.4 模拟ARP过程 3.5 ARP周边问题 四&#xff0c;NAT技术 4.1 NAT技术背景 4.2 NAT转…...

编程日记 2024/10/13 13:00:30

使用PyTorch从0实现Fashion-MNIST数据集分类

完整代码&#xff1a; from d2l import torch as d2l import torch from torchvision import transforms from torchvision import datasets from torch.utils.data import DataLoader import matplotlib.pyplot as plt from IPython import displaydef get_fashion_mnist_la…...

编程日记 2024/10/13 12:59:27

Java数组的值拷贝和地址拷贝

在Java中&#xff0c;数组的值拷贝和地址拷贝是两种不同的操作。 值拷贝是指将一个数组的值复制到另一个新的数组中。这意味着新数组和原数组独立存在&#xff0c;修改其中一个数组不会影响另一个数组。Java中的数组是对象&#xff0c;所以通过值拷贝操作实际上是复制了数组对…...

编程日记 2024/10/13 12:57:25

类与对象 中（剩余部分） 以及 日历

运算符重载 • 当运算符被⽤于类类型的对象时&#xff0c;C语⾔允许我们通过运算符重载的形式指定新的含义。C规定类类型对象使⽤运算符时&#xff0c;必须转换成调⽤对应运算符重载&#xff0c;若没有对应的运算符重载&#xff0c;则会编译报错。 • 运算符重载是具有特名字的…...

编程日记 2024/10/13 12:54:19

iOS 14 自定义画中画悬浮窗 Custom AVPictureInPictureController 实现方案

iOS 14&#xff0c;基于 AVPictureInPictureController&#xff0c;实现自定义画中画&#xff0c;涵盖所有功能与难点。 市面上的各种悬浮钟和提词器的原理都是基于此。 Demo源码在文末。 使用 iOS 画中画的要求&#xff1a; 真机&#xff0c;不能使用模拟器&#xff1b;iO…...

编程日记 2024/10/13 12:53:18

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/1/3 9:08:58

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/12/12 16:39:33

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/12/24 23:31:27

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2026/1/3 4:47:00

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2025/12/28 11:07:34

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/12/24 22:27:27

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/11/9 21:54:26

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...

编程新知 2025/12/30 9:31:25