HTML-列表标签

news2025/1/7 17:14:47

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

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

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. 列表项 B
  1. 列表项 B1
  2. 列表项 B2
  3. 列表项 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.coloradmin.cn/o/2272042.html

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

相关文章

【GUI-pyqt5】QWidget类

1. 描述 所有可视空间的基类是一个最简单的空白控件控件是用户界面的最小元素 接收各种事件&#xff08;鼠标、键盘&#xff09;绘制在桌面上&#xff0c;显示给用户看 每个控件都是矩形的&#xff0c;它们按z轴顺序排序控件由其父控件和前面的控件剪切没有父控件的控件&#…

SpringBoot Maven 项目 pom 中的 plugin 插件用法整理

把 SpringBoot Maven 项目打包成 jar 文件时&#xff0c;我们通常用到 spring-boot-maven-plugin 插件。 前面也介绍过&#xff0c;在 spring-boot-starter-parent POM 和 spring-boot-starter POM 中都有插件的管理&#xff0c;现在我们就撸一把构建元素中插件的用法。 一、…

springboot实战纪实-课程介绍

教程介绍 Spring Boot是由Pivotal团队提供的一套开源框架&#xff0c;可以简化spring应用的创建及部署。它提供了丰富的Spring模块化支持&#xff0c;可以帮助开发者更轻松快捷地构建出企业级应用。 Spring Boot通过自动配置功能&#xff0c;降低了复杂性&#xff0c;同时支持…

源代码编译安装X11及相关库、vim,配置vim(2)

一、编译安装vim 编译时的cofigure选项如下.只有上一步的X11的包安装全了&#xff08;具体哪些是必须的&#xff0c;哪些是多余的没验证&#xff09;&#xff0c;configure才能认为X的库文件和头文件是可以用的 ./configure --prefixpwd/mybuild \--x-includes/path/to/X11/m…

直接插入排序、折半插入排序、2路插入排序、希尔排序

本篇是排序专栏博客的第一篇&#xff0c;主要探讨以 “插入” 为核心思想的排序算法该如何实现 文章目录 一、前言二、直接插入排序1. 算法思想与操作分析2. 代码实现version 1version 2 3. 复杂度分析 三、折半插入排序1. 算法思想与操作分析2. 代码实现3. 复杂度分析 四、2路…

Ansible之批量管理服务器

文章目录 背景第一步、安装第二步、配置免密登录2.1 生成密钥2.2 分发公钥2.3 测试无密连接 背景 Ansible是Python强大的服务器批量管理 第一步、安装 首先要拉取epel数据源&#xff0c;执行以下命令 yum -y install epel-release安装完毕如下所示。 使用 yum 命令安装 an…

让 Agent 具备语音交互能力:技术突破与应用前景(16/30)

让 Agent 具备语音交互能力&#xff1a;技术突破与应用前景 一、引言 在当今数字化时代&#xff0c;人机交互方式正经历着深刻的变革。从早期的命令行界面到图形用户界面&#xff0c;再到如今日益普及的语音交互&#xff0c;人们对于与机器沟通的便捷性和自然性有了更高的追求…

学生作业完成情况管理程序

网上看到的一个课程设计,正好练练手。 首先设计数据库 数据库有三张表&#xff0c;分别是班级表&#xff0c;学生表&#xff0c;作业成绩表。 学生表中外键关联班级表&#xff0c;作业成绩表中外键关联学生表。具体如下图所示 班级表 学生表学生表外键关联 …

基于vue的商城小程序的毕业设计与实现(源码及报告)

环境搭建 ☞☞☞ ​​​Vue入手篇(一)&#xff0c;防踩雷(全网最详细教程)_vue force-CSDN博客 目录 一、功能介绍 二、登录注册功能 三、首页 四、项目截图 五、源码获取 一、功能介绍 用户信息展示&#xff1a;页面顶部设有用户头像和昵称展示区&#xff0c;方便用户识别…

DeepSeek V3“报错家门”:我是ChatGPT

搜 &#xff1a;海讯无双Ai 要说这两天大模型圈的顶流话题&#xff0c;那绝对是非DeepSeek V3莫属了。 不过在网友们纷纷测试之际&#xff0c;有个bug也成了热议的焦点—— 只是少了一个问号&#xff0c;DeepSeek V3竟然称自己是ChatGPT。 甚至让它讲个笑话&#xff0c;生成…

利用webworker解决性能瓶颈案例

目录 js单线程的问题webworker的基本使用webworker的常见应用可视化优化导出Excel js单线程的问题 众所周知&#xff0c;js不擅长计算&#xff0c;计算是同步的&#xff0c;大规模的计算会让js主线程阻塞&#xff0c;导致界面完成卡死。比如有一个600多亿次的计算&#xff0c;…

深入理解卷积神经网络(CNN):图像识别的强大工具

1、引言 卷积神经网络&#xff08;CNN&#xff09;是一种深度学习模型&#xff0c;特别适合分析视觉数据。它们在处理图像和视频任务时表现尤为出色。由于CNN在物体识别方面的高效性&#xff0c;这种网络架构广泛应用于计算机视觉领域&#xff0c;例如图像分类、物体检测、面部…

R语言安装教程与常见问题

生物信息基础入门笔记 R语言安装教程与常见问题 今天和大家聊一个非常基础但是很重要的技术问题——如何在不同操作系统上安装R语言&#xff1f;作为生物信息学数据分析的神兵利器&#xff0c;R语言的安装可谓是入门第一步&#xff0c;学术打工人的必备技能。今天分享在Windows…

VOC数据集格式转YOLO格式

将VOC格式的数据集转换为YOLO格式通常涉及以下几个步骤。YOLO格式的标注文件是每个图像对应一个.txt文件&#xff0c;文件中每一行表示一个目标&#xff0c;格式为&#xff1a; <class_id> <x_center> <y_center> <width> <height>其中&#xf…

win10搭建zephyr开发环境

搭建环境基于 zephyr官方文档 基于官方文档一步一步走很快就可以搞定 一、安装chocolatey 打开官网 https://community.chocolatey.org/courses/installation/installing?methodinstall-from-powershell-v3 1、用管理员身份打开PowerShell &#xff08;1&#xff09;执行 …

物体切割效果

1、物体切割效果是什么 在游戏开发中&#xff0c;物体切割效果就是物体看似被切割、分割或隐藏一部分的视觉效果。 这种效果常用与游戏和动画中&#xff0c;比如角色攻击时的切割效果&#xff0c;场景中的墙壁切割效果等等。 2、物体切割效果的基本原理 在片元着色器中判断片…

k8s集群监控系统部署方案

1.方案介绍 本文介绍一种k8s集群监控系统,该系统可以监控k8s集群中的pod和node的性能指标,以及K8s资源对象的使用情况。 监控流程: 集群资源数据采集(cadvisor、node-exporter、kube-state-metrics)-- 数据收集、存储、处理等(prometheus)-- 数据可视化查询和展示(gra…

RP2K:一个面向细粒度图像的大规模零售商品数据集

这是一种用于细粒度图像分类的新的大规模零售产品数据集。与以往专注于相对较少产品的数据集不同&#xff0c;我们收集了2000多种不同零售产品的35万张图像&#xff0c;这些图像直接在真实的零售商店的货架上拍摄。我们的数据集旨在推进零售对象识别的研究&#xff0c;该研究具…

Linux(Centos 7.6)命令详解:ls

1.命令作用 列出目录内容(list directory contents) 2.命令语法 Usage: ls [OPTION]... [FILE]... 3.参数详解 OPTION: -l&#xff0c;long list 使用长列表格式-a&#xff0c;all 不忽略.开头的条目&#xff08;打印所有条目&#xff0c;包括.开头的隐藏条目&#xff09…

比QT更高效的一款开源嵌入式图形工具EGT-Ensemble Graphics Toolkit

文章目录 EGT-Ensemble Graphics Toolkit介绍EGT具备非常高的图形渲染效率EGT采用了非常优秀的开源2D图形处理引擎-Cairo开源2D图形处理引擎Cairo的优势Cairo 2D图像引擎的性能Cairo 2D图像引擎的实际应用案例彩蛋 - 开源EDA软件KiCAD也在使用Cairo EGT高效的秘诀还有哪些Cairo…