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

【HTML】二、列表、表格

article 2026/3/10 23:24:46

文章目录

  • 1、列表
    • 1.1 无序列表
    • 1.2 有序列表
    • 1.3 定义列表
  • 2、表格
    • 2.1 定义
    • 2.2 表格结构标签
    • 2.3 合并单元格

1、列表

列表分为：

  • 无序列表
  • 有序列表
  • 定义列表：一个标题下有多个小分类
    在这里插入图片描述

1.1 无序列表

ul嵌套li，ul是无序列表，li是列表条目

<body><ul><li>开发</li><li>测试</li><li>发布</li></ul>
</body>

效果：
在这里插入图片描述
注意，ul标签里，只能嵌套li标签，不能嵌套h、img等其他标签，但li标签里，可以包裹任何内容

1.2 有序列表

ol嵌套li，ol是有序列表，li是列表条目

<body><ol><li>开发</li><li>测试</li><li>发布</li></ol>
</body>

效果：

在这里插入图片描述
同样的，ol标签里，只能嵌套li标签，但li标签里，可以包裹任何内容

1.3 定义列表

一个标题下有多个内容，如很多官网底部的：

在这里插入图片描述
dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情

在这里插入图片描述

<body><dl><dt>服务中心</dt><dd>申请售后</dd><dd>售后政策</dd><dd>维修服务价格</dd><dd>订单查询</dd><dd>以旧换新</dd></dl>
</body>

效果：
在这里插入图片描述
注意：dl里面只能包含dt和dd，而dt和dd则可以包含任何内容

2、表格

2.1 定义

类似excel，用来展示数据，语法上：table嵌套tr，tr嵌套td/th，th是表头，有加粗和居中效果

在这里插入图片描述
比如写上面这个表格，一行一行写：

<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>

在这里插入图片描述

2.2 表格结构标签

此外，还有三个表格结构标签：
在这里插入图片描述
加上他们的好处是：

  • 让表格结构更加清晰
  • 方便为这三大块分别设置不同的CSS样式
<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>

以上代码，在前端展示效果上，和不加结构标签一模一样

2.3 合并单元格

在这里插入图片描述
合并时，保留最左最上的单元格（如上图的跨行合并，保留最上的单元格，跨列合并，则保留最左的单元格）

在这里插入图片描述

  • 跨行合并，保留最上的单元格，添加属性rowspan，其值为需要合并的单元格数量，删掉被合并的其他单元格
  • 跨列合并，保留最左的单元格，添加属性colspan，其值为需要合并的单元格数量，删掉被合并的其他单元格
<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> 删掉被合并的其他单元格--><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>

效果：
在这里插入图片描述
注意，合并不能跨越表格结构标签，比如上面把李四和总结两个格子合并，就横跨了tbody和tfoot

相关文章：

【HTML】二、列表、表格

文章目录 1、列表1.1 无序列表1.2 有序列表1.3 定义列表 2、表格2.1 定义2.2 表格结构标签2.3 合并单元格 1、列表 列表分为&#xff1a; 无序列表有序列表定义列表&#xff1a;一个标题下有多个小分类 1.1 无序列表 ul嵌套li&#xff0c;ul是无序列表&#xff0c;li是列表…...

编程日记 2026/2/16 12:21:47

​​​​​​​大语言模型安全风险分析及相关解决方案

大语言模型的安全风险可以从多个维度进行分类。 从输入输出的角度来看，存在提示注入、不安全输出处理、恶意内容生成和幻觉错误等风险； 从数据层面来看，训练数据中毒、敏感信息泄露和模型反演攻击是主要威胁； 模型自身则面临拒绝服务和盗窃的风险； 供应链和插件的不安全引…...

编程日记 2026/3/10 1:53:17

windows平台的ffmpeg编译使用

windows平台的ffmpeg编译使用 一、现状 本人使用libgdx开发galGame，发现扩展包gdx-video不支持mp4，不能忍，正好看到官网有支持自定义编译的文档，所以操作一下，自定义编译。本文重点在于操作windows平台，linux平台太简单了。 整个过程包括如下几个步骤。 二、代码下载…...

编程日记 2026/3/9 20:39:05

FFMPEG录制远程监控摄像头MP4

手绘效果图 上图是录制功能的HTML前端页面&#xff0c;录制功能和解码视频放在一起。录制功能关键是录制(开始录制按钮)、停止录像按钮。当点击“录制”的时候则会开始录制MP4文件, 当点击停止的时候就会停止录制MP4。经过录制后&#xff0c;则会生成MP4,并放到我的RV1126的/tm…...

编程日记 2026/2/15 14:33:41

centos操作系统上传和下载百度网盘内容

探序基因 整理 进入百度网盘官网百度网盘 客户端下载 下载linux的rpm格式的安装包 在linux命令行中输入&#xff1a;rpm -ivh baidunetdisk_4.17.7_x86_64.rpm 出现报错&#xff1a; 错误&#xff1a;依赖检测失败&#xff1a; libXScrnSaver 被 baidunetdisk-4.17.7-1.x8…...

编程日记 2026/2/22 12:24:23

Rubick：基于 Electron 的开源插件化桌面效率工具箱

Rubick 是一款基于 Electron 构建的开源桌面工具箱&#xff0c;专为追求高效办公和个性化体验的用户设计。它通过自由集成丰富的插件&#xff0c;让用户能够根据自己的需求打造极致的桌面端效率工具。 软件命名由来Rubick 的名字来源于《DOTA2》中的英雄 Rubick&#xff08;拉…...

编程日记 2026/2/28 10:50:20

ruoyi-vue部署

ruoyi源码类型 Ruoyi源码 编译打包后，直接部署tomcat服务器 Ruoyi-vue 前后端分离版 前端部署到nginx 后端部署到tomcat RuoYi-Cloud 微服务版 RuoYi-app 移动端版 RuoYi-vue 前后端分离版 环境 JDK>=1.8 MySQL >= 5.7 Maven >= 3.0 Node >= 12 Redis…...

编程日记 2026/3/6 11:28:56

MyBatis 如何创建 SqlSession 对象的？

MyBatis 创建 SqlSession 对象的过程主要由 SqlSessionFactory 接口及其实现类来完成。以下是详细步骤&#xff1a; 1. SqlSessionFactory 接口: SqlSessionFactory 是 MyBatis 的核心接口之一&#xff0c;它负责创建 SqlSession 对象。 你可以将 SqlSessionFactory 视为 Sql…...

编程日记 2025/7/15 23:14:01

LLM论文笔记 23: Meta Reasoning for Large Language Models

Arxiv日期&#xff1a;2024.6.17机构&#xff1a;THU / MSRA 关键词 meta-reasoning推理方法prompt engineering 核心结论 1. 提出Meta Reasoning prompting&#xff0c;MRP是一种系统提示方法&#xff0c;能够帮助LLM动态选择最合适的推理方法&#xff0c;从而提升其灵活性和…...

编程日记 2026/2/27 15:41:13

【最后203篇系列】015 几种消息队列的思考

背景 队列还是非常重要的中间件&#xff0c;可以帮助我们&#xff1a;提高处理效率、完成更复杂的处理流程 最初&#xff0c;我觉得只要掌握一种消息队列就够了&#xff0c;现在想想挺好笑的。 过去的探索 因为我用python&#xff0c;而rabbitmq比较贴合快速和复杂的数据处…...

编程日记 2026/2/20 14:27:43

golang time包和日期函数

1.简介 在程序中日期和时间是我们经常会用到的&#xff0c;在go中time包提供了时间的显示和测量函数。 2.获取当前时间 通过time.Now()函数获取当前时间对象&#xff0c;然后获取时间对象的年月日时分秒等值。 now : time.Now()fmt.Printf("now%v type%T\n", now…...

编程日记 2026/2/18 14:54:27

学习springboot 的自动配置原理

前言 为什么要学习springboot 的自动配置原理&#xff1f; 1学习 自定义成starter 的前提 实际开发中&#xff0c;我们如果定义公共的组件给团队使用&#xff0c;为了让他们使用方便就自定义成starter。而想要学习starter ,就要先了解springboot 的自动配置原理 2 面试需要 了…...

编程日记 2026/3/9 17:42:34

排错 -- FISCO BCOS区块链网络 -- 3. 编译智能合约

文章为FISCO BCOS2.0搭建区块链平台中发现的问题与总结&#xff0c;出错原因不唯一 &#xff0c;解决办法不唯一 目前社区缺少完整&#xff0c;稳定的搭建平台和教程 &#xff0c;欢迎各位及时补充&#xff0c;如有错误请及时评论纠正&#xff01; 感谢各位搜索到这里&#…...

编程日记 2026/2/17 18:28:35

ffmpeg 添加毫秒时间戳

网上有好多添加时间水印的&#xff0c;默认是到秒&#xff0c;而我需要到毫秒&#xff0c;查了一下&#xff0c;没有找到更好的方案&#xff0c;下面是自己实现的方案&#xff0c;可以显示到毫秒。如果有更好的方案&#xff0c;欢迎讨论 ffmpeg -i video.mp4 -vf "drawte…...

编程日记 2026/3/8 14:07:30

centos7上安装Docker

文章目录 **1. 使用华为云镜像源替换Docker仓库****2. 安装Docker CE****3.更换docker镜像源-使用华为云的docker镜像源****4.补充&#xff1a;docker的使用****5.补充&#xff1a;删除docker的步骤** 1. 使用华为云镜像源替换Docker仓库 步骤&#xff1a; 删除无效的Docker仓…...

编程日记 2026/3/10 18:19:55

大模型推理后JSON数据后处理

大模型推理后JSON数据后处理 flyfish LLM 通常指的是 Large Language Model&#xff0c;也就是大语言模型&#xff0c;针对 JSON格式的输出&#xff0c;可以在大模型推理前、推理中、推理后进行处理&#xff0c;这里是在推理后进行处理。 针对模型输出结果&#xff0c;可采用结…...

编程日记 2025/12/5 4:45:51

【干货】Docker 在自动化测试和性能测试中的应用

引言 在现代软件测试领域&#xff0c;Docker 已经成为提升自动化测试和性能测试效率的重要工具。它不仅能提供一致的测试环境&#xff0c;还能大幅减少配置和维护成本。本文将深入探讨 Docker 在自动化测试和性能测试中的应用场景、优势及实践方案。 1. 为什么选择 Docker&am…...

编程日记 2026/3/8 9:24:48

【Linux内核系列】：文件系统收尾以及软硬链接详解

&#x1f525; 本文专栏&#xff1a;Linux &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 世界上只有一种个人英雄主义&#xff0c;那么就是面对生活的种种失败却依然热爱着生活 内容回顾 那么在之前的学习中&#xff0c;我们…...

编程日记 2026/3/10 22:33:40

视频理解之Actionclip(论文宏观解读)

配合解读代码解读 1.研究背景 1. 视频行为识别的重要性 视频行为识别是视频理解领域的核心任务之一&#xff0c;旨在通过分析视频内容来识别和分类其中的人物行为或活动。这一任务在多个领域具有重要的应用价值&#xff0c;例如智能监控、人机交互、自动驾驶、医疗健康等。随…...

编程日记 2026/3/10 21:14:45

java手机号、邮箱、日期正则表达式

Java正则核心API Java中用 java.util.regex 包的两个类&#xff1a; Pattern&#xff1a;编译正则表达式Matcher&#xff1a;执行匹配操作 1. 验证手机号 String regex "1[3-9]\\d{9}"; boolean isValid "18812345678".matches(regex); // true2. 提取…...

编程日记 2026/2/18 15:01:51

navicat16 升级到 navicat17 之后原来的连接找不到了 mac用户

版本16的路径 注意把对应的路径改成自己的用户名 /Users/自己的用户名/Library/Application Support/PremiumSoft CyberTech/Navicat CC/Common/Settings 版本17的路径 /Users/自己的用户名/Library/Containers/com.navicat.NavicatPremium/Data/Library/Application Suppor…...

编程日记 2026/3/4 20:15:26

Altium Designer——CHIP类元器件PCB封装绘制

文章目录 PCB封装组成元素&#xff1a;焊盘的属性 SS34肖特基二极管SMA(DO-214AC)封装绘制资料&#xff1a;步骤&#xff1a;1.绘制焊盘&#xff1a;用到的快捷键&#xff1a;资料&#xff1a; 2.绘制丝印&#xff1a;用到的快捷键&#xff1a;资料&#xff1a; PCB封装组成元素…...

编程日记 2026/3/3 6:27:03

[C++Qt] 槽函数收不到信号问题（信号的注册）

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

编程日记 2026/2/10 21:55:44

【一起来学kubernetes】12、k8s中的Endpoint详解

一、Endpoint的定义与作用二、Endpoint的创建与管理三、Endpoint的查看与组成四、EndpointSlice五、Endpoint的使用场景六、Endpoint与Service的关系1、定义与功能2、创建与管理3、关系与交互4、使用场景与特点 七、Endpoint的kubectl命令1. 查看Endpoint2. 创建Endpoint3. 编辑…...

编程日记 2026/3/1 16:40:35

SpringBoot的并行SQL任务并完成所有任务之后返回操作

一、核心实现方案 1. 线程池配置与异步支持 通过 EnableAsync 启用异步支持&#xff0c;并自定义线程池避免默认线程池的性能问题&#xff1a; Configuration EnableAsync public class AsyncConfig {Beanpublic Executor taskExecutor() {ThreadPoolTaskExecutor executor …...

编程日记 2025/12/8 7:29:29

《AI浪潮中的璀璨新星：Meta Llama、Ollama与DeepSeek的深度剖析》：此文为AI自动生成

《AI浪潮中的璀璨新星&#xff1a;Meta Llama、Ollama与DeepSeek的深度剖析》&#xff1a;此文为AI自动生成 引言&#xff1a;AI 大模型的群雄逐鹿时代 在科技飞速发展的当下&#xff0c;AI 大模型领域已成为全球瞩目的焦点&#xff0c;竞争激烈程度堪称白热化。从 OpenAI 推出…...

编程日记 2026/3/10 1:43:04

LVGL移植到6818开发板

一、移植步骤 1.lv_config.h 配置文件启动 framebuffer 2、lv_config.h 配置文件关闭SDL 2.修改main.c 去掉SDL输入设备 3.修改Makefile 文件启动交叉编译 去掉警告参数 去掉SDL库 4.交叉编译代码 make clean #清空 ⭐ 必须要清空一次再编译&#xff01; 因为修改了 lv_con…...

编程日记 2026/3/10 1:54:42

Spring Boot应用首次请求性能优化实战：从数据库连接池到JVM调优

目录 问题现象与背景分析性能瓶颈定位方法论数据库连接池深度优化Spring Bean生命周期调优JVM层性能预热策略全链路监控体系建设生产环境验证方案总结与扩展思考1. 问题现象与背景分析 1.1 典型问题场景 在某互联网金融项目的Spring Boot应用上线后，运维团队发现一个关键现象…...

编程日记 2026/2/3 12:56:39

UE4-UE5虚幻引擎，前置学习一--Console日志输出经常崩溃，有什么好的解决办法

有些差异 这么牛逼的引擎&#xff0c;居然有这种入门级别的问题&#xff0c;一触发清理&#xff0c;大概率(80%)会崩溃 无论虚幻5还是UE4都有这个问题&#xff0c;挺烦人的 实在忍不了了&#xff0c;这次&#xff0c;今天 就想问问有什么好的处理方法么&#xff1f;&#x…...

编程日记 2026/3/10 1:52:50

(全)2024下半年真题 系统架构设计师 综合知识 答案解析01

系统架构设计师第二版教程VIP课程https://edu.csdn.net/course/detail/40283 操作系统 下列选项中不能作为预防死锁措施的是 。 A. 破坏“循环等待"条件 B. 破坏“不可抢占”条件 C. 破坏“互斥”条件 D. 破坏“请求和保持”条件 答案&#xff1a;C 解析&…...

编程日记 2026/2/27 6:51:37