当前位置： 首页 > article >正文

如何在 HTML 中创建一个有序列表和无序列表，它们的语义有何不同？

article 2026/3/1 15:01:51

大白话如何在 HTML 中创建一个有序列表和无序列表，它们的语义有何不同？

1. HTML 中有序列表和无序列表的基本概念

在 HTML 里，列表是一种用来组织信息的方式。有序列表就是带有编号的列表，它可以让内容按照一定的顺序呈现；无序列表则是用符号（像圆点、方块等）来标记每一项内容，重点在于展示并列的信息，不强调顺序。

2. 创建无序列表

无序列表使用 <ul> 标签来创建，每一项内容用 <li> 标签包裹。下面是具体的代码示例，代码里有详细注释：

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="en"> <!-- 设定 HTML 文档的语言为英语 --><head><meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配不同设备的视口设置 --><title>无序列表示例</title> <!-- 设置网页标题 -->
</head><body><!-- 创建一个无序列表 --><ul><!-- 列表的第一项 --><li>苹果</li><!-- 列表的第二项 --><li>香蕉</li><!-- 列表的第三项 --><li>橙子</li></ul>
</body></html>

在这个示例中，<ul> 标签就像是一个容器，把所有的列表项都装在里面。每个 <li> 标签代表列表中的一项，浏览器会默认用圆点来标记这些项。

3. 创建有序列表

有序列表使用 <ol> 标签来创建，同样每一项内容用 <li> 标签包裹。以下是带有注释的代码示例：

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="en"> <!-- 设定 HTML 文档的语言为英语 --><head><meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配不同设备的视口设置 --><title>有序列表示例</title> <!-- 设置网页标题 -->
</head><body><!-- 创建一个有序列表 --><ol><!-- 列表的第一项 --><li>起床</li><!-- 列表的第二项 --><li>刷牙洗脸</li><!-- 列表的第三项 --><li>吃早餐</li></ol>
</body></html>

这里的 <ol> 标签也是一个容器，不过浏览器会自动给每个 <li> 标签内的内容加上编号，从 1 开始依次递增。

4. 有序列表和无序列表的语义差异

  • 无序列表：适合用来展示那些没有先后顺序关系的内容，比如水果的种类、书籍的清单等。它主要是把相关的信息并列在一起，不强调顺序。
  • 有序列表：适合用来展示有先后顺序或者步骤性的内容，像任务的执行步骤、事件的发生顺序等。它能让读者清晰地知道每个步骤的先后关系。

总结来说，有序列表和无序列表虽然都是用来组织信息的，但根据内容的特点和需要表达的逻辑，要选择合适的列表类型。

如何在网页中嵌套有序列表和无序列表？

在网页中嵌套有序列表和无序列表可以让内容的层次更加清晰。下面为你展示具体的操作方法以及示例代码。

嵌套规则

在 HTML 里，你能够在 <ul>（无序列表）或者 <ol>（有序列表）标签里嵌套另一种列表标签，也就是在无序列表中嵌套有序列表，或者在有序列表中嵌套无序列表。要保证每一个嵌套的列表都处于一个 <li>（列表项）标签内部，这样就能确保列表结构的正确性。

示例代码

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="en"> <!-- 设定 HTML 文档的语言为英语 --><head><meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配不同设备的视口设置 --><title>嵌套列表示例</title> <!-- 设置网页标题 -->
</head><body><!-- 创建一个有序列表 --><ol><!-- 有序列表的第一项 --><li>学习编程的步骤<!-- 在第一项中嵌套一个无序列表 --><ul><!-- 无序列表的第一项 --><li>选择编程语言</li><!-- 无序列表的第二项 --><li>学习基础语法</li><!-- 无序列表的第三项 --><li>做一些小项目练习</li></ul></li><!-- 有序列表的第二项 --><li>选择编程语言的考虑因素<!-- 在第二项中嵌套一个无序列表 --><ul><!-- 无序列表的第一项 --><li>应用场景</li><!-- 无序列表的第二项 --><li>学习难度</li><!-- 无序列表的第三项 --><li>就业前景</li></ul></li></ol><!-- 创建一个无序列表 --><ul><!-- 无序列表的第一项 --><li>水果<!-- 在第一项中嵌套一个有序列表 --><ol><!-- 有序列表的第一项 --><li>苹果</li><!-- 有序列表的第二项 --><li>香蕉</li><!-- 有序列表的第三项 --><li>橙子</li></ol></li><!-- 无序列表的第二项 --><li>蔬菜<!-- 在第二项中嵌套一个有序列表 --><ol><!-- 有序列表的第一项 --><li>胡萝卜</li><!-- 有序列表的第二项 --><li>西兰花</li><!-- 有序列表的第三项 --><li>菠菜</li></ol></li></ul>
</body></html>

在这里插入图片描述

代码解释

  • 有序列表嵌套无序列表：在第一个 <ol> 标签创建的有序列表里，每个 <li> 标签代表一个步骤。在部分 <li> 标签内，又嵌套了 <ul> 标签来列出与该步骤相关的具体内容。
  • 无序列表嵌套有序列表：在 <ul> 标签创建的无序列表中，每个 <li> 标签代表一个类别。在部分 <li> 标签内，嵌套了 <ol> 标签来按顺序列出该类别下的具体内容。

通过这样的嵌套操作，能够让网页上的信息层次更加清晰，便于用户理解内容之间的关系。

相关文章：

如何在 HTML 中创建一个有序列表和无序列表，它们的语义有何不同？

大白话如何在 HTML 中创建一个有序列表和无序列表&#xff0c;它们的语义有何不同&#xff1f; 1. HTML 中有序列表和无序列表的基本概念 在 HTML 里&#xff0c;列表是一种用来组织信息的方式。有序列表就是带有编号的列表&#xff0c;它可以让内容按照一定的顺序呈现&#…...

编程日记 2026/2/25 21:32:01

【武汉·4月11日】Parasoft联合光庭信息研讨会|邀您共探AI赋能新机遇

Parasoft联合光庭信息Workshop邀您共探AI赋能新机遇 AI浪潮已至&#xff0c;你准备好了吗&#xff1f; 在智能网联汽车飞速发展的今天&#xff0c;AI技术正以前所未有的速度重塑行业生态。如何把握AI机遇&#xff0c;赋能企业创新&#xff1f; 4月11日&#xff0c;自动化软件…...

编程日记 2026/2/20 1:28:28

PHP PSR（PHP Standards Recommendations）介绍

PHP PSR&#xff08;PHP Standards Recommendations&#xff09;是 PHP 社区制定的一系列标准化规范&#xff0c;旨在统一 PHP 代码的编写方式、接口设计和开发实践&#xff0c;以提高代码的可读性、可维护性和互操作性。以下是核心 PSR 标准的解读和具体使用方法&#xff1a; …...

编程日记 2026/2/18 12:14:50

闻所闻尽：穿透声音的寂静，照见生命的本真

在《楞严经》的梵音缭绕中&#xff0c;"闻所闻尽"四个字如晨钟暮鼓&#xff0c;叩击着每个修行者的心门。这个源自观世音菩萨耳根圆通法门的核心概念&#xff0c;既是佛门修行的次第指引&#xff0c;更蕴含着东方哲学对生命本质的终极叩问。当我们穿越时空的帷幕&…...

编程日记 2026/2/22 7:42:38

F28335进入非法中断ILLEGAL_ISR定位

在非法中断函数中&#xff0c;再调用一个函数接口&#xff0c;比如save_illegal_error()&#xff0c;然后在save_illegal_error中实现如下代码&#xff1a; g_illegal_isr_sp 0;(这个是全局变量&#xff0c;需要先定义 &#xff09; asm( “ MOVW ACC, SP\n” " MOVL …...

编程日记 2026/2/18 0:00:59

PreparedStatement 和 Statement 从 功能、性能、安全性、适用场景 等维度详细对比分析

以下是 PreparedStatement 和 Statement 的对比分析&#xff0c;从 功能、性能、安全性、适用场景 等维度详细说明&#xff1a; 1. 核心区别 特性PreparedStatementStatement定义预编译的 SQL 语句&#xff0c;支持参数化查询执行静态 SQL 语句&#xff0c;不支持参数占位符安…...

编程日记 2026/2/15 0:32:01

VLAN综合实验报告

一、实验拓扑 网络拓扑结构包括三台交换机&#xff08;LSW1、LSW2、LSW3&#xff09;、一台路由器&#xff08;AR1&#xff09;以及六台PC&#xff08;PC1-PC6&#xff09;。交换机之间通过Trunk链路相连&#xff0c;交换机与PC、路由器通过Access或Hybrid链路连接。 二、实验…...

编程日记 2026/2/16 12:25:37

使用 Docker 部署 mysql 应用

使用 Docker 部署 环境搭建 Docker 安装文档 创建容器 在系统任意位置创建一个文件夹&#xff08;可选&#xff09; mkdir -p /opt/docker/mysql && cd /opt/docker/mysqlmkdir ./{conf,data,logs}搜索 & 拉取镜像 docker search mysql docker pull mysql:5.6启…...

编程日记 2025/12/25 2:11:22

美团Leaf分布式ID实战：深入解析雪花算法原理与应用

&#x1f4d6; 前言 在分布式系统中&#xff0c;全局唯一ID生成是保证数据一致性的核心技术之一。传统方案&#xff08;如数据库自增ID、UUID&#xff09;存在性能瓶颈或无序性问题&#xff0c;而美团开源的Leaf框架提供了高可用、高性能的分布式ID解决方案。本文重点解析Leaf…...

编程日记 2025/12/21 7:16:03

Midjourney使用教程—2.作品修改

当您已生成第一张Midjourney图像的时候&#xff0c;接下来该做什么&#xff1f;了解我们用于修改图像的工具&#xff01;使用 Midjourney 制作图像后&#xff0c;您的创意之旅就不会止步于此。您可以使用各种工具来修改和增强图像。 一、放大操作 Midjourney每次会根据提示词…...

编程日记 2026/3/1 0:58:07

【人工智能】LM Studio 的 GPU 加速：释放大模型推理潜能的极致优化

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 随着大语言模型（LLM）的广泛应用，其推理效率成为限制性能的关键瓶颈。LM Studio 作为一个轻量级机器学习框架，通过 GPU 加速显著提升了大…...

编程日记 2025/9/5 11:36:59

S32K144入门笔记（十七）：PDB的API函数解读

文章目录 1. SDK中的函数2. API函数的释义 1. SDK中的函数 在SDK中并没有转为PDB设置专门的PAL驱动&#xff0c;在基本的DRIVER库中一共有21个API函数&#xff0c;本文将解读这些函数的功能。 2. API函数的释义 void PDB_DRV_Init(const uint32_t instance,const pdb_timer_…...

编程日记 2026/2/17 9:14:13

3.5 平滑滤波

请注意:笔记内容片面粗浅&#xff0c;请读者批判着阅读&#xff01; 一、引言 平滑空间滤波是数字图像处理中用于降低噪声和模糊细节的核心技术&#xff0c;常用于图像预处理或特定场景下的视觉效果优化。其核心思想是通过邻域像素的加权平均或统计操作&#xff0c;抑制高频噪…...

编程日记 2026/2/24 12:54:38

自动化测试框架pytest+requests+allure

Pytest requests Allure 这个框架基于python的的 Pytest 进行测试执行&#xff0c;并结合 Allure插件 生成测试报告的测试框架。采用 关键字驱动 方式&#xff0c;使测试用例更加清晰、模块化&#xff0c;同时支持 YAML 文件来管理测试用例&#xff0c;方便维护和扩展。 测试…...

编程日记 2026/2/16 4:22:47

Sympy入门之微积分基本运算

Sympy是一个专注于符号数学计算的数学工具&#xff0c;使得用户可以轻松地进行复杂的符号运算&#xff0c;如求解方程、求导数、积分、级数展开、矩阵运算等。本文&#xff0c;我们将详细讲解Sympy在微积分运算中的应用。 获取方式 pip install -i https://mirrors.tuna.tsin…...

编程日记 2026/3/1 3:32:15

Qemu-STM32(十)：STM32F103开篇

简介 本系列博客主要描述了STM32F103的qemu模拟器实现&#xff0c;进行该项目的原因有两点: 作者在高铁上&#xff0c;想在STM32F103上验证一个软件框架时&#xff0c;如果此时掏出开发板&#xff0c;然后接一堆的线&#xff0c;旁边的人估计会投来异样的目光&#xff0c;特别…...

编程日记 2026/2/19 7:55:13

在 ABAP 开发工具 (ADT-ABAP Development Tools) 中创建ABAP 项目

第一步&#xff1a;安装 SAP NetWeaver 的 ABAP 开发工具 (ADT) 开发工具下载地址&#xff1a;https://tools.hana.ondemand.com/#abap 也可以在SAP Development Tools下载工具页面直接跳转到对应公开课教程页面&#xff0c;按课程步骤下载eclipse解压安装即可&#xff0c;过程…...

编程日记 2026/2/20 17:03:13

【架构】单体架构 vs 微服务架构：如何选择最适合你的技术方案？

文章目录 ⭐前言⭐一、架构设计的本质差异&#x1f31f;1、代码与数据结构的对比&#x1f31f;2、技术栈的灵活性 ⭐二、开发与维护的成本博弈&#x1f31f;1、开发效率的阶段性差异&#x1f31f;2、维护成本的隐形陷阱 ⭐三、部署与扩展的实战策略&#x1f31f;1、部署模式的本…...

编程日记 2026/2/27 7:47:01

【鸿蒙开发】Hi3861学习笔记- WIFI应用AP建立网络

00. 目录 文章目录 00. 目录01. LwIP简介02. AP模式简介03. API描述3.1 RegisterWifiEvent3.2 UnRegisterWifiEvent3.3 GetStationList3.4 GetSignalLevel3.5 EnableHotspot3.6 DisableHotspot3.7 SetHotspotConfig3.8 GetHotspotConfig3.9 IsHotspotActive 04. 硬件设计05. 模…...

编程日记 2026/2/20 15:46:26

大模型的微调技术（高效微调原理篇）

背景 公司有需求做农业方向的大模型应用以及Agent助手&#xff0c;那么适配农业数据就非常重要。但众所周知&#xff0c;大模型的全量微调对算力资源要求巨大&#xff0c;在现实的限制条件下基本“玩不起”&#xff0c;那么高效微调技术就非常必要。为了更好地对微调技术选型和…...

编程日记 2026/2/21 19:39:40

区间震荡指标

区间震荡指标的逻辑如下&#xff1a; 一、函数注解 1. Summation函数 功能&#xff1a; 计算给定价格序列Price的前Length个数据点的和&#xff0c;或在数据点数量超过Length时&#xff0c;计算滚动窗口内的价格和。 参数&#xff1a; Price(1)&#xff1a;价格序列&#…...

编程日记 2026/2/21 23:24:02

HCIE-SLAAC

文章目录 SLAAC &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Datacom专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2025年03月21日10点58分 SLAAC 帮助设备发现本地直连链路相连的设备&#xff0c;并获取与地址自动配置的相关前缀和其他…...

编程日记 2026/2/22 0:11:43

JavaScript | 爬虫逆向 | 掌握基础 | 01

一、摘要 实践是最好的导师 二、环境配置 在开始之前&#xff0c;需要确保你的计算机上已经安装了 Node.js。Node.js 是一个开源的、跨平台的 JavaScript 运行时环境&#xff0c;它允许你在服务器端运行 JavaScript 代码。 1. 下载 安装地址&#xff1a;https://nodejs.org…...

编程日记 2026/2/21 8:57:51

【PCIe 总线及设备入门学习专栏 3.2 -- PCIe 在进行大数据搬运时是如何组包的？】

文章目录 Overview1. PCIe数据传输的核心机制(1) 数据分割(2) TLP头部构造(3) 数据链路层封装(4) 物理层传输2. GPU从内存搬运数据的组包流程场景示例：3. 优化机制(1) 大页传输（TLP合并）(2) 流量控制与信用机制(3) 地址对齐优化4. 完整示例5. 性能影响Overview 本文将详细介…...

编程日记 2025/12/21 18:56:23

C++算法代码-植物生长算法求解多目标车辆路径规划问题

为了求解电商物流配送中的车辆路径规划问题，并同时优化多个目标（降低运营总成本、降低碳排放量、降低消费者的不满意程度），我们可以设计一个结合植物生长算法（Plant Growth Algorithm, PGA）、**模拟退火算法（Simulated Annealing, SA）和多目标优化算法（MODAD）**的组合…...

编程日记 2025/12/25 5:44:09

力扣算法Hot100——128. 最长连续序列

题目要求时间复杂度为O(n)&#xff0c;因此不能使用两次循环匹配。 首先使用 HashSet 去重&#xff0c;并且 HashSet 查找一个数的复杂度为O(1)外循环还是遍历set集合&#xff0c;里面一重循环需要添加判断&#xff0c;这样才不会达到O( n 2 n^2 n2)判断是否进入最长序列查找循…...

编程日记 2026/2/15 22:41:21

深入解析 Java Stream API：从 List 到 Map 的优雅转换！！！

&#x1f680; 深入解析 Java Stream API&#xff1a;从 List 到 Map 的优雅转换 &#x1f527; 大家好&#xff01;&#x1f44b; 今天我们来聊聊 Java 8 中一个非常常见的操作&#xff1a;使用 Stream API 将 List 转换为 Map。&#x1f389; 具体来说&#xff0c;我们将深入…...

编程日记 2026/2/25 2:20:37

当全球化成为商业常态，Shopify 如何为品牌生意铺平出海之路？

从独立站搭建到支付履约&#xff0c;从数据分析到生态整合&#xff0c;Shopify 为不同规模的企业提供可扩展的解决方案。 在数字化浪潮的推动下&#xff0c;跨境电商与品牌出海的黄金时代已然到来。然而&#xff0c;看似广阔的市场蓝海背后&#xff0c;是无数企业正在经历的“成…...

编程日记 2026/2/28 18:10:19

集成平台是选择专业iPaaS厂商还是大型软件企业？

在数字化转型的浪潮中&#xff0c;企业对于高效、灵活的集成平台需求日益增长。iPaaS&#xff08;Integration Platform as a Service&#xff09;作为当下热门的解决方案&#xff0c;为企业提供了将不同应用和数据源进行整合的云端平台。面对市场上的众多选择&#xff0c;企业…...

编程日记 2025/12/17 16:37:40

RC6在线加密工具

RC6加密算法是一种基于RC5改进的分组密码算法&#xff0c;曾作为AES&#xff08;高级加密标准&#xff09;的候选算法之一。它采用了4个32位寄存器&#xff0c;增加了32位整数乘法运算&#xff0c;以增强扩散和混淆特性&#xff0c;提高了安全性。RC6的设计简单、高效&#xff…...

编程日记 2026/2/23 20:57:59