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

HTML（五）列表详解

news 2026/2/10 0:34:29

在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

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38