前端学习之列表标签

目录

有序列表

结果

无序标签

结果

数据标签

结果


有序列表

(注:注释是解释)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<!-- 
    列表
1、有序列表
    ol
    li标签包裹数据
    type属性
    1的意思有序列表默认类型是数字从1开始升序
    A字母序号大写 a小写字母序号
    i表示罗马数字
    start属性
    可以选择起始位置,数字过了9999就会从0001开始
2、无序列表
    ul
    type属性
    disc有类型属性默认实心圆
    circle空心圆
    square实心正方形
3、数据列表
    使用dl嵌套
    dt包裹标题
    dd包裹内容
 -->
<body>
    <ol type="1" start="9999">
                <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
    </ol>
    <ol type="A" start="100">
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
    </ol>
    <ol type="a">
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
    </ol>
    <ol type="i">
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
    </ol>

    
</body>
</html>

结果

无序标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表
      ul
    disc有类型属性默认实心圆
    circle空心圆
    square实心正方形
    -->
    <ul type="disc">
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
    </ul>
    </ul>
    <ul type="circle">
    <li>测试内容</li>
    <li>测试内容</li>
    <li>测试内容</li>
    <li>测试内容</li>
    </ul>
    <ul type="square">
    <li>测试内容</li>
    <li>测试内容</li>
    <li>测试内容</li>
    <li>测试内容</li>
    </ul>
</body>
</html>

结果

数据标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>数据分类</dt>
        <dd>言情</dd>
        <dd>玄幻</dd>
        <dd>恐怖</dd>
        <dt>数据分类</dt>
        <dd>言情</dd>
        <dd>玄幻</dd>
        <dd>恐怖</dd>
        <dt>数据分类</dt>
        <dd>言情</dd>
        <dd>玄幻</dd>
        <dd>恐怖</dd>
    </dl>
    
</body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL数据库管理

本章内容&#xff1a; 掌握数据库的查看方法掌握MySQL 库和表的创建和删除方法掌握MySQL 增删改查常见操作掌握MySQL 用户权限 1.1使用MySQL数据库 在熟悉安装及访问MySQL 数据库以后&#xff0c;接下来将学习MySQL 数据库的基本操作&#xff0c; 这也是在服务器运维工作工不…

windows使用pyenv

1、前言 虽然anaconda比pyenv相比有更好的python安装体验&#xff0c;但是有一个比较严重的问题的就是&#xff0c;他的python版本跨度不够大&#xff0c;一些老一些的项目的python版本找不到&#xff0c;比如py12306要求的python版本是3.6&#xff0c;在anaconda却找不到这个版…

10.网络文件系统( NFS)使用

网络文件系统&#xff08; NFS&#xff09; 使用 NFS 优点&#xff1a; 开发过程中不受开发板空间的限制&#xff0c;直接使用网络文件就像使用本地文件一样&#xff1b;调试过程中避免一一将编译后的应用程序和库文件复制到开发板上。 在开发板中使用网络文件系统可以为开发和…

python 网络库集锦

目录 通用网络库 网络爬虫框架 1.功能齐全的爬虫 2.其他 HTML/XML解析器 1.通用 2.清理 文本处理 自然语言处理 浏览器自动化与仿真 多重处理 异步网络编程库 队列 云计算 网页内容提取 WebSocket DNS解析 计算机视觉 通用网络库 1.urllib -网络库(stdlib)。…

RabbitMQ - 03 - Work消息模型

目录 部署demo项目 什么是Work消息模型 实现Work消息模型 1.创建队列 2.生产者代码 3.消费者代码 4.配置yml 部署demo项目 通过消息队列demo项目进行练习 相关配置看此贴 http://t.csdnimg.cn/hPk2T 注意 生产者消费者的yml文件也要配置好 什么是Work消息模型 工作…

Python实现线性查找算法

Python实现线性查找算法 以下是使用 Python 实现线性查找算法的示例代码&#xff1a; def linear_search(arr, target):"""线性查找算法:param arr: 要搜索的数组:param target: 目标值:return: 如果找到目标值&#xff0c;返回其索引&#xff1b;否则返回 -1…

DJI RONIN 4D摄像机mov无法播放的修复方法

DJI大疆是无人机领域的一哥&#xff0c;最近几年大疆除了巩固无人机方面的技术实力还额外加强了其它领域产品的开发&#xff0c;而RONIN 4D的发布说明了大疆进军影视级的决心和实力。下边来看下DJI RONIN 4D生成的MOV文件无法播放的修复方法。 故障文件: 237.1G MOV文件 故障…

Java高频面试之并发篇

有需要互关的小伙伴,关注一下,有关必回关,争取今年认证早日拿到博客专家 Java高频面试之总纲篇 Java高频面试之集合篇 Java高频面试之异常篇 Java高频面试之并发篇 Java高频面试之SSM篇 Java高频面试之Mysql篇 Java高频面试之Redis篇 Java高频面试之消息队列与分布式篇…

实时工业控制系统的创新整合:PLC4X与CnosDB的高效数据采集与存储

在当代工业自动化系统中&#xff0c;实时监测和数据分析变得至关重要。本文将介绍如何通过集成Apache PLC4X与CnosDB&#xff0c;实现对工业控制系统中的PLC设备进行高效数据采集和存储&#xff0c;为工程师们提供更强大的数据分析和监测工具。 PLC的定义 PLC是可编程逻辑控制…

【前端】vscode快捷键和实用Api整理

vscode的快捷键 创建a.html 生成模板 !回车 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" …

MySQl基础入门⑦

上一章知识内容 分析数据且区分数据类型 看下表分析数据的特征&#xff0c;根据其特征确定相应的数据类型。 分析以上表格特征&#xff0c;确定数据类型&#xff0c;并对数据进行分类。分析数据后按固定长度字符串、可变长度字符串、整数、固定精度小数和日期时间数据类型对数…

稀碎从零算法笔记Day14-LeetCode:同构字符串

题型&#xff1a;字符串、哈希表 链接&#xff1a;205. 同构字符串 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给定两个字符串 s 和 t &#xff0c;判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t &#xff0c;那…

【算法面试题】-04

执行时长 def min_execution_time(n, size, tasks):a 0ans sizei 0while i < size:tmp tasks[i]a tmpif a < n:a 0else:a - ni 1ans a // nif a % n ! 0:ans 1return ans# 读取输入 n int(input()) size int(input()) tasks list(map(int, input().split()))…

Unity使用Addressable热更新

先看热更新的gif: Addressable是Unity推出的打ab包方案。不需要手动写AB打包脚手架了&#xff0c;不需要关心依赖&#xff0c;这也简化了ab热更新的流程。Addressable打包需要先将资源放入group中&#xff0c;按group来打包&#xff0c;每个group对应一个ScriptableObject的配置…

线程-创建线程的方法、线程池

1.创建线程一共有哪几种方法&#xff1f; 继承Thread类创建线程 继承Thread类&#xff0c;重写run()方法&#xff0c;在main()函数中调用子类的strat()方法 实现Runnable接口创建线程 先创建实现Runnable接口的类&#xff0c;重写run()方法&#xff0c;创建类的实例对象&#…

(南京观海微电子)——I3C协议介绍

特点 两线制总线&#xff1a;I2C仅使用两条线——串行数据线&#xff08;SDA&#xff09;和串行时钟线&#xff08;SCL&#xff09;进行通信&#xff0c;有效降低了连接复杂性。多主多从设备支持&#xff1a;I2C支持多个主设备和多个从设备连接到同一总线上。每个设备都有唯一…

靶场:sql-less-18(HTTP头注入)

本文操作环境&#xff1a;Kali-Linux 靶场链接&#xff1a;Less-18 Header Injection- Error Based- string 输入用户名和密码以后&#xff0c;我们发现屏幕上回显了我们的IP地址和我们的User Agent 用hackbar抓取POST包&#xff0c;在用户名和密码的位置判断注入点&#xff0…

【设计模式】(四)设计模式之工厂模式

1. 工厂模式介绍 工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式有三种实现方式&#xff1a; 简单工厂模式工厂方法模式抽象工厂模式 2. 工厂方…

自动创建word文档的exe文件,自定义文件名、保存路径

目录 一、exe 二、使用方法 三、代码 四、Python打包exe 一、exe 百度网盘: 链接&#xff1a;https://pan.baidu.com/s/1dyCo_iVv7fb369BHbwGjHg 提取码&#xff1a;2333 夸克网盘: 链接&#xff1a;https://pan.quark.cn/s/36b14a53cccd 二、使用方法 1. 下载完成后双…

排序(7)——非递归快排

前面我们已经写了快排用递归的方法实现&#xff0c;在数据量大的时候&#xff0c;有可能会栈溢出。这里我们尝试一下改为非递归。 区分&#xff1a; 数据结构的栈——利用的是内存中的堆空间内存的栈——利用就是内存中的栈空间——函数创建函数栈帧堆的空间是远远大于栈的空…