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

前端（1）HTML

news 2025/12/20 20:43:28

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

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/12/19 17:19:04

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/12/10 2:57:55

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/12/15 20:41:51

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/12/18 11:07:38

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/12/9 21:24:04

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59