前端成长之路:HTML(3)
在HTML中,有列表标签。列表最大的特点是整齐、简洁、有序,用列表进行布局会更加自由方便。根据使用的情景不同,可以将列表分为三大类:无序列表、有序列表和自定义列表。
无序列表
在HTML中使用<ul>标签定义一个无序列表,在无序列表中使用<li>标签定义列表项,基本语法如下:


无序列表的定义需要遵循以下规则:
1.无序列表的各个列表项之间没有顺序级别之分,是并列的;顾名思义,无序列表,肯定是没有顺序的。
2.直接在<ul>标签中使用其他标签或者直接输入文字是不允许的,ul标签中只能使用<li>标签。
3.<li>标签相当于一个容器,可以容纳所有的元素(其他所有标签,或者文字等)。
li中可以容纳所有元素:


4.和很多标签一样,无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。
总结一下,最重要的是在ul无序列表中(有序列表也一样),不能直接使用其他标签或输入文字,需要在ul标签中使用li(就相当于是列表中一个大的容器)标签,然后在li标签中进行操作。
有序列表
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。有序列表和无序列表的差别就在于有序列表中的列表项是有顺序的。在HTML中,使用<ol>标签定义有序列表,列表排序是通过数字显示的;和无序列表一样,有序列表中也是通过li标签来定义列表项的。

可以看见,有序列表中的列表项的前面是通过数字来表示列表项顺序的。 有序列表的定义和无序列表定义类似,也需要遵循以下规则:
1.有序列表的各个列表项之间通过数字来表示顺序;顾名思义,有序列表,肯定具有顺序的。
2.直接在<ol>标签中使用其他标签或者直接输入文字是不允许的,ol标签中只能使用<li>标签。
3.<li>标签相当于一个容器,可以容纳所有的元素(其他所有标签,或者文字等)。
自定义列表
在HTML中我们可以创建自定义列表,自定义列表通常用于对术语或名词进行解释或者描述,自定义列表中的列表项没有任何项目符号。在HTML标签中,通过<dl>标签定义一个自定义列表(描述列表),dl标签需要配合<dt>(定义项目/名字)、<dd>(描述每一个项目/名字)一起使用。

这个代码中,通过dl标签创建了一个自定义列表,并且使用dt标签定义了一个“项目”(帮助中心),然后通过dd标签为这个“项目”(帮助中心)进行了描述。

注意:<dl>中只能包含<dt>和<dd>,这和ul或ol中只能包含li是一样的道理;<dl>中的dt和dd个数没有限制,可以是任意个,但是一般情况下是一个dt对应多个dd,因为相当于是一个“项目”对应多个“描述”,并且dt或dd中可以放任何标签(这点也和li类似)。
相关文章:
前端成长之路:HTML(3)
在HTML中,有列表标签。列表最大的特点是整齐、简洁、有序,用列表进行布局会更加自由方便。根据使用的情景不同,可以将列表分为三大类:无序列表、有序列表和自定义列表。 无序列表 在HTML中使用<ul>标签定义一个无序列表&a…...
无人机自动机库的功能与作用!
一、无人机自动机库的功能 智能停放与管理 无人机自动机库为无人机提供了一个安全、可靠的停放环境。通过先进的感知技术和安全防护措施,它能够实时监测周围环境,确保无人机免受恶劣天气或潜在风险的侵害。 无人机在机库内可以实现智能停放࿰…...
ubuntu 新建脚本shell并增加图标 双击应用实现python运行
1.使用nano创建shell脚本文件 需要在终端窗口中输入“nano”以打开文本编辑器。 nano 在创建脚本文件前,我们要了解脚本文件是如何运行的: 直接运行:直接在终端直接输入需要运行的脚本文件名称,系统或用缺省版本的shell运行脚…...
ANR 分析SOP
遇到ANR问题不要慌,大部分情况下可能是系统or测试手段问题,我们按照如下关键字排查定位 文章目录 1 是否是 heapdump 导致?1.1 dump开始1.2 dump结束 1 是否是 heapdump 导致? 使用 hprof: heap dump 关键词过滤,在d…...
COLA学习之环境搭建(三)
小伙伴们,你们好,我是老寇,上一节,我们学习了COLA代码规范,继续跟老寇学习COLA环境搭建 首先,打开GitHub,搜索 COLA 请给这个COLA项目点个Star,养成好习惯,然后Fork到自…...
CSS输入框动态伸缩动效
前言 下面我们将会做出如下图输入框样式,并且附上组件代码,有特殊需求的可以自行优化同理,下拉框的话只要把el-input标签修改掉即可 MyInput组件 <template><div class"my-input" click.stop"showInput !showInput…...
hbuilder 安卓app手机调试中基座如何设置
app端使用基座 手机在线预览功能 1.点击运行 2.点击运行到手机或者模拟器 3.制作自定义调试基座 4.先生成证书【可以看我上一篇文档写的有】,点击打包 5.打包出android自定义调试基座【android_debug.apk】,【就跟app打包一样需要等个几分钟】 6.点击运行到手…...
探索视觉与语言模型的可扩展性
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…...
sock_recvmsg函数
sock_recvmsg 是一个在 Linux 内核中用于处理接收网络数据的函数。它通常与套接字 (socket) 操作相关,特别是在网络协议栈中用于处理从网络中接收到的数据。这个函数是内核的一部分,提供了一种机制把接收到的数据从网络协议栈转移到用户空间,或者在内核内进一步处理。 以下是…...
HCIA笔记8--DHCP、Telnet协议
1. DHCP介绍 对于主机的网络进行手动配置,在小规模的网络中还是可以运作的,但大规模网络是无力应对的。因此就有了DHCP协议来自动管理主机网络的配置。 DHCP(Dynamic Host Configuration Protocol): 动态主机配置协议,主要需要配置的参数有…...
Scala的单例对象
在Scala中,单例对象是一种特殊的类,它只能有一个实例,并且这个实例在需要时会自动创建。单例对象在Scala中通过object关键字来定义,它类似于Java中的静态成员和方法,但更加灵活和强大。 定义单例对象 以下是定义一个…...
【笔记】分布式任务调度平台XXL-JOB
这篇笔记主要记录以下内容: (1)第一次启动xxl-job的过程 (2)模块、文件、数据库(表和字段)的作用 (3)极少的源码解读(XxlJobConfig) 有点像实…...
PDFMathTranslate,PDF多语言翻译,批量处理,学术论文,双语对照(WIN/MAC)
分享一个非常实用的PDF文档翻译项目——PDFMathTranslate。作为一个经常逛GitHub的开发者,我总喜欢翻看各种项目附带的论文,虽然大多时候是瞎研究,但却乐在其中。该项目能够完美保留公式、图表、目录和注释,对于需要阅读外文文献的…...
zerotier实现内网穿透(访问内网服务器)
moo 内网穿透工具 实用工具:zerotier 目录 内网穿透工具 Windows下zerotier安装 ubuntu系统下的zerotier安装 使用moon加速 Windows下zerotier安装 有了网络之后,会给你一个网络id,这个网络id是非常重要的,其它设备要加入…...
Formality:set_svf命令
相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 svf文件的全称是Setup Verification for Formality,即Design Compiler提供给Formality的设置验证文件,它的作用是为Formality的指导模式(Gui…...
IDEA报错:无效的源发行版、无效的目标发行版
1. 无效的源发行版 创建项目的时候,会遇见这个报错,原因就是编译的JDK版本与发布版本不一致。 解决方法: 1.1. 找到问题所在地 英文:File -> Project Structure ->Project Settings 中文:文件->项目结构 …...
#渗透测试#红蓝对抗#SRC漏洞挖掘# Yakit插件使用及编写01
免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…...
Scala中求斐波那契数列的第n项
求斐波那契数列的第n项 问题:求 斐波那契数列的第n项 记: 0 1 1 2 3 5 8 13 21 34 55 ... 从第3项开始 f(n) f(n-1) f(n-2) 1.基本情况(直接能求的):f(0) 0,f(1) 1 2.递归情况(大事化小,自己…...
ORACLE修改序列值为表内某字段(主键)最大值
ORACLE修改序列值为表内某字段(主键)最大值 想修改序列值,网上基本的都是自己看要加到多少,然后要么调步长,要么删了重建。 想直接用declare使用标量然后调,但是逻辑里面不能有DDL语句。 不过最后解决了 直…...
前端html,vue使用第三方地图详细教程,以百度地图为例,实现地图标注,导航,定位,路线规划,坐标转换
目录 示例: 准备: ?编辑 开始: 1、新建页面,在script标签中引入百度地图的api数据,把自己在控制台创建的应用的ak替换上去 2、创建一个dom对象,设置宽高 3、在js中初始化地图 进阶: 1…...
别再只盯着Midjourney了!2025年,这5款文生图模型更适合你的具体业务场景
2025年五大文生图模型实战指南:如何为你的业务精准匹配AI工具 当Midjourney成为文生图领域的"网红"时,真正懂行的从业者已经在根据具体业务需求选择更合适的工具了。就像专业摄影师不会只用一款镜头拍所有题材,明智的AI应用者需要建…...
3大核心能力:黑苹果爱好者的系统构建指南
3大核心能力:黑苹果爱好者的系统构建指南 【免费下载链接】Hackintosh 国光的黑苹果安装教程:手把手教你配置 OpenCore 项目地址: https://gitcode.com/gh_mirrors/hac/Hackintosh 评估硬件兼容性 为什么同样的硬件配置,别人的黑苹果…...
Java中高效移除文本文件标点符号的实用指南
本教程详细阐述了在Java中从文本文件中有效删除标点符号的方法。我们将使用Java NIO的Files.lines()结合Streamm API,重点介绍正则表达式p{Punct}强大的功能,以简单、强大的方式实现文本清洁,避免传统硬编码的局限性,从而提高文本…...
ROS2 MoveIt2实战:如何让虚拟机械臂‘看懂’并抓取YOLOv8 OBB识别的物体?
ROS2 MoveIt2与YOLOv8 OBB深度集成:构建高精度虚拟抓取系统的核心技术解析 当机械臂遇上计算机视觉,一场关于精准控制的交响乐就此展开。本文将带您深入探索如何利用YOLOv8 OBB(Oriented Bounding Box)的朝向感知能力,…...
CSS线性渐变实战:5分钟搞定炫酷按钮背景(附完整代码)
CSS线性渐变实战:5分钟搞定炫酷按钮背景(附完整代码) 最近在重构一个企业官网时,产品经理突然要求把所有按钮的纯色背景换成"更有设计感"的效果。面对30多个不同尺寸的按钮,手动设计图片背景显然不现实。这时…...
Win11虚拟机密码重置保姆教程:VirtualBox+系统备份双保险
Win11虚拟机密码重置与系统防护全指南:VirtualBox实战策略 在数字化工作环境中,虚拟机已成为隔离测试环境、保障系统安全的标配工具。当我们因各种原因遗忘Windows 11虚拟机密码时,传统物理机的解决方案往往无法直接套用。本文将深入探讨基于…...
OV5640摄像头SCCB配置详解:告别照抄寄存器表,教你读懂数据手册进行个性化设置
OV5640摄像头SCCB高级配置实战:从寄存器表解读到图像优化全解析 1. 深入理解OV5640寄存器架构 OV5640作为OmniVision推出的500万像素图像传感器,其强大功能背后是超过200个可配置寄存器。许多开发者习惯直接套用现成的寄存器配置表,但当遇到图…...
别再踩坑PX4Flow了!实测优象LC-302光流模块,手把手教你搞定PX4无人机室内悬停
无人机室内悬停实战指南:优象LC-302光流模块深度评测与PX4调参技巧 当无人机从开阔的室外飞入复杂的室内环境,GPS信号的突然消失往往让飞手们手忙脚乱。这时,一套可靠的光流定位系统就成了"空中救生绳"。本文将带您深入评测市面上主…...
英集芯-IP5316、IP5219有什么区别?详细总结一下
简介 IP5219和IP5316都是英集芯的充电管理IC,两款移动电源SOC芯片输出/输入参数基本一致,但是使用起来却有一些差异,下面就对两款IC使用中遇到的一些问题做一些总结。 IP5219:2.1A 充电 2.4A 放电集成 TYPE_C 协议移动电源 SOC; IP5316:集成 TYPE_C 协议的 2.4A 充电/2.4…...
终极指南:如何解决Cobalt Instagram下载失败问题 - 完整排查方案
终极指南:如何解决Cobalt Instagram下载失败问题 - 完整排查方案 Cobalt是一款强大的开源媒体下载工具,专为保存Instagram、YouTube、Twitter等平台的视频和图片而设计。然而,许多用户在使用Cobalt下载Instagram内容时经常遇到各种失败问题&…...
