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

Html5学习教程，从入门到精通，HTML5 列表语法知识点及案例代码（11）

news 2026/4/1 9:08:32

HTML 列表语法知识点及案例代码

一、HTML 列表类型

HTML 提供了三种列表类型：

  1. 无序列表 (Unordered List)：使用 <ul> 标签定义，列表项使用 <li> 标签定义。默认情况下，列表项前面会显示黑色圆点。
  2. 有序列表 (Ordered List)：使用 <ol> 标签定义，列表项使用 <li> 标签定义。默认情况下，列表项前面会显示数字序号。
  3. 定义列表 (Definition List)：使用 <dl> 标签定义，包含术语 (<dt>) 和描述 (<dd>) 两部分。

二、列表语法知识点

  1. 基本语法：

    <!-- 无序列表 -->
<ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ul><!-- 有序列表 -->
<ol><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ol><!-- 定义列表 -->
<dl><dt>术语 1</dt><dd>描述 1</dd><dt>术语 2</dt><dd>描述 2</dd>
</dl>

  2. 列表属性：

    • type 属性 (仅适用于 <ul> 和 <ol>)：指定列表项标记的类型。
      • <ul> 的 type 属性值：
        • disc (默认)：实心圆点
        • circle：空心圆点
        • square：实心方块
      • <ol> 的 type 属性值：
        • 1 (默认)：数字 (1, 2, 3, …)
        • A：大写字母 (A, B, C, …)
        • a：小写字母 (a, b, c, …)
        • I：大写罗马数字 (I, II, III, …)
        • i：小写罗马数字 (i, ii, iii, …)
    • start 属性 (仅适用于 <ol>)：指定列表项序号的起始值。
    • reversed 属性 (仅适用于 <ol>)：指定列表项序号是否倒序排列。

  3. 嵌套列表：

    列表可以嵌套使用，例如在 <li> 标签内再嵌套一个 <ul> 或 <ol>。

三、案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>HTML 列表示例</title>
</head>
<body><h2>无序列表</h2><ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul><h2>有序列表</h2><ol><li>打开冰箱</li><li>拿出牛奶</li><li>关上冰箱</li></ol><h2>定义列表</h2><dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd></dl><h2>嵌套列表</h2><ul><li>水果<ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul></li><li>蔬菜<ul><li>菠菜</li><li>胡萝卜</li><li>西红柿</li></ul></li></ul><h2>列表属性</h2><ul type="square"><li>正方形标记 1</li><li>正方形标记 2</li></ul><ol type="A" start="3"><li>从 C 开始的大写字母</li><li>D</li><li>E</li></ol><ol reversed><li>倒序排列 3</li><li>倒序排列 2</li><li>倒序排列 1</li></ol></body>
</html>

四、代码注释

  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <html lang="zh-CN">：定义文档语言为中文。
  • <head>：包含文档的元数据，例如标题、字符编码等。
  • <title>：定义文档标题，显示在浏览器标签页上。
  • <body>：包含文档的主体内容。
  • <h2>：定义二级标题。
  • <ul>：定义无序列表。
  • <ol>：定义有序列表。
  • <dl>：定义定义列表。
  • <li>：定义列表项。
  • <dt>：定义术语。
  • <dd>：定义描述。
  • type 属性：指定列表项标记的类型。
  • start 属性：指定列表项序号的起始值。
  • reversed 属性：指定列表项序号是否倒序排列。

五、总结

HTML 列表是网页中常用的元素，可以有效地组织和展示信息。掌握列表的语法和属性，可以帮助你创建更加清晰、易读的网页内容。

当然可以！以下是一些实际开发中常见的 HTML 列表应用场景和具体案例代码：

1. 导航菜单

导航菜单通常使用无序列表 (<ul>) 来实现，结合 CSS 可以创建美观的导航栏。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>导航菜单示例</title><style>/* 简单样式 */ul.nav {list-style-type: none; /* 去掉默认的圆点 */margin: 0;padding: 0;background-color: #333;overflow: hidden;}ul.nav li {float: left; /* 横向排列 */}ul.nav li a {display: block;color: white;text-align: center;padding: 14px 20px;text-decoration: none;}ul.nav li a:hover {background-color: #555;}</style>
</head>
<body><h2>导航菜单</h2><ul class="nav"><li><a href="#home">首页</a></li><li><a href="#news">新闻</a></li><li><a href="#about">关于我们</a></li><li><a href="#contact">联系我们</a></li></ul>
</body>
</html>

2. 步骤说明

有序列表 (<ol>) 常用于展示步骤或流程。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>步骤说明示例</title><style>ol.steps {line-height: 1.6;}ol.steps li {margin-bottom: 10px;}</style>
</head>
<body><h2>如何煮咖啡</h2><ol class="steps"><li>准备咖啡豆和研磨机。</li><li>将咖啡豆研磨成适合的粗细。</li><li>将滤纸放入滤杯中，并用热水润湿。</li><li>加入研磨好的咖啡粉，轻轻拍平。</li><li>缓慢注入热水，进行萃取。</li><li>等待萃取完成，倒入杯中享用。</li></ol>
</body>
</html>

3. 常见问题解答 (FAQ)

定义列表 (<dl>) 非常适合用于展示问题和答案。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>常见问题解答示例</title><style>dl.faq dt {font-weight: bold;margin-top: 15px;color: #2c3e50;}dl.faq dd {margin-left: 20px;color: #34495e;}</style>
</head>
<body><h2>常见问题解答</h2><dl class="faq"><dt>Q: 如何注册账号？</dt><dd>A: 点击首页的“注册”按钮，填写相关信息即可完成注册。</dd><dt>Q: 忘记密码怎么办？</dt><dd>A: 在登录页面点击“忘记密码”，按照提示重置密码。</dd><dt>Q: 如何联系客服？</dt><dd>A: 您可以通过邮箱 support@example.com 或电话 123-456-7890 联系客服。</dd></dl>
</body>
</html>

4. 商品分类

无序列表 (<ul>) 可以用于展示商品分类或目录结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>商品分类示例</title><style>ul.categories {list-style-type: none;padding: 0;}ul.categories li {background-color: #f9f9f9;margin: 5px 0;padding: 10px;border-left: 5px solid #3498db;}ul.categories li:hover {background-color: #ecf0f1;}</style>
</head>
<body><h2>商品分类</h2><ul class="categories"><li>电子产品</li><li>家用电器</li><li>服装鞋帽</li><li>食品饮料</li><li>图书音像</li></ul>
</body>
</html>

5. 嵌套列表

嵌套列表可以用于展示多级结构，例如文件目录或组织架构。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>嵌套列表示例</title><style>ul.directory {list-style-type: none;padding-left: 20px;}ul.directory li {margin: 5px 0;}ul.directory li::before {content: "📁 ";}</style>
</head>
<body><h2>文件目录结构</h2><ul class="directory"><li>项目文件夹<ul><li>css<ul><li>style.css</li></ul></li><li>js<ul><li>main.js</li></ul></li><li>images</li><li>index.html</li></ul></li></ul>
</body>
</html>

6. 带图标的列表

结合 Font Awesome 或自定义图标，可以创建更丰富的列表。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>带图标的列表示例</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>ul.icon-list {list-style-type: none;padding: 0;}ul.icon-list li {margin: 10px 0;}ul.icon-list li i {margin-right: 10px;color: #3498db;}</style>
</head>
<body><h2>功能列表</h2><ul class="icon-list"><li><i class="fas fa-check"></i>支持多种文件格式</li><li><i class="fas fa-check"></i>实时同步数据</li><li><i class="fas fa-check"></i>跨平台支持</li><li><i class="fas fa-check"></i>强大的安全保障</li></ul>
</body>
</html>

总结

以上案例展示了 HTML 列表在实际开发中的多种应用场景，包括导航菜单、步骤说明、常见问题解答、商品分类、嵌套列表和带图标的列表。通过这些案例，你可以更好地理解如何灵活运用 HTML 列表来构建清晰、结构化的网页内容。

相关文章：

Html5学习教程，从入门到精通，HTML5 列表语法知识点及案例代码（11）

HTML 列表语法知识点及案例代码 一、HTML 列表类型 HTML 提供了三种列表类型&#xff1a; 无序列表 (Unordered List)&#xff1a;使用 <ul> 标签定义&#xff0c;列表项使用 <li> 标签定义。默认情况下&#xff0c;列表项前面会显示黑色圆点。有序列表 (Ordere…...

编程日记 2025/3/4 15:42:27

内核进程调度队列(linux的真实调度算法) ─── linux第13课

目录 内核进程调度队列的过程 一个CPU拥有一个runqueue(运行队列在内存) 活动队列(active) 过期队列(expired) active指针和expired指针 重绘runqueue linux内核O(1)调度算法 总结 补充知识: 封装链式结构的目的是: 仅使用封装链式结构可以得到全部的task_struct的信…...

编程日记 2025/3/4 15:34:17

16.7 LangChain LCEL 极简入门：Prompt + LLM 的黄金组合

LangChain LCEL 极简入门：Prompt + LLM 的黄金组合 关键词：LCEL 基础示例、Prompt 模板设计、LLM 集成、链式调用、LangChain 快速上手 1. 基础架构解析：Prompt → LLM → Output 1.1 核心组件交互流程 #mermaid-svg-pv3fH3mEKyE4TNaF {font-family:"trebuchet ms&qu…...

编程日记 2025/3/4 15:30:11

Spring线程池学习笔记

Spring提供了多种方式来配置和使用线程池&#xff0c;最常见的是通过TaskExecutor和ThreadPoolTaskExecutor。 Spring线程池 TaskExecutor 接口 TaskExecutor 是Spring框架中的一个接口&#xff0c;它是对Java的Executor接口的简单封装。它的主要目的是为了提供一个统一的接口…...

编程日记 2025/3/4 15:29:09

ArcGIS操作：08 计算shp面积并添加到属性表

1、打开属性表 注意&#xff1a;计算面积前&#xff0c;需要把shp的坐标系转化为投影坐标系&#xff08;地理坐标系用于定位、投影坐标系用于测量&#xff09; 2、创建字段 3、编辑字段名、类型 4、选择字段&#xff0c;计算几何 5、选择属性、坐标系、单位...

编程日记 2025/3/4 15:28:08

安卓音频框架混音器

在 Android 音频框架中&#xff0c;混音器&#xff08;Mixer&#xff09; 是 AudioFlinger 服务的核心组件之一&#xff0c;负责将多个音频流&#xff08;来自不同应用或系统组件&#xff09;混合为统一的输出流&#xff0c;再传输到音频硬件设备&#xff08;如扬声器、耳机等&…...

编程日记 2025/3/4 15:27:06

左值引用与指针的区别

很多朋友遇到过这个问题&#xff1a;左值引用与指针有哪些区别&#xff1f;脑子里闪过很多答案&#xff0c;但大部分都是各自的定义&#xff0c;真要说他们两个有什么区别&#xff0c;有的时候还这是说不上来。本文针对这个问题进行归纳总结&#xff0c;希望对大家有所帮助。 …...

编程日记 2025/3/4 15:22:59

Linux基础使用和程序部署

目录 1.Linux 1.2 Linux的环境搭配 1.2.1 使用云服务器 1.2.2使用终端软件连接到Linux 1.3. Linux 常用命令 1. ls&#xff1a;列出当前目录中的文件和子目 2.pwd&#xff1a;显示当前工作目录的路径 3.cd&#xff1a;改变工作目录&#xff0c;将当前的工作目录改变到指定目…...

编程日记 2025/3/4 15:20:57

Linux驱动开发之串口驱动移植

原理图 从上图可以看到RS232的串口接的是UART3&#xff0c;接下来我们需要使能UART3的收发功能。一般串口的驱动程序在内核中都有包含&#xff0c;我们配置使能适配即可。 设备树 复用功能配置 查看6ull如何进行uart3的串口复用配置&#xff1a; 设备树下添加uart3的串口复用…...

编程日记 2025/3/4 15:19:55

计算机毕业设计SpringBoot+Vue.js美食推荐系统商城(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/3/4 15:18:51

指针小节.

....指针的第四个作用&#xff1a;函数的结果和计算状态分开 高级指针。。 指针中的数据类型&#xff1a;获取字节数据的个数。步长&#xff1a;指针移动一次的字节个数&#xff08;int&#xff0c;long。。。各自字节都不同&#xff09; 加减都可以...

编程日记 2025/3/4 15:17:49

[Qt5] QJson数据之间的转换以及QByteArray图像数据压缩

&#x1f4e2;博客主页&#xff1a;https://loewen.blog.csdn.net&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 丶布布原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&#x1f4e2;现…...

编程日记 2025/3/4 15:15:46

2025年能源工作指导意见

2025年是“十四五”规划收官之年&#xff0c;做好全年能源工作意义重大。为深入贯彻落实党中央、国务院决策部署&#xff0c;以能源高质量发展和高水平安全助力我国经济持续回升向好&#xff0c;满足人民群众日益增长的美好生活用能需求&#xff0c;制定本意见。 一、总体要求…...

编程日记 2025/3/4 15:14:44

Android 获取jks的SHA1值：java.io.IOException: Invalid keystore format

命令生成 keytool -list -v -keystore 全路径.jks -alias 别名 -storepass 密码 -keypass 密码 1、遇到 的问题&#xff1a; 通过快捷键 ‘win r’ 启动的小黑框运行上面的命令会出现下面这个错误keytool 错误: java.io.IOException: Invalid keystore format 2、解决问题 …...

编程日记 2025/3/4 15:12:41

深入探索像ChatGPT这样的大语言模型-02-POST training supervised finetuning

参考 【必看珍藏】2月6日&#xff0c;安德烈卡帕西最新AI普及课&#xff1a;深入探索像ChatGPT这样的大语言模型&#xff5c;Andrej Karpathy fineweb知乎翻译介绍 fineweb-v1原始连接 fineweb中文翻译版本 Chinese Fineweb Edu数据集 查看网络的内部结果&#xff0c;可以参…...

编程日记 2025/3/4 15:07:33

广义线性模型下的数据分析（R语言）

一、实验目的&#xff1a; 通过上机试验&#xff0c;掌握利用R实现线性回归分析、逻辑回归、列联分析及方差分析&#xff0c;并能对分析结果进行解读。 数据&#xff1a; 链接: https://pan.baidu.com/s/1JqZ_KbZJEk-pqSUWKwOFEw 提取码: hxts 二、实验内容&#xff1a; 1、2…...

编程日记 2025/3/4 15:01:24

AutoMQ：无需 Cruise Control 实现 Kafka 的自动分区再平衡

导读&#xff1a;AutoMQ是一款贯彻云优先理念来设计的 Kafka 替代产品。AutoMQ 创新地对 Apache Kafka 的存储层进行了基于云的重新设计&#xff0c;在 100% 兼容 Kafka 的基础上通过将持久性分离至 EBS 和 S3 带来了 10x 的成本降低以及 100x 的弹性能力提升&#xff0c;并且相…...

编程日记 2025/3/4 14:54:14

在剪映中给英文学习视频添加中文字幕

文章目录 一、剪映是什么&#xff1f;二、使用步骤1.下载2.操作 一、剪映是什么&#xff1f; 剪映是由字节跳动公司开发的一款功能强大且易于使用的视频编辑软件&#xff0c;在移动端和电脑端均有应用。 二、使用步骤 1.下载 2.操作...

编程日记 2025/3/4 14:46:03

Opencv之sift特征检测和FLANN 匹配器进行指纹特征匹配

sift特征检测和FLANN 匹配器进行指纹匹配 目录 sift特征检测和FLANN 匹配器进行指纹匹配1 sift特征检测1.1 概念1.2 优缺点 2 FLANN 匹配器2.1 概念2.2 工作原理与匹配方式2.3 FLANN 匹配器的使用步骤2.4 优缺点 3 函数3.1 特征检测匹配3.2 匹配符合条件点并绘制 3 代码测试3.1…...

编程日记 2025/3/4 14:41:58

rust学习～tokio的io

await Suspend execution until the result of a Future is ready. 暂停执行&#xff0c;直到一个 Future 的结果就绪。 .awaiting a future will suspend the current function’s execution until the executor has run the future to completion. 对一个 Future 使用 .awa…...

编程日记 2025/3/4 14:38:55

终极解决方案：5分钟完成DOCX到LaTeX的专业转换指南 [特殊字符]

终极解决方案&#xff1a;5分钟完成DOCX到LaTeX的专业转换指南 &#x1f680; 【免费下载链接】docx2tex Converts Microsoft Word docx to LaTeX 项目地址: https://gitcode.com/gh_mirrors/do/docx2tex 还在为Word文档转换LaTeX格式而烦恼吗&#xff1f;docx2tex就是你…...

编程新知 2026/4/1 8:30:27

Qwen-Image-2512图片生成服务：支持多种宽高比，满足不同场景需求

Qwen-Image-2512图片生成服务&#xff1a;支持多种宽高比&#xff0c;满足不同场景需求 1. 引言&#xff1a;为什么宽高比如此重要&#xff1f; 在数字内容创作领域&#xff0c;图片的宽高比往往决定了它的最终用途。一张构图精美的图片&#xff0c;如果比例与展示平台不匹配…...

编程新知 2026/4/1 8:04:04

SEO_SEO数据监控与分析的关键指标介绍

SEO数据监控与分析的关键指标介绍 在当今数字营销的世界里&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已经成为了每个网站运营者和数字营销人员必不可少的技能。SEO数据监控与分析是SEO工作的重要环节&#xff0c;通过对关键指标的监控和分析&#xff0c;我们可以更好…...

编程新知 2026/4/1 7:04:41

河海大学材料科学与工程及材料与化工专业考研复试资料（含《材料分析方法》笔试专项）

温馨提示&#xff1a;文末有联系方式河海大学材料类考研复试资料全面升级 本套资料专为报考河海大学材料科学与工程、材料与化工两个硕士专业的考生设计&#xff0c;聚焦复试核心笔试科目——《材料分析方法》&#xff0c;助力精准高效备考。由2025届一志愿录取考生权威整理 所…...

编程新知 2026/4/1 6:15:26

8-Bit美学不妥协性能｜像素剧本圣殿UI渲染与LLM推理资源隔离方案

8-Bit美学不妥协性能&#xff5c;像素剧本圣殿UI渲染与LLM推理资源隔离方案 1. 项目概述 像素剧本圣殿&#xff08;Pixel Script Temple&#xff09;是一款专为剧本创作者设计的AI辅助工具&#xff0c;基于Qwen2.5-14B-Instruct大模型深度微调开发。它将高性能AI推理能力与独…...

编程新知 2026/4/1 6:07:22

DASD-4B-Thinking应用场景：科研人员用Chainlit调用长链思维模型写论文推导

DASD-4B-Thinking应用场景&#xff1a;科研人员用Chainlit调用长链思维模型写论文推导 安全声明&#xff1a;本文仅讨论技术实现与应用&#xff0c;所有内容均符合技术交流规范&#xff0c;不涉及任何敏感或违规内容。 1. 科研写作的新助手&#xff1a;当AI遇到学术研究 作为一…...

编程新知 2026/4/1 5:55:10

SENet实战：如何在PyTorch中实现Squeeze-and-Excitation模块（附完整代码）

PyTorch实战&#xff1a;手把手实现SENet中的SE模块 在计算机视觉领域&#xff0c;注意力机制已经成为提升模型性能的重要工具。今天我们将深入探讨如何在PyTorch中实现Squeeze-and-Excitation&#xff08;SE&#xff09;模块——这个让ResNet-50在ImageNet上表现接近ResNet-10…...

编程新知 2026/4/1 5:14:54

OpenClaw人人养虾：配置Anthropic (Claude)

Anthropic 是 Claude 系列模型的开发者。Claude 以出色的指令遵循能力、深度推理和长文本处理著称。OpenClaw 支持通过 API Key 或 Claude Code CLI OAuth 接入。 认证方式 方式一&#xff1a;API Key&#xff08;推荐&#xff09; 前往 Anthropic Console 创建 API Key在 O…...

编程新知 2026/4/1 3:53:39

如何用Wi-Fi信号实现非接触检测：ESP-CSI完整指南

如何用Wi-Fi信号实现非接触检测&#xff1a;ESP-CSI完整指南 【免费下载链接】esp-csi Applications based on Wi-Fi CSI (Channel state information), such as indoor positioning, human detection 项目地址: https://gitcode.com/GitHub_Trending/es/esp-csi 想要让…...

编程新知 2026/4/1 3:31:12

为什么92%的团队在MCP项目中期被迫重构？Python 4大模板的抽象泄漏、协议耦合与测试盲区深度拆解

第一章&#xff1a;MCP服务器开发模板的行业现状与重构困局当前&#xff0c;MCP&#xff08;Model Control Protocol&#xff09;服务器作为AI智能体协同调度与协议网关的核心组件&#xff0c;在金融风控、工业边缘控制、多模态Agent编排等场景中加速落地。然而&#xff0c;主流…...

编程新知 2026/4/1 2:28:17