HTML-列表标签

列表是一系列排列好的项目,主要分成两类:有序列表和无序列表。

有序列表是每个列表项前面有编号,呈现出顺序,就像下面这样。

1. 列表项 A
2. 列表项 B
3. 列表项 C

无序列表则是列表项前面没有编号,只有一个列表符号,默认是一个圆点。

· 列表项 A
· 列表项 B
· 列表项 C

<ol>

<ol>标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。列表项的顺序有意义时,比如排名,就会采用这个标签。

<ol><li>列表项 A</li><li>列表项 B</li><li>列表项 C</li>
</ol>

上面代码会在列表项 A、B、C 前面,分别产生1、2、3的编号。

<ol>标签内部可以嵌套<ol>标签或<ul>标签,形成多级列表。

<ol><li>列表项 A</li><li>列表项 B<ol><li>列表项 B1</li><li>列表项 B2</li><li>列表项 B3</li></ol></li><li>列表项 C</li>
</ol>

上面代码中,一个有序列表内部嵌套了另一个有序列表,渲染结果如下。

1. 列表项 A
2. 列表项 B1. 列表项 B12. 列表项 B23. 列表项 B3
3. 列表项 C

该标签有以下属性。

(1)reversed

reversed属性产生倒序的数字列表。

<ol reversed><li>列表项 A</li><li>列表项 B</li><li>列表项 C</li>
</ol>

上面代码中,列表项 A、B、C 前面,产生的编号是3、2、1。

(2)start

start属性的值是一个整数,表示数字列表的起始编号。

<ol start="5"><li>列表项 A</li><li>列表项 B</li><li>列表项 C</li>
</ol>

上面代码中,列表项 A、B、C 前面,产生的编号是5、6、7。

(3)type

type属性指定数字编号的样式。目前,浏览器支持以下样式。

  • a:小写字母
  • A:大写字母
  • i:小写罗马数字
  • I:大写罗马数字
  • 1:整数(默认值)
<ol type="a"><li>列表项 A</li><li>列表项 B</li><li>列表项 C</li>
</ol>

上面代码中,列表项 A、B、C 前面的编号,分别是英文小写字母a、b、c。

注意,即使编号是字母,start属性也依然使用整数。

<ol type="a" start="3"><li>列表项 A</li><li>列表项 B</li><li>列表项 C</li>
</ol>

上面代码中,type属性指定编号采用小写英文字母,start属性等于3,表示从c开始编号。

<ul>

<ul>标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。列表项的顺序无意义时,采用这个标签。

<ul><li>列表项 A</li><li>列表项 B</li><li>列表项 C</li>
</ul>

上面代码的渲染结果是,列表项 A、B、C 前面,分别产生一个实心小圆点,作为列表符号。

<ul>标签内部可以嵌套<ul><ol>,形成多级列表。

<li>

<li>表示列表项,用在<ol><ul>容器之中。

有序列表<ol>之中,<li>有一个value属性,定义当前列表项的编号,后面列表项会从这个值开始编号。

<ol><li>列表项 A</li><li value="4">列表项 B</li><li>列表项 C</li>
</ol>

上面代码中,value属性指定第二个列表项的编号是4,因此三个列表项的编号,分别为1、4、5。

<dl><dt><dd>

<dl>标签是一个块级元素,表示一组术语的列表(description list)。术语名(description term)由<dt>标签定义,术语解释(description detail)由<dd>标签定义。<dl>常用来定义词汇表。

<dl><dt>CPU</dt><dd>中央处理器</dd><dt>Memory</dt><dd>内存</dd><dt>Hard Disk</dt><dd>硬盘</dd>
</dl>

<dt><dd>都是块级元素,<dd>默认会在<dt>下方缩进显示。上面代码的默认渲染结果如下。

CPU中央处理器Memory内存Hard Disk硬盘

多个术语(<dt>)对应一个解释(<dd>),或者多个解释(<dd>)对应一个术语(<dt>),都是合法的。

<dl><dt>A</dt><dt>B</dt><dd>C</dd><dt>D</dt><dd>E</dd><dd>F</dd>
</dl>

上面代码中,AB有共同的解释C,而D有两个解释EF

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

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

相关文章

GESP202406 二级【计数】题解(AC)

》》》点我查看「视频」详解》》》 [GESP202406 二级] 计数 题目描述 小杨认为自己的幸运数是正整数 k k k&#xff08;注&#xff1a;保证 1 ≤ k ≤ 9 1 \le k\le 9 1≤k≤9&#xff09;。小杨想知道&#xff0c;对于从 1 1 1 到 n n n 的所有正整数中&#xff0c; k…

SpringMVC(六)拦截器

目录 1.什么是拦截器 2.拦截器和过滤器有哪些区别 3.拦截器方法 4.单个拦截器的执行流程 5.使用拦截器实现用户登录权限验证&#xff08;实例&#xff09; 1.先在html目录下写一个login.html文件 2.在controller包下写一个LoginController文件 3.加拦截器 1.创建一个conf…

基于Arduino的FPV头部追踪相机系统

构建FPV头部追踪相机&#xff1a;让你置身于遥控车辆之中&#xff01; 在遥控车辆和模型飞行器的世界中&#xff0c;第一人称视角&#xff08;FPV&#xff09;体验一直是爱好者们追求的目标。通过FPV头部追踪相机&#xff0c;你可以像坐在车辆或飞行器内部一样&#xff0c;自由…

jQuery get 方法内操控vue变量(异步ajax请求方法中操控双向绑定的响应式变量)实现异步请求函数内完成变量的双向响应式绑定

// 首先&#xff0c;创建一个Vue实例 new Vue({ el: #app, data: { message: Hello, Vue! }, mounted: function() { var self this; // 使用jQuery发起get请求 $.get(your/api/url, function(data) { // 当请求成功完成后&#xff0c;更新Vue实…

Spring boot接入xxl-job

Spring boot接入xxl-job 导入maven包加入配置增加配置类创建执行器类&#xff08;写job的业务逻辑&#xff09;去控制台中配置job 导入maven包 <dependency><groupId>com.xuxueli</groupId><artifactId>xxl-job-core</artifactId><version>…

【超详细】React SSR 服务端渲染实战

前言 这篇文章和大家一起来聊一聊 React SSR&#xff0c;本文更偏向于实战。你可以从中学到&#xff1a; 从 0 到 1 搭建 React SSR 服务端渲染需要注意什么 react 18 的流式渲染如何使用 文章如有误&#xff0c;欢迎指出&#xff0c;大家一起学习交流&#xff5e;。 &…

25年对AI产业的25点预测以及展望思考

| 2025 大宝同学对于AI 产业 25点预测&#xff0c;他自嘲道&#xff1a;“做不做 250 不重要&#xff0c;重要的是不违背自己的良知&#xff0c;以及对自身物种的坚信。”&#x1f600;ps&#xff1a;因大宝的这篇文章基文涉猎太过于广泛&#xff0c;考虑到某些原因&#xff0c…

Qt之屏幕录制设计(十六)

Qt开发 系列文章 - screencap&#xff08;十六&#xff09; 目录 前言 一、实现原理 二、实现方式 1.创建录屏窗口 2.录屏窗口类定义 3.自建容器对象定义 4.用户使用 5.效果演示 总结 前言 利用Qt实现屏幕录制设计&#xff0c;可以通过使用Qt自带的类QScreen、QPixma…

实时高保真人脸编辑方法PersonaMagic,可根据肖像无缝生成新角色、风格或场景图像。

今天给大家介绍的是一个高保真实时人脸编辑方法PersonaMagic&#xff0c;通过分阶段的文本条件调节和动态嵌入学习来优化人脸定制。该技术利用时序动态的交叉注意力机制&#xff0c;能够在不同阶段有效捕捉人脸特征&#xff0c;从而在生成个性化图像时最大程度地保留身份信息。…

我的创作纪念日——《惊变128天》

我的创作纪念日——《惊变128天》 机缘收获日常成就憧憬 机缘 时光飞逝&#xff0c;转眼间&#xff0c;我已在这条创作之路上走过了 128 天。回顾起 2024 年 8 月 29 日&#xff0c;我满怀忐忑与期待&#xff0c;撰写了第一篇技术博客《讲解LeetCode第1题&#xff1a;两数之和…

常见的框架漏洞复现

1.Thinkphp Thinkphp5x远程命令执行及getshell 搭建靶场 cd vulhub/thinkphp/5-rce docker-compose up -d 首页 漏洞根本源于 thinkphp/library/think/Request.php 中method方法可以进行变量覆盖&#xff0c;通过覆盖类的核心属性filter导致rce&#xff0c;其攻击点较为多&…

云备份项目--服务端编写

文章目录 7. 数据管理模块7.1 如何设计7.2 完整的类 8. 热点管理8.1 如何设计8.2 完整的类 9. 业务处理模块9.1 如何设计9.2 完整的类9.3 测试9.3.1 测试展示功能 完整的代码–gitee链接 7. 数据管理模块 TODO: 读写锁&#xff1f;普通锁&#xff1f; 7.1 如何设计 需要管理…

flutter在windows平台中运行报错

PS D:\F\luichun> flutter run当运行flutter项目时&#xff0c;【解决如下报错】 /C:/flutter/packages/flutter/lib/src/painting/star_border.dart:530:27: Error: The getter Matrix4 isnt defined for the class _StarGenerator.- _StarGenerator is from package:flut…

Synthesia技术浅析(二):虚拟人物视频生成

Synthesia 的虚拟人物视频生成模块是其核心技术之一&#xff0c;能够将文本输入转换为带有同步语音和口型的虚拟人物视频。该模块如下所示&#xff1a; 1.文本输入处理 2.语音生成&#xff08;TTS, Text-to-Speech&#xff09; 3.口型同步&#xff08;Lip Syncing&#xff0…

[Linux]进程间通信-共享内存与消息队列

目录 一、共享内存 1.共享内存的原理 2.共享内存的接口 命令行 创建共享内存 共享内存的挂接 去掉挂接 共享内存的控制 3.共享内存的使用代码 Comm.hpp--封装了操作接口 客户端--写入端 服务器--读取端 4.管道实现共享内存的同步机制 二、消息队列 1.底层原理 2…

凸包(convex hull)简述

凸包&#xff08;convex hull&#xff09;简述 这里主要介绍二维凸包&#xff0c;二维凸多边形是指所有内角都在 [ 0 , Π ] [0,\Pi ] [0,Π]范围内的简单多边形。 凸包是指在平面上包含所有给定点的最小凸多边形。 数学定义&#xff1a;对于给定集合 X X X&#xff0c;所有…

【ArcGISPro/GeoScenePro】检查多光谱影像的属性并优化其外观

数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 操作 其他数据 检查影像的属性 熟悉检查您正在使用的栅格属性非常重要。

提升汽车金融租赁系统的效率与风险管理策略探讨

内容概要 在汽车金融租赁系统这个复杂的生态中&#xff0c;提升整体效率是每个企业都渴望达成的目标。首先&#xff0c;优化业务流程是实现高效运行的基础。通过分析目前的流程&#xff0c;找出冗余环节并进行简化&#xff0c;能够帮助企业缩短审批时间&#xff0c;提高客户满…

以太网UDP协议栈实现(支持ARP、ICMP、UDP)--FPGA学习笔记26

纯verilog实现&#xff0c;仅使用锁相环IP、FIFO IP&#xff0c;方便跨平台移植。支持ping指令。 以太网系列文章&#xff1a; 以太网ICMP协议(ping指令)——FPGA学习笔记25-CSDN博客 以太网ARP协议——FPGA学习笔记23-CSDN博客 以太网PHY_MDIO通信&#xff08;基于RTL821…

edeg插件/扩展推荐:助力生活工作

WeTab 此插件在我看来有2个作用 1.改变edeg的主页布局和样式,使其更加精简,无广告 2.提供付费webtab Ai(底层是chatGpt) 沉浸式翻译 此插件可翻译网页的内容 假设我们浏览github 翻译前 翻译后 Better Ruler 可以对网页的距离进行测量 适合写前端的小伙伴 用法示例: