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

前端（1）HTML

news 2026/2/8 20:11:44

1、标签

在这里插入图片描述

创建1.html文件，浏览器输入E:/frontheima/1.html，可以访问页面

在这里插入图片描述

页面展示

在这里插入图片描述

在VSCODE安装IDEA的快捷键，比如ctl+d复制一行、ctrl+x剪切

<p id="p1" title="标题1">Hello,world!</p>
<p id="p2">Hello,world!</p>
<p>Hello,world!</p>

标签可以设置属性id、标题title

<p>html是一个的<b>强大</b>语言</p>

元素之间可以嵌套，其中b标签是加粗

<p id="p1" title="标题1">Hello,world!</p>
<p id="p2">Hello,world!</p>
<p>Hello,world!</p>
<p>html是一个的<b>强大</b>语言</p>
<img src="spring.png">

空元素是没有内容的标签，比如img标签

在这里插入图片描述

img标签是展示图片

在这里插入图片描述

输入!可以输出html模板，将lang改成zh

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p id="p1">Hello,world!</p><img src="spring.png" width="100px">
</body>
</html>

在body标签中设置p标签和img标签

在这里插入图片描述

浏览器输入E:/frontheima/2.html，可以显示

2、超链接a标签

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="2.html">本地网页</a><hr><a href="http://www.baidu.com">互联网网页</a><hr><a href="#p1">页面内锚点</a><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><p id="p1">段落p1    <a href="#">回到页面的顶部</a></p></body>
</html>

hr标签是分割线，a标签是超链接，可以访问本地网页、互联网网页、页面内锚点，其中页面内锚点可以实现页面内跳转

<img src="data:image/png;base64,二进制数据">

src填写data后面是图片的二进制数据并且用base64编码

3、表单form

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://localhost:8080/test/f1"><input type="text" name="username"><input type="submit" value="提交"></form>
</body>
</html>

表单提交数据用form标签，action是提交表单数据的服务器地址，input标签是输入框，type=text表示输入文本，必须要有name属性才能提交到表单，type=submit表示提交表单数据，value是提交

@RestController
@RequestMapping("/test")
@Log4j2
public class TestController {@GetMapping("/f1")public String f1(@RequestParam("username") String username) {log.info("username = {}", username);return "收到表单提交的数据";}
}

创建SpringBoot工程并设置f1方法，用来接收表单提交的数据

在这里插入图片描述

表单提交username=张三，点击提交按钮会提交表单数据到服务器

在这里插入图片描述

服务器收到表单提交的数据username=张三

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://localhost:8080/test/f2">男<input type="radio" name="sex" value="男" checked>女<input type="radio" name="sex" value="女"><br><br>唱歌<input type="checkbox" name="hobby" value="唱歌">跳舞<input type="checkbox" name="hobby" value="跳舞">逛街<input type="checkbox" name="hobby" value="逛街"><input type="submit" value="提交"></form>
</body>
</html>

input标签表示输入框，type=radio表示单选框，checked表示默认选中的单选框，type=checkbox表示多选框，多个相同单选框的name必须相同，多个相同多选框的name必须相同

@GetMapping("/f2")public String f2(@RequestParam("sex") String sex, @RequestParam("hobby") List<String> hobbies) {log.info("sex = {}", sex);log.info("hobbies = {}", hobbies);return "收到表单提交的数据";}

多选框用List集合接收

在这里插入图片描述

选择女、唱歌和逛街

在这里插入图片描述

服务器输出单选框和多选框提交表单的数据

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://localhost:8080/test/f3" method="post" enctype="multipart/form-data"><input type="file" name="myFile"><br><br><input type="submit" value="提交"></form>
</body>
</html>

表单提交数据发送post请求，上传文件是type=file，enctype="multipart/form-data"表示上传文件或者二进制数据，默认是application/x-www-form-urlencoded表示传递简单数据是按照键值对传递的，用&分割键值对

@PostMapping("/f3")public String f3(@RequestPart("myFile") MultipartFile file) {log.info("file size = {}", file.getSize());log.info("file name = {}", file.getOriginalFilename());return "收到表单提交的文件数据";}

服务器用MultipartFile表示文件数据，用@RequestPart指定文件名字即name属性，@RequestPart的作用是将文件数据转换为MultipartFile对象或直接转换为字节数组

在这里插入图片描述

前端上传文件

在这里插入图片描述

服务器接收到上传的文件数据大小size和文件名字filename

在这里插入图片描述
JS函数length：计算字符串的长度

在这里插入图片描述
JS函数：计算汉字的URL编码，因为请求参数不能有汉字，必须是汉字的URL编码

在这里插入图片描述

在这里插入图片描述

URI中参数的汉字必须编码才能放到请求体进行传递，json数据中存在汉字也可以传递

请求有请求行、请求头、请求体，请求行包括请求方式GET还是POST、URI、HTTP协议是1.0还是1.1还是2.0，请求头是键值对，有HOST表示主机地址、Content-Type默认是application/x-www-form-urlencoded、Content-Length表示请求体的字节长度，请求体可选

Content-Type默认是application/x-www-form-urlencoded，表示传递键值对，它是url编码

Content-Type=application/json，表示请求体是json格式的数据，服务器用@RequestBody注解标注对象，这个注解的作用是将json数据转成java对象，json数据中存在汉字也可以传递，它是utf-8编码

Content-Type=multipart/form-data，表示上传文件资源或者二进制数据

在这里插入图片描述

表单支持两种编码方式：Content-Type=application/x-www-form-urlencoded或者Content-Type=multipart/form-data

文件上传支持的编码方式：Content-Type=multipart/form-data

相关文章：

前端（1）HTML

1、标签 创建1.html文件&#xff0c;浏览器输入E:/frontheima/1.html&#xff0c;可以访问页面 页面展示 在VSCODE安装IDEA的快捷键&#xff0c;比如ctld复制一行、ctrlx剪切 <p id"p1" title"标题1">Hello,world!</p> <p id"p2"…...

编程日记 2024/7/27 8:09:17

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十三章 设备树下的platform驱动

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...

编程日记 2024/7/27 8:07:15

Java正则表达式判断有无特殊字符

//^代表否定&#xff0c;匹配除了数字、字母、下划线的特殊字符。 private static final String SPECIAL_CHAR_PATTERN "[^a-zA-Z0-9_]"; Pattern pattern Pattern.compile(SPECIAL_CHAR_PATTERN); Matcher matcher pattern.matcher(userAccount); // 如果 find(…...

编程日记 2024/7/27 8:05:13

使用Java和Spring AMQP构建消息驱动应用

使用Java和Spring AMQP构建消息驱动应用 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 消息驱动应用程序在现代系统架构中扮演着重要角色&#xff0c;特别是在处理高并发和异步任务时。Spring AMQ…...

编程日记 2024/7/27 8:01:09

【NLP】提升文本生成多样性的实用方法

比如用T5模型，训练数据是inputText-outputText格式，预测时do_sample=False # 预测代码from transformers import TFAutoModelForSeq2SeqLM from transformers import AutoTokenizercheckpoint_local = "./path/" tokenizer = AutoTokenizer.from_pretrained(check…...

编程日记 2024/7/27 7:57:05

鸿蒙（HarmonyOS）下拉选择控件

一、操作环境 操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0&#xff08;API 9&#xff09; 二、效果图 三、代码 SelectPVComponent.ets Component export default struct SelectPVComponent {Link selection: SelectOption[]priva…...

编程日记 2024/7/27 7:56:03

Java类加载器实现机制详细笔记

1. 类加载器的基本概念 类加载器&#xff08;ClassLoader&#xff09;&#xff1a;在Java中&#xff0c;类加载器负责将Java类动态加载到JVM中。它是实现动态类加载机制的核心组件&#xff0c;对于开发复杂应用程序&#xff08;如插件系统、模块化设计等&#xff09;至关重要。…...

编程日记 2024/7/27 7:55:03

Git之repo sync -l与repo forall -c git checkout用法区别(四十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

编程日记 2024/7/27 7:53:01

【公式解释】《系统论》《控制论》《信息论》的共同重构：探索核心公式与深度解析

《系统论》《控制论》《信息论》的共同重构：探索核心公式与深度解析 关键词：系统论、控制论、信息论、状态空间方程、系统矩阵。 Keywords: System theory, Control theory, Information theory, State-space equations, System matrices. 核心公式与三论共同之处 在系统…...

编程日记 2024/7/27 7:50:59

电脑格式化好还是恢复出厂设置好？

电脑格式化好还是恢复出厂设置好&#xff1f;使用电脑的过程中&#xff0c;系统问题、病毒感染、性能下降等原因可能会导致我们考虑对电脑进行大规模的清理和恢复操作。本文将详细探讨电脑格式化和恢复出厂设置的区别、优缺点&#xff0c;以及不同场景选择哪种方法合适。 选择电…...

编程日记 2024/7/27 7:49:58

使用 Windows 应用程序 SDK 构建下一代应用程序

微软面临的最大问题之一是如何让 Windows 再次成为吸引开发者的平台。无论用户使用什么设备和操作系统&#xff0c;都可以很容易地将 Web 前端放在支持桌面和移动用户的云原生应用程序上。 我们处在一个奇怪的境地&#xff0c;唯一能利用最新 PC 硬件的应用程序是 Office、Phot…...

编程日记 2024/7/27 7:47:56

可消费的媒体类型和可生成的媒体类型

可消费的媒体类型和可生成的媒体类型 在 Spring MVC 中&#xff0c;“可消费的媒体类型”和“可生成的媒体类型”是两个重要的概念&#xff0c;用于控制控制器方法处理和返回的内容类型。它们分别通过 consumes 和 produces 属性来指定。下面是它们的详细区别&#xff1a; 可…...

编程日记 2024/7/27 7:46:55

C++中指针与迭代器的区别

C中的迭代器和指针都是用于访问和操作内存中的数据结构的机制&#xff0c;但它们在使用方式和功能上有一些关键的区别。 #mermaid-svg-23bevhEih3Ch4ucl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-23bevhEih3Ch…...

编程日记 2024/7/27 7:43:52

若依框架 : 生成代码

6.生成代码 6.1.配置生成设置 ruoyi-generator -> src -> main -> resources -> generator.yml 由于 案例中 表都有 前缀 为 tta_ , 这里设置去掉 6.2.生成代码 6.2.1.导入数据库中的表 6.2.2.修改设置 6.2.2.1.设置生成信息 点击 编辑 -> 生成信息 特别…...

编程日记 2024/7/27 7:41:49

RTMP协议解析

RTMP&#xff08;Real Time Message Protocol&#xff09;是一种由Adobe公司提出的应用层协议&#xff0c;主要用于实时音视频数据的传输。RTMP协议的主要有以下特点&#xff1a; 1. 多路复用&#xff1a;RTMP允许多个音视频数据流在单个TCP连接上进行传输。 2. 分包传输&…...

编程日记 2024/7/27 7:38:45

禁忌搜索算法（Tabu Search，TS）及其Python和MATLAB实现

禁忌搜索算法是一种现代启发式搜索方案&#xff0c;主要用于解决组合优化问题。该算法由George F. Lugeral于1986年首次提出&#xff0c;旨在增强局部搜索算法的性能&#xff0c;避免其陷入局部最优解。禁忌搜索利用一个称为“禁忌表”的数据结构&#xff0c;记住最近访问的解决…...

编程日记 2024/7/27 7:36:42

Meta发布Llama 3.1 405B模型：开源与闭源模型之争的新篇章

引言 在人工智能领域&#xff0c;开源与闭源模型之争一直是热点话题。近日&#xff0c;Meta发布了最新的Llama 3.1 405B模型&#xff0c;以其强大的性能和庞大的参数规模&#xff0c;成为了开源模型中的佼佼者。本文将详细介绍Llama 3.1 405B模型的性能、功能及其在开源领域的…...

编程日记 2024/7/27 7:35:41

Linux网络协议深度解析：从IP到TCP/IP堆栈

Linux网络协议深度解析是一个复杂而详细的主题&#xff0c;它涵盖了从基本的数据包传输到复杂的协议交互。以下是对"Linux网络协议深度解析&#xff1a;从IP到TCP/IP堆栈"这一主题的简要解析&#xff1a; IP协议&#xff08;Internet Protocol&#xff09; •作用:…...

编程日记 2024/7/27 7:30:37

AWS DMS MySQL为源端，如何在更改分区的时候避免报错

问题描述&#xff1a; 文档[1]中描述MySQL compatible Databases作为DMS任务的源端&#xff0c;不支持MySQL 分区表的 DDL 更改。 在源端MySQL进行分区添加时&#xff0c;日志里会出现如下报错&#xff1a; [SOURCE_CAPTURE ]W: Cannot change partition in table members…...

编程日记 2024/7/27 7:28:35

Java从基础到高级特性及应用

Java&#xff0c;作为一门历史悠久且广泛应用的编程语言&#xff0c;自1995年问世以来&#xff0c;便以其跨平台性、面向对象、自动内存管理等特点&#xff0c;在软件开发领域占据了举足轻重的地位。从桌面应用到企业级系统&#xff0c;从移动开发到云计算服务&#xff0c;Java…...

编程日记 2024/7/27 7:27:34

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

编程新知 2026/1/22 11:13:58

Python第七周作业

Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt&#xff0c;并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径&#xff0c;并创建logs目录&#xff08;若不存在&#xff09; 3.递归遍历目录data&#xff0c;输出所有.csv文件的路径…...

编程新知 2025/12/14 13:20:23

Qt的学习（二）

1. 创建Hello Word 两种方式&#xff0c;实现helloworld&#xff1a; 1.通过图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显示helloworld 2.通过纯代码的方式&#xff0c;通过编写代码&#xff0c;在界面上创建控件&#xff0c; 显示hello world&#xff1b; …...

编程新知 2026/2/6 2:41:56

spring boot使用HttpServletResponse实现sse后端流式输出消息

1.以前只是看过SSE的相关文章&#xff0c;没有具体实践&#xff0c;这次接入AI大模型使用到了流式输出&#xff0c;涉及到给前端流式返回&#xff0c;所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...

编程新知 2026/2/5 2:55:19