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

前端（1）HTML

news 2026/2/5 1:00:52

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/4 15:41:13

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/3 1:33:34

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/1/25 10:02:40

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2026/1/25 14:13:16

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47