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

HTML 列表、表格、表单

article 2025/6/12 22:12:21

1 列表标签

作用：布局内容排列整齐的区域

列表分类：无序列表、有序列表、定义列表。

例如：

1.1 无序列表

标签：ul 嵌套 li，ul是无序列表，li是列表条目。

注意事项：

ul 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容

1.2 有序列表

作用：布局排列整齐的需要规定顺序的区域，

标签：ol 嵌套 li，ol 是有序列表，li是列表条目。

注意事项：

ol 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容

1.3 定义列表

标签：dl 嵌套 dt 和 dd，dl是定义列表，dt 是定义列表的标题，dd是定义列表的描述／详情。

注意事项：

dl 里面只能包含 dt 和 dd
dt 和 dd 里面可以包含任何内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无序列表</title>
</head>
<body><dl><dt>服务中心</dt><dd>申请售后</dd><dd>售后政策</dd><dd>订单查询</dd><dd>以旧换新</dd></dl>
</body>
</html>

运行效果：

2 表格

标签：table 嵌套 tr，tr 嵌套 td / th

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body><table border="1"><!-- 有几行，就写几个 tr 标签 --><!-- 每个 tr 标签内，再分是表头 th，还是内容 td --><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>
</html>

运行效果：

2.1 表格结构标签了解

但这是给浏览器看的，在网页中的展示并不会有什么变化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body><table border="1"><!-- 有几行，就写几个 tr 标签 --><!-- 每个 tr 标签内，再分是表头 th，还是内容 td --><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>
</html>

2.2 合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息

步骤：

保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量
跨行合并，保留最上单元格，添加属性 rowspan
跨列合并，保留最左单元格，添加属性 colspan
删除其他单元格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head>
<body><table border="1"><!-- 有几行，就写几个 tr 标签 --><!-- 每个 tr 标签内，再分是表头 th，还是内容 td --><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td> </tr> <tr><td>李四</td><td>98</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="3">全市第一</td></tr></tfoot></table>
</body>
</html>

运行效果：

3 表单

作用：收集用户信息
使用场景：登录页面、注册页面、搜索区域

3.1 input 标签

input 标签 type 属性值不同，则功能不同

3.1.1 type 属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input 基本使用</title>
</head>
<body>文本框：<input type="text"><br><br>密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件：<input type="file">
</body>
</html>

运行效果：

3.1.2 input 标签占位文本

占位文本：即提示信息，文本框和密码框都可以使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>占位符</title>
</head>
<body>文本框：<input type="text" placeholder="请输入用户名"><br><br>密码框：<input type="password" placeholder="请输入密码">
</body>
</html>

运行效果：

3.1.3 radio 单选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>radio</title>
</head>
<body>性别：<!-- name 属性保证单选 --><!-- checked 表示刚进入网页的默认选项 --><input type="radio" name="gender"> 男 <input type="radio" name="gender" checked> 女 
</body>
</html>

运行效果：

3.1.4 多文件上传

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现 文件多选 功能。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多文件上传</title>
</head>
<body>上传文件：<input type="file" multiple>
</body>
</html>

运行效果：

3.1.4 checkbox 多选框

多选框也叫 复选框
默认选中：checked

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多选框</title>
</head>
<body>兴趣爱好：<!-- checked 实现默认选中 --><input type="checkbox"> 敲代码<input type="checkbox" checked> 敲前端代码<input type="checkbox" checked> 敲前端 HTML 代码
</body>
</html>

运行效果：

3.2 下拉菜单

标签：select 嵌套 option，selec t是下拉菜单整体，option 是下拉菜单的每一项。selected 是默认选项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>菜单</title>
</head>
<body>城市：<select><option>南京</option><option selected>杭州</option><option>北京</option><option>上海</option><option>徐州</option></select>
</body>
</html>

运行效果：

3.3 文本域

作用：多行输入文本的表单控件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body><!-- 右下角有拖拽功能，未来都会禁用；未来工作中，会用 CSS 设置尺寸；name id 是发送数据用的 --><textarea></textarea>
</body>
</html>

运行效果：

3.4 label 标签

作用：网页中，基个标签的说明文本

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围

3.4.1 label 标签增大点击范围

写法一：

label 标签只包裹内容，不包裹表单控件
设置 label 标签的 for 属性值和表单控件的 id 属性值相同

示例：即点击“男”，也可以选中这个选项，而不是一定要点中“男”对应的那个单选圈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body>性别：<input type="radio" name="gender " id="man"> <label for="man">男</label><input type="radio" name="gender " id="girl"> <label for="girl">女</label>
</body>
</html>

写法二：

使用 label 标签包裹文字和表单控件，不需要属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body>性别：<!-- 第一种写法 --><input type="radio" name="gender" id="man"> <label for="man">男</label><!-- 第二种写法 --><label><input type="radio" name="gender">女</label>         
</body>
</html>

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

3.5 button 按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body><!-- form 表单区域 --><!-- action 是发送数据的地址，比如要提交到哪 --><form action="">用户名：<input type="text"><br><br>密码：<input type="password">  <br><br><button type="submit">提交</button><!-- 需要将所有表单信息放入 form 标签内，重置的功能才会生效 --><button type="reset">重置</button>   </form>
</body>
</html>

运行效果：

3.6 无语义的布局标签

作用：布局网页(划分网页区域，摆放内容）

div：独占一行
span：不换行

3.7 字符实体

作用：在网页中显示预留字符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本域</title>
</head>
<body><!-- 在代码中敲键盘的空格，网页只识别一个 -->毕业&nbsp;&nbsp;快乐！
</body>
</html>

运行效果：

参考链接：

17-列表-无序和有序和定义列表_哔哩哔哩_bilibili
18-表格-基本使用与表格结构标签_哔哩哔哩_bilibili
19-合并单元格_哔哩哔哩_bilibili
20-表单-input标签_哔哩哔哩_bilibili
21-表单-下拉菜单_哔哩哔哩_bilibili
22-表单-文本域_哔哩哔哩_bilibili
23-表单-label标签_哔哩哔哩_bilibili
24-表单-按钮_哔哩哔哩_bilibili
25-div和span标签和字体实体_哔哩哔哩_bilibili

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程日记 2025/6/11 11:51:54

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程日记 2025/6/12 19:25:32

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程日记 2025/6/12 18:36:01

JVM垃圾回收机制全解析

Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程日记 2025/6/11 11:48:42

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程日记 2025/6/11 11:47:41

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...

编程日记 2025/6/11 11:46:39

【磁盘】每天掌握一个Linux命令 - iostat

目录【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景注意事项【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...

编程日记 2025/6/11 11:45:38

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程日记 2025/6/11 11:44:37

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程日记 2025/6/11 11:43:33

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来&#xf…...

编程日记 2025/6/12 21:20:33

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程日记 2025/6/12 19:33:46

django filter 统计数量按属性去重

在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...

编程日记 2025/6/11 11:40:24

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库，获取股票数据，并生成TabPFN这个模型可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...

编程日记 2025/6/12 18:38:02

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程日记 2025/6/11 11:38:20

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎：品融电商，一站式全案代运营领跑者在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程日记 2025/6/11 11:37:19

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程日记 2025/6/12 15:04:32

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...

编程日记 2025/6/11 11:35:11

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程日记 2025/6/11 11:34:04

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程日记 2025/6/12 13:39:05

全球首个30米分辨率湿地数据集(2000—2022)

数据简介今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程日记 2025/6/12 17:01:14

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程日记 2025/6/12 19:22:54

STM32标准库-DMA直接存储器存取

文章目录一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...

编程日记 2025/6/11 11:29:48

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程日记 2025/6/11 11:27:15