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

列表标签的介绍与使用

news 2026/4/3 0:13:11
列表的作用：

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

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

无序列表

<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

Win10主机与Win7虚拟机共享文件夹超详细指南（VMware/虚拟机新手必看）

Win10主机与Win7虚拟机无缝共享文件夹全流程解析 刚接触虚拟机的用户经常会遇到一个棘手问题&#xff1a;如何在主机和虚拟机之间高效传输文件&#xff1f;复制粘贴受限、U盘来回插拔效率低下&#xff0c;而共享文件夹功能正是解决这一痛点的最佳方案。本文将手把手带你完成从零…...

编程新知 2026/4/2 23:04:54

告别手动转换！用Python自动化处理CSV到Little_R的完整指南

告别手动转换&#xff01;用Python自动化处理CSV到Little_R的完整指南 在数据科学和机器学习领域&#xff0c;数据格式转换是一项频繁且耗时的任务。特别是当我们需要将常见的CSV格式转换为特定领域专用的Little_R格式时&#xff0c;手动操作不仅效率低下&#xff0c;还容易出错…...

编程新知 2026/4/2 22:40:09

【openbmc8】mctp pldm

文章目录 1.mctp协议 1.1 mctp通用报文 1.2 mctp over i2c packet format 2.驱动分析 2.1 mctp pcie vdm 2.1 用户层操作代码流程 2.2 用户层操作测试 3.dbus适配 1.mctp协议 1.1 mctp通用报文 谁分配EID谁就是bus owner。mctp建立关联后都用EID（类似ip地址）通信：下图最后…...

编程新知 2026/4/2 21:49:18

AllTube Download 10个实用技巧：从基础下载到高级格式转换

AllTube Download 10个实用技巧&#xff1a;从基础下载到高级格式转换 【免费下载链接】alltube Web GUI for youtube-dl 项目地址: https://gitcode.com/gh_mirrors/al/alltube AllTube Download 是一款基于 youtube-dl 的 Web GUI 工具&#xff0c;让用户能够轻松从 Y…...

编程新知 2026/4/2 21:20:42

开源字体完全指南：免费商用与跨平台优化实践

开源字体完全指南&#xff1a;免费商用与跨平台优化实践 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 在当今数字化设计领域&#xff0c;选择合适的字体不仅关乎视觉呈现&#xff0c…...

编程新知 2026/4/2 21:14:39

告别鼠标！用Vim打造你的极速编程工作流（含常用脚本编辑配置）

用Vim打造无鼠标编程工作流&#xff1a;从入门到精通的完整指南 作为一名开发者&#xff0c;你是否厌倦了在键盘和鼠标之间来回切换的低效操作&#xff1f;Vim这款诞生于1991年的文本编辑器&#xff0c;凭借其独特的模态编辑理念和全键盘操作方式&#xff0c;至今仍是提升编程…...

编程新知 2026/4/2 21:14:39

通信萌新们注意了！今天咱们玩点刺激的——用MATLAB手搓各种QAM调制的性能对比。准备好你的小本本，咱们边写代码边分析，包教包会

基于4QAM&#xff0c;16QAM&#xff0c;64QAM调制方式下经过AWGN信道的性能分析 均包含加噪声前后的星座图、误码率和误符号率性能对比&#xff0c;该程序一共10张仿真图&#xff0c;可学习性非常强先上硬货&#xff0c;看看怎么生成4QAM的星座图。掏出这段代码&#xff1a; M …...

编程新知 2026/4/2 19:07:11

高效构建个性化Obsidian知识管理系统：从模板到实践的全面指南

高效构建个性化Obsidian知识管理系统&#xff1a;从模板到实践的全面指南 【免费下载链接】kepano-obsidian My personal Obsidian vault template. A bottom-up approach to note-taking and organizing things I am interested in. 项目地址: https://gitcode.com/gh_mirro…...

编程新知 2026/4/2 17:53:51

重构Switch游戏安装体验：Awoo Installer的突破与革新

重构Switch游戏安装体验&#xff1a;Awoo Installer的突破与革新 【免费下载链接】Awoo-Installer A No-Bullshit NSP, NSZ, XCI, and XCZ Installer for Nintendo Switch 项目地址: https://gitcode.com/gh_mirrors/aw/Awoo-Installer 如果你是Nintendo Switch破解玩家…...

编程新知 2026/4/2 17:53:51

终极指南：如何为Figma安装中文界面插件，让设计工作更高效

终极指南&#xff1a;如何为Figma安装中文界面插件&#xff0c;让设计工作更高效 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN FigmaCN是一款专为中文用户设计的Figma界面汉化插件&am…...

编程新知 2026/4/2 17:47:46