列表标签的介绍与使用

列表的作用:

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

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

无序列表

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/212469.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入了解linux下网卡防火墙selinux

深入了解linux下网卡防火墙selinux 在Linux系统中&#xff0c;网络安全是非常重要的。为了保护系统免受恶意攻击和未经授权的访问&#xff0c;我们可以使用防火墙来限制网络流量。而在Linux下&#xff0c;我们可以使用SELinux&#xff08;Security-Enhanced Linux&#xff09;…

Java调试技巧之垃圾回收机制解析

Java作为一种高级编程语言&#xff0c;以其跨平台、面向对象、自动内存管理等特性而广受开发者的喜爱。其中&#xff0c;自动内存管理是Java的一大亮点&#xff0c;通过垃圾回收机制实现对内存的自动分配和释放&#xff0c;极大地简化了开发者的工作。本文将深入探讨Java的垃圾…

mysql数据库文件丢失恢复---惜分飞

客户服务器重启,mysql相关数据文件丢失 通过底层工具进行分析,无法正确恢复数据库名字,一个个单个ibd文件(而且很多本身是错误的) 对于这种情况,通过mysql block扫描恢复出来page文件 恢复出来客户需要数据 这个客户出现该故障的原因大概率是由于文件系统损坏导致.最终…

C语言进阶之路-数据结构篇

目录 一、学习目标 二、数据结构 1.基本概念 线性关系&#xff1a; 非线性关系&#xff1a; 存储形式 2. 算法分析 2.1 时间复杂度 2.2 空间复杂度 2.3 时空复杂度互换 总结 一、学习目标 了解数据结构的基本概念了解算法的分析方法 二、数据结构 1.基本概念 数据结…

测试bug分析

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 例如&#xff1a;项目场景&#xff1a;示例:通过蓝牙芯片(HC-05)与手机 APP 通信&#xff0c;每隔 5s 传输一批传感器数据(不是很大) 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1…

Nacos源码解读11——客户端怎么读取最新的配置信息

项目启动怎么读取的配置信息 自动装配 SpringBoot 自动装配机制 加载 WEB/INF spring.factories 会将如下几个Bean加载到ioc 容器中 BeanConditionalOnMissingBeanpublic NacosConfigProperties nacosConfigProperties() {return new NacosConfigProperties();}BeanCondition…

【算法Hot100系列】两数之和

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【rabbitMQ】模拟work queue,实现单个队列绑定多个消费者

上一篇&#xff1a; springboot整合rabbitMQ模拟简单收发消息 https://blog.csdn.net/m0_67930426/article/details/134904766?spm1001.2014.3001.5502 在这篇文章的基础上进行操作 基本思路&#xff1a; 1.在rabbitMQ控制台创建一个新的队列 2.在publisher服务中定义一个…

MySQL中的数据类型

MySQL中的数据类型 大家好&#xff0c;我是微赚淘客系统的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨MySQL中的数据类型&#xff0c;这是数据库设计中至关重要的一部分。数据库作为程序的底层支持&#xff0c;数据类型的选择…

[python]利用whl轮子文件python3.12安装talib

ta-lib目前很多人使用&#xff0c;网上也有很多人下载whl文件直接pip安装即可&#xff0c;但是最新版本3.12没有出来&#xff0c;因此本人独家制作python 3.12版本whl文件&#xff0c;从源码开始编译生成。TA-Lib-0.4.28-cp312-cp312-win-amd64.whl &#xff0c;注意这个whl文件…

Java 多线程下的单例模式

单例对象&#xff08;Singleton&#xff09;是一种常用的设计模式。在Java应用中&#xff0c;单例对象能保证在一个JVM中&#xff0c;该对象只有一个实例存在。正是由于这个特 点&#xff0c;单例对象通常作为程序中的存放配置信息的载体&#xff0c;因为它能保证其他对象读到一…

JWT的原理

在谈及jwt原理前,我们其实对jwt并不陌生,对于有经验的码农,大都听过或者实践过,对于一些初学者,凡是谈及安全方面的问题,总是觉得很复杂,感觉不是自己能搞得懂得,但其实无非也是加密解密的过程,不要想的太复杂,我们先说一说JWT在生产上的应用 JWT在生产上的应用 传递用户身份信…

Android系统中使用Cunit测试C/C++接口

Android系统中使用Cunit测试C/C接口 Cunit是C/C语言的单元测试框架&#xff0c;但常用于Windows和Linux开发中。 Android系统中经常有jni、so库、hal service等都是C/C实现&#xff0c;本文讲解如何将Cunit嵌入Android中&#xff0c;用于测试一些C/C api。 Cunit简介 Cunit是很…

全面解析“由于找不到hid.dll,无法继续执行代码”的4个解决方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到hid.dll”。这个问题通常出现在尝试运行某个程序或访问某个设备时。那么&#xff0c;当我们遇到这个问题时&#xff0c;应该如何解决呢&#xff1f;本文将详细介绍找不到hid.dll的解…

高校需要哪些大数据实训平台?

当前&#xff0c;数据已成为重要的生产要素&#xff0c;大数据产业作为以数据生成、采集、存储、加工、分析、服务为主的战略性新兴产业&#xff0c;是激活数据要素潜能的关键支撑&#xff0c;是加快经济社会发展质量变革、效率变革、动力变革的重要引擎。 泰迪大数据实验…

Angular 14带来了类型化表单和独立组件

独立组件通过减少对ngmodule的需求&#xff0c;有望简化Angular应用的开发。 介绍 Angular 14是谷歌开发的、基于typescript的web应用框架的最新版本&#xff0c;它以输入表单和独立组件的开发者预览版为特色。 其特性包括&#xff1a; 一个基于组件的框架&#xff0c;用于构…

Fortran读取netcdf文件/WRF中的文件读取

一直很好奇WRF到底如何通过netcdf库读取netcdf文件&#xff0c;正巧有个机会&#xff0c;试了下fortran读取nc文件&#xff0c;总结一下。 netcdf库 Fortran读取nc文件需要依赖netcdf外部库。安装该库以后&#xff0c;会有专门写给ffortran函数声明的头文件&#xff1a;netcd…

数据类型·

定义 数据类型是指在编程语言中&#xff0c;能够表示不同种类的数据值并对其进行操作的集合。在不同的编程语言中&#xff0c;数据类型可能有所不同&#xff0c;但通常包括基本数据类型和复合数据类型两种。 基本数据类型通常包括整数、浮点数、布尔值、字符等。这些类型的数…

231210 刷题日报

单调栈&#xff1a; 为啥需要单调栈&#xff1f;因为栈的后入先出特性方便从栈顶删除刚入栈的元素 496. 下一个更大元素 I 739. 每日温度 单调对列&#xff1a; 为啥要用单调对列&#xff1f;因为像滑动窗口这种题目&#xff0c;窗口两端都需要插入和删除&#xff0c;所以需…

Python满屏飘字表白代码

​ 目录 系列文章 写在前面 Turtle入门 满屏飘字 写在后面 系列文章 序号文章目录直达链接表白系列1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://…