HTML的有序列表、无序列表、自定义列表

目录

背景:

过程:

无序列表:

 简介:

代码展示:

效果展示:​

无序列表:

 简介:

效果展示:​

自定义列表:

简介:

效果展示:    

总结:


背景:

     1.有序列表(Ordered List):
有序列表是最早的列表类型之一,最初在 HTML 2.0 中就被引入了。在 HTML 4.01 中,有序列表被进一步规范化,并增加了 <ol> 标签和 type 属性,以支持数字和字母数字混合的有序列表。
     2.无序列表(Unordered List):
无序列表最初也是在 HTML 2.0 中被引入的。在 HTML 4.01 中,无序列表被进一步规范化,并增加了 <ul> 标签和 type 属性,以支持自定义符号的无序列表。
     3.自定义列表(Custom List):
自定义列表最初在 HTML 4.01 中被引入,它允许开发人员使用 CSS 样式表来自定义列表的符号、颜色和字体等属性。在 HTML 5 中,自定义列表的语法更加简洁,可以通过 <li> 元素的 class 属性来指定自定义符号。

过程:

有序列表:

 简介:

       顾名思义,有序列表(order List)就是按照特定得顺序列出项目得一种方式,每个项目都有一个唯一得数字或字母来进行标记,应用于:操作说明(每一步如何操作)、网页热度排行榜(清楚的知道热度的高低)、时间顺序(每件事情发生的先后顺序)等等...
     符号:<ol> </ol>、<li></li>,可以通过Type属性来修改项目列表中得编号类型,表达式:Type=””,下面我用阿拉伯数字(默认是数字也可以不写)、字母、以及罗马字母来表示列表得序号

代码展示:

<html><head><tiele>有序列表</title></head><body><ol type="1"><!--默认阿拉伯数字类型,可以不写--><li>唐僧</li><li>孙悟空</li><li>猪八戒</li><li>沙和尚</li></ol><hr/><!--分隔符,展示效果更佳--><ol type="A"><!--字母类型表示--><li>唐僧</li><li>孙悟空</li><li>猪八戒</li><li>沙和尚</li><hr/><!--分隔符,展示效果更好--><ol type="I"><!--罗马数字类型表示--><ul><li>唐僧</li><li>孙悟空</li><li>猪八戒</li><li>沙和尚</li></ol></body>
</html>

效果展示:

无序列表:

 简介:

     无序列表(Unorder List)是没有顺序的项目列表,是一种常用得列表类型,它通常呈现不需要特定顺序显示得信息,应用于:功能列表(知道每个功能或操作得名称)、账单(方便用户查找和浏览)、项目清单(让用户清楚知道每个项目得名称和简介)。
      符号:<ul> </ul>、<li></li>,可以通过Type属性来修改项目列表中得类型,表达式:Type=””,在下面我用disk(默认圆点,可以不写)、square(方块)、circle(圆圈)标记
代码展示:

<html><head><tiele>无序列表</title></head><body><ul type="disk"><!--默认圆点类型,可以不写--><li>唐僧</li><li>孙悟空</li><li>猪八戒</li><li>沙和尚</li></ul><hr/><!--分隔符,展示效果更好--><ul type="square"><!--方块类型表示--><li>唐僧</li><li>孙悟空</li><li>猪八戒</li><li>沙和尚</li><hr/><!--分隔符,展示效果更好--><ul type="I"><!--圆圈类型表示--><ul><li>唐僧</li><li>孙悟空</li><li>猪八戒</li><li>沙和尚</li></ul></body>
</html>

效果展示:

自定义列表:

简介:

    自定义列表(Custom List)是可以子当以项目符号和样式的列表类型,它可以用于呈现具有特定样式需求的信息。应用于:文章结构(设置不同的符号和样式)、电影表单(设置不同的样式)等
    符号:<dl> </dl>、<dt></dt>、<dd></dd>可以通过Type属性来修改项目列表中得类型,表达式:Type=””,<dl>可以理解文章的标题,<dt>可以理解文章的子标题,<dd>可以理解为文章的内容,下面我就一段西游记的文章来说明一下吧。
代码展示:

     <head><title>自定义列表</title></head><body><font size="6" face="全新硬笔行书简"><!--设置字体大小和字体样式--><h1><dl>西游记</h1><dt>简介:</dt><dd>《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。今见最早的《西游记》版本是明代万历二十年金陵世德堂《新刻出像官板大字西游记》,未署作者姓名。  鲁迅、董作宾等人根据《淮安府志》“吴承恩《西游记》”的记载予以最终论定“吴承恩原著”。 该小说主要讲述了孙悟空出世,跟随菩提祖师学艺及大闹天宫后,遇见了唐僧、猪八戒、沙僧和白龙马,西行取经,一路上历经艰险,降妖除魔,经历了九九八十一难,终于到达西天见到如来佛祖,最终五圣成真的故事。该小说以“玄奘取经”这一历史事件为蓝本,经作者的艺术加工,深刻地描绘出明代百姓的社会生活状况。《西游记》是中国神魔小说的经典之作,达到了古代长篇浪漫主义小说的巅峰,与《三国演义》《水浒传》《红楼梦》并称为中国古典四大名著。《西游记》自问世以来在民间广为流传,各式各样的版本层出不穷。明代刊本有六种,清代刊本、抄本也有七种,典籍所记已佚版本十三种。鸦片战争以后,大量中国古典文学作品被译为西文,《西游记》渐渐传入欧美,被译为英、法、德、意、西、手语、世(世界语)、斯(斯瓦希里语)、俄、捷、罗、波、日、朝、越等语言。</dd></dl><body>
</html>

效果展示:

总结:

      在HTML中无论是,有序、无序、还是自定义列表,都是作用于项目的列表中,这些列表元素可以帮助开发者更好地组织呈现信息,使得页面更加得清晰、易读、易于导航。同时,它们也是HTML中最基础得元素之一

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

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

相关文章

Spring Web Flow远程代码执行漏洞复现(CVE-2017-4971)

一、搭建环境 cd vulhub/spring/CVE-2017-4971 docker-compose up -d 影响版本:Spring Web Flow 2.4.0 ~ 2.4.4 触发条件: 1.MvcViewFactoryCreator对象的useSpringBeanBinding参数需要设置为false&#xff08;默认值&#xff09; 2. flow view对象中设置BinderConfiguration…

Yolov5如何训练自定义的数据集,以及使用GPU训练,涵盖报错解决

本文主要讲述了Yolov5如何训练自定义的数据集&#xff0c;以及使用GPU训练&#xff0c;涵盖报错解决&#xff0c;案例是检测图片中是否有救生圈。 最后的效果图大致如下&#xff1a; 效果图1效果图2 前言 系列文章 1、详细讲述Yolov5从下载、配置及如何使用GPU运行 2、…

数据结构大作业 成绩分析c语言程序设计

界面加载 界面展示 成绩输入 求平均成绩 升序排列 降序排列 名字排序 按名字搜索 按ID搜索 每门课成绩分析 成绩单展示 -

Mac 手动安装 sshpass

1. 下载安装包 https://sourceforge.net/projects/sshpass/ 解压并进入到安装包目录 tar -zxvf sshpass-xx.xx.tar.gz cd sshpass-xx.xx2. 检验环境&#xff0c;编译源码安装 ./configuremake&&make install3. 检测安装是否成功 ▶ sshpass Usage: sshpass [-f|-…

2023/9/8 -- C++/QT

作业 1> 自行封装一个栈的类&#xff0c;包含私有成员属性&#xff1a;栈的数组、记录栈顶的变量 成员函数完成&#xff1a;构造函数、析构函数、拷贝构造函数、入栈、出栈、清空栈、判空、判满、获取栈顶元素、求栈的大小 02stack.h: #ifndef __02STACK_H__ #define __…

网络协议从入门到底层原理学习(三)—— 路由

网络协议从入门到底层原理学习&#xff08;三&#xff09;—— 路由 1、简介 路由&#xff08;routing&#xff09;是指分组从源到目的地时&#xff0c;决定端到端路径的网络范围的进程 在不同网段之间转发数据&#xff0c;需要有路由器的支持 默认情况下&#xff0c;路由器…

linux并发服务器 —— 项目实战(九)

阻塞/非阻塞、同步/异步 数据就绪 - 根据系统IO操作的就绪状态 阻塞 - 调用IO方法的线程进入阻塞状态&#xff08;挂起&#xff09; 非阻塞 - 不会改变线程的状态&#xff0c;通过返回值判断 数据读写 - 根据应用程序和内核的交互方式 同步 - 数据的读写需要应用层去读写 …

[VSCode] 替换掉/去掉空行

VSCode中使用快捷键CtrlH&#xff0c;出现替换功能&#xff0c;在上面的“查找”框中输入正则表达式&#xff1a; ^\s*(?\r?$)\n然后选择右侧的“使用正则表达式”&#xff1b;“替换”框内为空&#xff0c;点击右侧的“全部替换”&#xff0c;即可去除所有空行。 参考 [VS…

MySQL 连接出现 Authentication plugin ‘caching_sha2_password‘ cannot be loaded

在使用Navicat Premium 12连接MySQL数据库时会出现Authentication plugin caching_sha2_password cannot be loaded 出错 出现这个原因是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password, 解决问题方法&#xff1a;把my…

Linux内核分析与应用2-内存寻址

本系列是对 陈莉君 老师 Linux 内核分析与应用[1] 的学习与记录。讲的非常之好&#xff0c;推荐观看 留此记录&#xff0c;蜻蜓点水,可作抛砖引玉 2.1 内存寻址 数据连续存储和选择读取思想,是目前我们使用的几乎所有机器运行背后的灵魂 计算机体系结构中的核心问题之一,就是如…

AP5101C 高压线性恒流IC 宽电压6-100V LED汽车大灯照明 台灯LED矿灯 指示灯电源驱动

产品描述 AP5101C 是一款高压线性 LED 恒流芯片 &#xff0c; 外围简单 、 内置功率管 &#xff0c; 适用于6- 100V 输入的高精度降压 LED 恒流驱动芯片。电流2.0A。AP5101C 可实现内置MOS 做 2.0A,外置 MOS 可做 3.0A 的。AP5101C 内置温度保护功能 &#xff0c;温度保护点为…

力扣(LeetCode)算法_C++——稀疏矩阵的乘法

给定两个 稀疏矩阵 &#xff1a;大小为 m x k 的稀疏矩阵 mat1 和大小为 k x n 的稀疏矩阵 mat2 &#xff0c;返回 mat1 x mat2 的结果。你可以假设乘法总是可能的。 示例 1&#xff1a; 输入&#xff1a;mat1 [[1,0,0],[-1,0,3]], mat2 [[7,0,0],[0,0,0],[0,0,1]] 输出&am…

mysql 增量备份与恢复使用详解

目录 一、前言 二、数据备份策略 2.1 全备 2.2 增量备份 2.3 差异备份 三、mysql 增量备份概述 3.1 增量备份实现原理 3.1.1 基于日志的增量备份 3.1.2 基于时间戳的增量备份 3.2 增量备份常用实现方式 3.2.1 基于mysqldump增量备份 3.2.2 基于第三方备份工具进行增…

Vue中表单手机号验证与手机号归属地查询

下面是一篇关于Vue中如何进行表单手机号验证与手机号归属地查询的Markdown格式的文章&#xff0c;包含代码示例。 Vue中表单手机号验证与手机号归属地查询 手机号验证和归属地查询是许多Web应用程序中常见的功能之一。在Vue.js中&#xff0c;我们可以轻松地实现这两个功能。本…

如何使用Web Storage对页面中数据进行监听?

当使用Web Storage存储的数据发生变化时&#xff0c;会触发Window对象的storage事件&#xff0c;我们可以监听该事件并指定事件处理函数&#xff0c;当其他页面中的localStorage或 sessionStorage中保存的数据发生改变时&#xff0c;就会执行事件处理函数。 监听storage事件的…

SpotBugs(是FindBugs的继任者)安装、使用

SpotBugs介绍 SpotBugs和FindBugs的关系 SpotBugs是FindBugs的继任者&#xff0c;从SpotBugs停止的地方继续。 备注&#xff1a;FindBugs项目已经停止了&#xff0c;从2015年发布3.0.1版本以后再没有新的版本。 SpotBugs通过静态分析寻找java代码中的bug&#xff0c;通过发现…

JavaScript 运行时比较: Node.js、 Deno 和 Bun

文章目录 为什么选择正确的 JavaScript 运行时很重要介绍 JavaScript 运行时Node.jsDenoBun 比较 JavaScript 运行时性能社区稳定性安全附加功能 小结 JavaScript 运行时可帮助您构建高级的、服务器驱动的 JavaScript 项目&#xff0c;这些项目不依赖于用户的浏览器来运行。 有…

Linux 安装配置使用 FTP 服务

学习场景&#xff1a;使用摄像机做区域报警&#xff0c;预警后将预警图片传输到 FTP 服务上&#xff0c;所以搭一个环境测试一下&#xff0c;这里我使用的是树莓派 4B&#xff0c;官方 32 位系统&#xff0c;其他 Linux 系统应该通用 下面说两个 FTP 应用 一、vsftpd vsftpd 是…

基于python实现贪心算法、蛮力法、动态规划法解决分数背包问题和0-1背包问题(附完整源码下载)

背包问题算法设计 问题要求在一个物品集合中选择合适的物品放入背包&#xff0c;在放入背包中的物品总重量不超过背包容量的前提下&#xff0c;希望放入背包的物品总价值最大。根据是否允许部分物品放入背包的要求&#xff0c;背包问题可以分为【分数背包问题】和【0-1背包问题…

形态图像处理

形态图像处理 预备知识 反射、平移结构元 腐蚀和膨胀 腐蚀 将 B 平移&#xff0c;当其原点位于 z 时&#xff0c;其包含在 A 中&#xff0c;则 z 为一个有效的位置&#xff0c;所有有效的z构成了腐蚀之后的结果腐蚀缩小或细化了二值图像中的物体可以将腐蚀看作形态学滤波操…