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

列表标签的介绍与使用

news 2025/12/23 15:05:01
列表的作用：

整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。
无序列表的基本语法格式如下：


<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>


1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
有序列表的基本语法格式如下：


<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ol>


1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。
3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

自定义列表

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和
<dd>（描述每一个项目/名字）一起使用。
其基本语法如下：


<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>


1. <dl></dl> 里面只能包含 <dt> 和 <dd>。
2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。
 

实战

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>无序列表</p><ul><li>钦州</li><li>南宁</li><li>北海</li></ul><p>这里一个有序列表</p><ol><li>第一名</li><li>第二名</li><li>第三名</li></ol><p>这是自定义列表</p><dl><dt>联系我们</dt><dd>微信</dd><dd>qq</dd><dd>新浪</dd></dl>
</body>
</html>

相关文章：

列表标签的介绍与使用

列表的作用&#xff1a; 整齐、整洁、有序&#xff0c;它作为布局会更加自由和方便。 根据使用情景不同&#xff0c;列表可以分为三大类&#xff1a;无序列表、有序列表和自定义列表 无序列表 <ul> 标签表示 HTML 页面中项目的无序列表&#xff0c;一般会以项目符号呈…...

编程日记 2023/12/11 1:30:50

浅谈什么是语音芯片的白噪音支持功能：打造舒适家居与优质音频体验

随着科技的不断进步和人们对生活质量要求的提升&#xff0c;语音芯片已经成为了现代电子产品中不可或缺的一部分。而在这些语音芯片中&#xff0c;支持白噪音的功能逐渐受到人们的关注。本文将围绕语音芯片中的白噪音支持功能展开讨论&#xff0c;带您领略其带来的舒适家居与优…...

编程日记 2023/12/11 1:28:48

【QED】高昂的猫 Ⅰ

目录 题目背景题目描述输入格式输出格式 测试样例样例说明数据范围 思路核心代码 题目背景 这是小橘。因为它总是看起来很高傲&#xff0c;所以人送外号“高昂的猫”。 题目描述 "锕狗"的房间里放着 n n n ( 1 ≤ n ≤ 1 0 9 ) (1 \leq n \leq 10^9) (1≤n≤109)个…...

编程日记 2023/12/11 1:27:47

Redis如何做内存优化？

Redis如何做内存优化&#xff1f; 1、缩短键值的长度 缩短值的长度才是关键&#xff0c;如果值是一个大的业务对象&#xff0c;可以将对象序列化成二进制数组&#xff1b; 首先应该在业务上进行精简&#xff0c;去掉不必要的属性&#xff0c;避免存储一些没用的数据&#xff1…...

编程日记 2023/12/11 1:26:46

倪海厦：教你正确煮中药，发挥最大药效

同样的一个汤剂&#xff0c;我开给你&#xff0c;你如果煮的方法不对&#xff0c;吃下去效果就没那么好。 所以&#xff0c;汤&#xff0c;取它的迅捷&#xff0c;速度很快&#xff0c;煮汤的时候还有技巧&#xff0c;你喝汤料的时候&#xff0c;你到底是喝它的气&#xff0c;…...

编程日记 2023/12/11 1:25:45

C++学习笔记:继承

继承 什么是继承?继承的写法基类和派生类的赋值转换继承中的作用域派生类的默认成员函数单继承,多继承,虚拟继承is-a 和 has-a 什么是继承? 继承是C语言面向对象的三大特性之一&#xff0c;是面向对象程序设计使代码可以复用的最重要的手段,基本都是在一个类的基础上为了增加…...

编程日记 2023/12/11 1:24:44

音频/视频、信息和通信技术设备安全标准UL62368-1

UL 62368-1&#xff0c;第 3 版&#xff0c;2019 年 12 月 13 日- UL 音频/视频、信息和通信技术设备安全标准 - 第 1 部分&#xff1a;安全要求 IEC 62368 的这一部分适用于该领域内电气和电子设备的安全音频、视频、信息和通信技术&#xff0c;以及额定电压不超过 600 V 的商…...

编程日记 2023/12/11 1:22:42

macos下安装科研绘图软件Origin

科研人必备软件Origin&#xff0c;主要是考虑到很多期刊都要求绘制origin可编辑的图&#xff0c;所以有些时候必须用这个软件&#xff0c;但是这个软件macos并不支持&#xff0c;所以必须考虑其他的方案&#xff0c;我没有安装虚拟机&#xff0c;而是使用crossover 安装crosso…...

编程日记 2023/12/11 1:21:41

安全快速地删除 MySQL 大表数据并释放空间

一、需求 按业务逻辑删除大量表数据操作不卡库&#xff0c;不能影响正常业务操作操作不能造成 60 秒以上的复制延迟满足以上条件的前提下&#xff0c;尽快删除数据并释放所占空间 表结构如下&#xff1a; create table space_visit_av (userid bigint(20) not null comment 用…...

编程日记 2023/12/11 1:20:40

未使用 “严格模式“（js的问题）

"严格模式"&#xff08;即在JavaScript源文件的开头包括 "use strict"&#xff1b;&#xff09;是一种自愿在运行时对JavaScript代码执行更严格的解析和错误处理的方式&#xff0c;同时也使它更安全。 但是&#xff0c;不使用严格模式本身并不是一个 &quo…...

编程日记 2023/12/11 1:19:39

Verilog基础：$random系统函数的使用

相关阅读 Verilog基础​编辑https://blog.csdn.net/weixin_45791458/category_12263729.html $random系统函数语法的BNF范式如下所示&#xff0c;有关BNF范式相关内容&#xff0c;可以浏览以往文章Verilog基础&#xff1a;巴科斯范式(BNF)。 $random系统函数在每次调用时返回一…...

编程日记 2023/12/11 1:16:36

数据库Delete的多种用法

数据库的Delete操作是用来删除数据库中的数据记录的&#xff0c;它是数据库操作中的一种重要操作&#xff0c;能够帮助用户删除不需要的数据&#xff0c;以便保持数据库的整洁和高效。在使用Delete操作时&#xff0c;需要注意确保操作的准确性和安全性&#xff0c;以免误删重要…...

编程日记 2023/12/11 1:14:34

鸿蒙前端开发-构建第一个ArkTS应用（Stage模型）

创建ArkTS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。 选择Application应用开发&#xff08;本文以应用开发为例&#xff0c;Atomic Serv…...

编程日记 2023/12/11 1:10:31

从零开始搭建链上dex自动化价差套利程序（12）

其他品种 扩展到其他币种的价差套利 1.eth 新建文件get_depth_data_eth.py import asyncio from apexpro.http_public import HttpPublic from dydx3 import Client from dydx3.constants import MARKET_ETH_USD# 定义交易对列表 symbol ETHUSDC market MARKET_ETH_USD# …...

编程日记 2023/12/11 1:09:29

MySQL 数据库如何实现 XA 规范？

本文我们来讨论 MySQL 的 XA 规范有哪些应用相关的内容。 MySQL 为我们提供了分布式事务解决方案&#xff0c;在前面的内容中提到过 binlog 的同步&#xff0c;其实是 MySQL XA 规范的一个应用&#xff0c;那么 XA 规范是如何定义的&#xff0c;具体又是如何应用的呢&#xff…...

编程日记 2023/12/11 1:08:28

SVN修改已提交版本的日志方法

1.在工做中一直是使用svn进行項目的版本控制的&#xff0c;有时候因为提交匆忙&#xff0c;或是忘了添加Log&#xff0c;或是Log内容有错误。遇到此类状况&#xff0c;想要在查看项目的日志时添加log或是修改log内容&#xff0c;遇到以下错误&#xff1a; Repository has not b…...

编程日记 2023/12/11 1:05:24

ArkUI组件--Text组件

1.声明Text组件并设置文本内容 Text(content?:string|Recource) #两种数据类型&#xff0c;字符串和本地资源文件 ①string格式&#xff0c;直接填写文本内容 Text(需要显示的文本) ②Recource格式&#xff0c;读取本地资源文件 Text($r(app.string.width_label)) 读取图…...

编程日记 2023/12/11 1:04:23

mysql的组合查询

mysql的组合查询 1、mysql的内连接查询 在 MySQL 中&#xff0c;内连接&#xff08;INNER JOIN&#xff09;是一种根据两个或多个表之间的匹配条件&#xff0c;将多个表中的数据进行联接的操作。内连接只返回符合联接条件的行&#xff0c;而不会返回未匹配的行。 内连接的语…...

编程日记 2023/12/11 1:03:22

短视频购物系统源码：构建创新购物体验的技术深度解析

短视频购物系统作为电商领域的新宠&#xff0c;其背后的源码实现是其成功的关键。本文将深入探讨短视频购物系统的核心技术和源码设计&#xff0c;以揭示其如何构建创新购物体验的技术奥秘。 1. 技术架构与框架选择 短视频购物系统的源码首先考虑的是其技术架构。常见的选择…...

编程日记 2023/12/11 1:00:20

暴力破解漏洞

暴力破解漏洞 1.1 漏洞简介1.2 漏洞影响范围1.3 漏洞详解1.3.1DVWA(1)LOW(2)Medium(3)HIGH 1.3.2 Pikachu(1)验证码绕过(on server)(2)验证码绕过(on client) 1.3.3 识别验证码&#xff08;绕过&#xff09;1.3.4 密码加密的情况 1.1 漏洞简介 暴力破解是一攻击具手段&#xf…...

编程日记 2023/12/11 0:59:19

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/12/18 10:13:02

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/12/18 4:21:19

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/12/14 10:18:18

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/12/10 19:18:49

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/12/13 2:58:08

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/12/12 21:35:24

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/12/21 16:14:01

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2025/12/22 11:02:30