前端学习之列表标签

news2024/9/29 3:34:30

目录

有序列表

结果

无序标签

结果

数据标签

结果


有序列表

(注:注释是解释)

<!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.coloradmin.cn/o/1506550.html

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

相关文章

Image Demoireing with Learnable Bandpass Filters

一、简介 标题:Image Demoireing with Learnable Bandpass Filters(https://openaccess.thecvf.com/content_CVPR_2020/papers/Zheng_Image_Demoireing_with_Learnable_Bandpass_Filters_CVPR_2020_paper.pdf) 期刊:CVPR 时间:2020 作者:Bolun Zheng, Shanxin Yuan, …

Google浏览器122.下载驱动

打开网址&#xff1a;Chrome for Testing availability (googlechromelabs.github.io) 选择stable 选择对应的驱动就行

前后端交互理解 简易表白墙(servlet)

前后端交互理解 简易表白墙&#xff08;servlet&#xff09; 文章目录 前后端交互理解 简易表白墙&#xff08;servlet&#xff09;后端核心内容前后端交互接口约定后端代码展示 上期介绍过 Servlet API &#xff0c;本篇文章目的是借助 servlet 做出一个完整的网站。在一个网站…

Spring Boot 面试题及答案整理,最新面试题

Spring Boot中的自动配置是如何工作的&#xff1f; Spring Boot的自动配置是其核心特性之一&#xff0c;它通过以下方式工作&#xff1a; 1、EnableAutoConfiguration注解&#xff1a; 这个注解告诉Spring Boot开始查找添加了Configuration注解的类&#xff0c;并自动配置它们…

怎么看待Groq

用眼睛看。 就是字面上的意思用眼睛看。 我属于第一波玩到的,先给大家一个直观的印象,Groq到底有多快。 目前Groq只能选Llama的70b,和Mixtral的MoE,那我选7*8的这个MoE模型来实验。 这么好些字大概花了不到1秒,流式响应,其实是不是流式已经没那么重要了 ,然后看每秒Toke…

第二十二周周报

论文研读&#xff1a;Camera Distance-aware Top-down Approach for 3D Multi-person Pose Estimation from a Single RGB Image 粗读10篇文献。 通过图2 我可以知道这个论文大概实现的这个姿态估计效果的方法&#xff0c;首先是把图片输入到DetectNet网络&#xff0c;该网络…

也就老炮知道:UI设计师和前端,以前叫美工和切片。

过去&#xff0c;UI设计师常常被称为美工&#xff0c;而前端开发人员被称为切片工。这是因为在过去的网页设计中&#xff0c;UI设计师主要负责设计网页的外观和用户界面&#xff0c;包括颜色、布局、图标等&#xff0c;类似于传统的美工工作。而前端开发人员则负责将UI设计师提…

搭建nacos集群,并通过nginx实现负载均衡

nacos、eureka、consul、zookeeper等都是常用的微服务注册中心&#xff0c;这篇文章详细介绍一下在Ubuntu操作系统上搭建一个nacos的集群&#xff0c;以及通过nginx的反向代理功能实现nacos的负载均衡。 目录 一、安装nacos 1、安装nacos 2、修改nacos配置文件 3、创建naco…

Cocos Creator 2d光照

godot游戏引擎是有2d光照的&#xff0c;用起来感觉还是很强大的&#xff0c;不知道他是怎么搞的&#xff0c;有时间看看他们怎么实现的。 之前一直以为cocos社区里面没有2d光照的实现&#xff0c;偶然看到2d实现的具体逻辑&#xff0c;现在整理如下&#xff0c; 一&#xff1…

Spring Boot 中解决跨域的多种方式

Spring Boot 中解决跨域的多种方式 《踏过跨域障碍&#xff1a;Spring Boot 中解决跨域的多种方式》摘要引言正文何为跨域跨域问题出现特征方式一&#xff1a;使用 CrossOrigin 注解方式二&#xff1a;自定义 WebMvcConfigurer方式三&#xff1a;使用 Filter 进行跨域配置 结论…

java之lombok

Lombok是一个实用的java类库&#xff0c;能通过注解的形式自动生成构造器&#xff0c; getter setter equsls hashcode tostring等方法 并且可以自动化生成日志变量&#xff0c;简化java开发&#xff0c;提高效率 作用 导入 <dependency><groupId>org.projectlomb…

集合框架(一)Set系列集合

Set<E>是一个接口 特点 无序&#xff1a;添加数据的顺序和获取出的数据顺序不一致&#xff1b;不重复&#xff0c;无索引 注意&#xff1a;Set要用到的常用方法&#xff0c;基本上就是collection提供的!自己几乎没有额外新增一些常用功能! HashSet集合的底层原理 前置知…

我们的一生都是在挤火车。

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 昨天从燕郊坐火车回石家庄&#xff0c;由于赶上元旦假期&#xff0c;所有高铁票都售罄&#xff0c;一张普通火车票&#xff0c;还是一周前就买才买到的。 从燕郊站&#xff0c;到北京站&#xff0c;然后地铁去北京西站…

C++虚继承的一些细节

C虚继承的一些细节 何时使用虚继承普通继承的类对象布局虚继承类对象布局虚函数表指针虚函数表内容 何时使用虚继承 看代码&#xff0c;代码主要是菱形继承&#xff0c;base里面的成员变量会存在二义性 #include<iostream> using namespace std;class base { public:in…

【机器学习】从线性回归模型看一个简单的成本函数

&#x1f338;博主主页&#xff1a;釉色清风&#x1f338;文章专栏&#xff1a;机器学习&#x1f338;今日语录&#xff1a;事情不做&#xff0c;越想越难&#xff1b;事情做了&#xff0c;越做越容易。 从线性回归模型看一个简单的成本函数 &#x1f33c;引入&#xff1a;模型…

基于SpringBoo的火车订票管理系统(程序+文档+数据库)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

2024年【G2电站锅炉司炉】考试题及G2电站锅炉司炉证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【G2电站锅炉司炉】考试题及G2电站锅炉司炉证考试&#xff0c;包含G2电站锅炉司炉考试题答案和解析及G2电站锅炉司炉证考试练习。安全生产模拟考试一点通结合国家G2电站锅炉司炉考试最新大纲及G2电站锅炉司炉考…

LVS (Linux Virtual server)集群介绍

一 集群和分布式 &#xff08;一&#xff09;系统性能扩展方式&#xff1a; Scale UP&#xff1a;垂直扩展&#xff0c;向上扩展,增强&#xff0c;性能更强的计算机运行同样的服务 &#xff08;即升级单机的硬件设备&#xff09; Scale Out&#xff1a;水平扩展&#xff0…

Python 学会typing的类型注解面向泛型编程

文章目录 文章开篇typing模块简介typing模块作用基本类型注解1.不使用类型注解2.使用类型注解 泛型1.List2.Tuple3.Set4.Dict 特殊类型1.Any2. Union2. Optional4. Callable 类型别名1.TypeVar2. NewType 更多技巧1.NoReturn和None2.Sequence3. Generator 总结 文章开篇 Python…

VUE_自适应布局lib-flexible+postcss-pxtorem、lib-flexible + postcss-px2rem,nuxt页面自适配

lib-flexible postcss-pxtorem适配 我采用的是flexable.js和postcss-pxtorem。我一开始用的是postcss-px2rem后来发现和nuxt引入公共css的时候发生了冲突所以改用了postcss-pxtorem。 安装依赖 npm i lib-flexible -S npm install postcss-pxtorem --save 1、lib-flexible.…