7.HTML中列表标签

news2025/1/16 17:52:36

7.列表标签

7.1无序列表(重点)

表格是用来显示数据的,那么列表就是用来布局的。

列表最大的特点就是整齐,整洁,有序,他作为布局会更加自由和方便,

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

                        有序列表

                        无序列表

                          自定义列表

< ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。

无序列表的基本语法格式

<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来设置

7.2有序列表

有序列表即为有排序的列表,奇各个列表项会按照一定顺序排列定义

在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来设置

7.3自定义列表

在HTML标签中,< dl></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>

在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

7.4 列表总结
标签名定义说明
<ul></ul>无序列表里面只能包含li, 没有顺序,使用较多,li里面可以包含任何标签
<ol></ol>有序列表里面只能包含li,有顺序,使用相对较少,li里面可以包含任何标签
<dl></dl>自定义列表里面只能包含dt和dd。dt和dd里面可以放任何标签

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

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

相关文章

Go 语言函数、参数和返回值详解

函数是一组语句&#xff0c;可以在程序中重复使用。函数不会在页面加载时自动执行。函数将通过调用函数来执行。 创建函数 要创建&#xff08;通常称为声明&#xff09;一个函数&#xff0c;请执行以下操作&#xff1a; 使用 func 关键字。指定函数的名称&#xff0c;后跟括…

【Java 进阶篇】Redis 数据结构:轻松驾驭多样性

引言 Redis是一款强大的键值对存储系统&#xff0c;其数据结构的多样性是其引以为傲的特点之一。在这篇博客中&#xff0c;我们将深入探讨Redis的主要数据结构&#xff0c;包括字符串、哈希表、列表、集合和有序集合&#xff0c;并通过实例代码演示它们的用法。 1. 字符串&am…

基于跳蛛算法优化概率神经网络PNN的分类预测 - 附代码

基于跳蛛算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于跳蛛算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于跳蛛优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

linux部署jar 常见问题

1.java -jar xxx.jar no main manifest attribute, in xxx.jar 一.no main manifest attribute, in xxx.jar 在pom.xml文件中加入&#xff1a; <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifac…

SpringBoot监听器解析

监听器模式介绍 监听器模式的要素 事件监听器广播器触发机制 SpringBoot监听器实现 系统事件 事件发送顺序 监听器注册 监听器注册和初始化器注册流程类似 监听器触发机制 获取监听器列表核心流程: 通用触发条件: 自定义监听器实现 实现方式1 实现监听器接口: Order(1) …

利用GUI实现渲染二维码效果

以下是一个简单的 Java 验证码实现示例&#xff1a; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.util.Random;import javax.imageio.ImageIO;public class CaptchaGenerator {public static …

JVM 堆外内存详解

Java 进程内存占用除了JVM 运行时数据区&#xff0c;还有直接内存&#xff08;Direct Memory&#xff09;区域及 JVM 程序自身也会占用内存 直接内存&#xff08;Direct Memory&#xff09;区域&#xff1a;直接内存通过使用Native堆外内存来存储数据&#xff0c;这意味着数据…

alova—轻量级请求策略库

文章目录 前言alova 是什么为什么创造 alova 一、选择 alova 的理由&#xff1f;二、使用步骤完整的特性列表alova 请求策略表 三、如何使用安装使用 useRequest 发送一个请求 总结alova和请求库的关系 前言 Alova官网 Alova—github官网 alova 是什么 alova 是一个轻量级的…

Qt实现图片旋转的几种方式(全)

目录 一、用手搓&#xff08;QPainter&#xff09; 二、使用 QGraphicsView 和 QGraphicsPixmapItem 三、使用 QTransform 实现图像旋转 四、利用 OpenGL 实现旋转图像的效果有几种不同的方法&#xff0c;其中常见的包括&#xff1a; 手动旋转绘制&#xff1a; 使用 QPaint…

Linux中的进程程序替换

Linux中的进程程序替换 1. 替换原理2. 替换函数3. 函数解释4. 命名理解程序替换的意义 1. 替换原理 替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往往要调用一种exec函数以执行另一个程序。当进程调用一种exec函数时,该进程的…

Java Stream中的API你都用过了吗?

公众号「架构成长指南」&#xff0c;专注于生产实践、云原生、分布式系统、大数据技术分享。 在本教程中&#xff0c;您将通过大量示例来学习 Java 8 Stream API。 Java 在 Java 8 中提供了一个新的附加包&#xff0c;称为 java.util.stream。该包由类、接口和枚举组成&#x…

web需求记录

需求1&#xff1a;根据后端传过来的设备名:DESKTOP-4DQRGQB&#xff0c;以及mac:e0:be:03:74:40:0b&#xff1b;iQOO-8&#xff0c;mac:b0:33:66:38:c3:25&#xff0c;用web option 是动态增加的&#xff08;也就是那个选择框里面的东西是根据后端传过来的值动态增加的&#xf…

基于Qt的UDP通信、TCP文件传输程序的设计与实现——QQ聊天群聊

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言一…

【C++】vector的介绍与使用

&#x1f9d1;‍&#x1f393;个人主页&#xff1a;简 料 &#x1f3c6;所属专栏&#xff1a;C &#x1f3c6;个人社区&#xff1a;越努力越幸运社区 &#x1f3c6;简 介&#xff1a;简料简料&#xff0c;简单有料~在校大学生一枚&#xff0c;专注C/C/GO的干货分…

【Vue】自定义指令

自定义指令 自定义指令就是自己定义的指令&#xff0c;是对 DOM 元素进行底层操作封装 ,程序化地控制 DOM&#xff0c;拓展额外的功能 全局定义 Vue.directive(指令名字, definition) 指令名&#xff1a;不包括v-前缀&#xff0c;使用时候包括v-&#xff0c;v-指令名defini…

VPS配置了swap没发挥作用怎么办

1 swap配置了但没用上 我的服务器内存是2G&#xff0c;装多一点东西就不够用&#xff0c;于是我给他分配了2G的swap&#xff0c;等了几小时&#xff0c;swap还是一点都没有使用 Linux中Swap&#xff08;即&#xff1a;交换分区&#xff09;&#xff0c;类似于Windows的虚拟内存…

IT变更管理实现服务台高效协同

在当今数字化时代&#xff0c;IT变更管理是IT管理员在服务台中必须面对的重要挑战之一。随着技术的不断发展和市场的快速变化&#xff0c;管理员需要定期进行IT系统和流程的变更&#xff0c;在确保业务稳定性的同时还需提高效率和准确率。 1、全方位的变更计划 IT中应该有一个全…

如何使用YOLOv8代码框架中的RT-DETR

1. RT-DETR RT-DETR是由由此&#xff0c;百度推出了——RT-DETR (Real-Time DEtection TRansformer) &#xff0c;一种基于 DETR 架构的实时端到端检测器&#xff0c;其在速度和精度上取得了 SOTA 性能。 RT-DETR开源的代码在百度自己的飞桨paddlepaddle上&#xff0c;因此非…