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

news2025/1/24 17:45:51

目录

背景:

过程:

无序列表:

 简介:

代码展示:

效果展示:​

无序列表:

 简介:

效果展示:​

自定义列表:

简介:

效果展示:    

总结:


背景:

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

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

相关文章

编译器02-词法分析

一&#xff1a;简述 词法分析含义&#xff1a;为了翻译语言&#xff0c;编译器把程序各种成分拆开&#xff0c;那如何拆&#xff0c;首先第一步就是将输入分解成一个个独立的单词(token)&#xff0c;这一过程叫词法分析。 二&#xff1a;单词(token)分为哪些种类 保留字…

类和对象:构造函数,析构函数与拷贝构造函数

1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器…

MAC M1芯片安装mounty读写移动硬盘中的文件

因为移动硬盘中的文件是微软公司NTFS格式&#xff0c;MAC只支持自己的APFS或者HFS&#xff0c;与微软的NTFS不兼容&#xff0c;所以需要第三方的软件来支持读写硬盘中的文件&#xff0c;经过一上午的折腾&#xff0c;最终选择安装mounty这个免费的第三方软件 工具网址连接&am…

C++11 类型转换

#include<iostream> #include<string> using namespace std;//类型转换 void Insert(size_t pos, char ch) {size_t _size 5;//....int end _size - 1;while (end > pos) // end隐式类型转换{//_str[end 1] _str[end];--end;} } void Test1() {int i 1;// …

C++:内存管理

目录 学习目标 1. C/C内存分布 2. C/C动态内存管理 2.1 C动态内存管理 2.2 C动态内存管理&#xff1a; 3. operator new与operator delete函数 4. new和delete的实现原理 5. 定位new表达式 学习目标 1. C/C内存分布 2. C/C动态内存管理&#xff08;malloc,free 与new ,…

【深度学习实战—6】:基于Pytorch的血细胞图像分类(通用型图像分类程序)

✨博客主页&#xff1a;米开朗琪罗~&#x1f388; ✨博主爱好&#xff1a;羽毛球&#x1f3f8; ✨年轻人要&#xff1a;Living for the moment&#xff08;活在当下&#xff09;&#xff01;&#x1f4aa; &#x1f3c6;推荐专栏&#xff1a;【图像处理】【千锤百炼Python】【深…

SQL Server2022版本 + SSMS安装教程(手把手安装教程)

SqlServer安装步骤如下&#xff1a; 下载请点点我 1.选择Developer版 2.点击浏览器下载标志&#xff0c;找到SqlServer在文件夹的位置。 3.进入下面的界面&#xff1a;选择自定义版本 4.将下载的C盘的盘符改为D盘 5.点击安装–进入下一步&#xff0c;显示如下界面。 过…

构建知识库的核心要义,试试我的工具和方法吧!

对于企业来说&#xff0c;如果所有人员的知识和经验&#xff0c;都集中沉淀到统一的文档系统中&#xff0c;那么&#xff0c;久而久之&#xff0c;会形成一个丰富的知识和经验库。 在构建知识库之前&#xff0c;我们要先确定知识库范围包含&#xff1a;素材整理、问题提炼、知识…

【Selenium】webdriver.ChromeOptions()官方文档参数

Google官方Chrome文档&#xff0c;在此记录一下 Chrome Flags for Tooling Many tools maintain a list of runtime flags for Chrome to configure the environment. This file is an attempt to document all chrome flags that are relevant to tools, automation, benchm…

7、Spring之依赖注入源码解析(下)

resolveDependency()实现 该方法表示,传入一个依赖描述(DependencyDescriptor),该方法会根据该依赖描述从BeanFactory中找出对应的唯一的一个Bean对象。 @Nullable Object resolveDependency(DependencyDescriptor descriptor, @Nullable String requestingBeanName,@Null…

拦截器学习

什么是拦截器 Spring MVC 中的拦截器( Interceptor )类似于ServLet中的过滤器( Filter )&#xff0c;它主要用于拦截用户请求并作出相应的处理。例如通过拦截器可以进行权限验证、记录请求信息的日志、判断用户是否登录等。 工作原理 一个拦截器&#xff0c;只有 preHandle …

mac电脑安装paste教程以及重新安装软件后不能使用解决方法

问题背景 mac电脑安装paste教程以及重新安装软件后不能使用解决方法。 mac电脑安装paste失败&#xff0c;安装好后还是无法使用&#xff0c;paste显示还是历史粘贴信息&#xff0c;导致无法使用。新 copy的内容也无法进入历史粘贴版里面。 笔者电脑配置信息&#xff1a;MacB…

7.13 在SpringBoot中 正确使用Validation实现参数效验

文章目录 前言引入Maven依赖一、POST/PUT RequestBody参数校验1.1 Valid或Validated注解配合constraints注解1.2 测试运行 二、GET/DELETE RequestParam参数校验2.1 Validated注解配合constraints注解2.2 测试运行 三、GET 无注解参数校验3.1 Valid或Validated注解配合constrai…

【OpenCV • c++】直方图计算 | 绘制 H-S 直方图 | 绘制一维直方图 | 绘制 RGB 三色直方图

文章目录 一、什么是直方图二、直方图的相关函数1、计算直方图 calcHist()2、找寻最值 minMaxLoc() 三、程序演示1、色调 —— 饱和度直方图2、一维直方图3、RGB 三色直方图 一、什么是直方图 直方图广泛应用于很多计算机视觉处理当中。通过标记帧与帧之间显著的边缘和颜色的变…

【数据结构】 二叉搜索树的实现

文章目录 &#x1f340;二叉搜索树的概念&#x1f6ec;二叉搜索树功能实现&#x1f6a9;查找关键字key&#x1f4cc;代码实现&#xff1a; &#x1f6a9;插入关键字key&#x1f4cc;代码实现&#xff1a; &#x1f6a9;删除关键字key&#x1f4cc;代码实现&#xff1a; &#x…

OpenCV(三十四):轮廓外接最大、最小矩形和多边形拟合

目录 1.轮廓外接最大矩形boundingRect() 2.轮廓外接最小矩形minAreaRect() 3.轮廓外接多边形approxPolyDP() 1.轮廓外接最大矩形boundingRect() Rect cv::boundingRect ( InputArray array ) array:输入的灰度图像或者2D点集&#xff0c;数据类型为vector<Point>或者M…

OpenCV实现图像的混合

原理 这其实也是加法&#xff0c;但是不同的是两幅图像的权重不同&#xff0c;这就会给人一种混合或者透明的感觉。 图像混合的计算公式如下: g(x)(1-a)f0(x) af1(x) 通过修改α的值(0→1) &#xff0c;可以实现非常炫酷的混合。 现在我们把两幅图混合在一起。 第一幅图…

C 风格文件输入/输出---无格式输入/输出---(std::fputc,std::putc,std::fputs)

C 标准库的 C I/O 子集实现 C 风格流输入/输出操作。 <cstdio> 头文件提供通用文件支持并提供有窄和多字节字符输入/输出能力的函数&#xff0c;而 <cwchar>头文件提供有宽字符输入/输出能力的函数。 无格式输入/输出 写字符到文件流 std::fputc, std::putc in…

软件测试面试遇到之redis要怎么测试?

软件测试面试遇到&#xff1a;redis要怎么测试&#xff1f; 首先我们需要知道&#xff0c;redis是什么&#xff1f;它能做什么&#xff1f; redis是一个 key-value 类型的高速存储数据库。redis常被用做&#xff1a;缓存、队列、发布订阅等。 所以&#xff0c;“redis要怎么…

第18章_瑞萨MCU零基础入门系列教程之GPT

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…