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

前端(三)

news 2025/7/5 7:36:16

1.表格标签

数据展示:
jason 123 read
egon	123 dbj
tank  123 hecha
...
<table> <thead><tr>  一个tr就表示一行<th>username</th>  加粗文本<td>username</td>  正常文本</tr></thead>  表头(字段信息)<tbody><tr><td>jason</td><td>123</td><td>read</td></tr><tr><td>egon</td><td rowspan="2">egon</td><!--        <td>123</td>--><td>DBJ</td></tr></tbody>	 表单(数据信息)
</table><table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行# 原生的表格标签很丑 后续一般都是使用框架封装好的 很好看

2.表单标签

"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端action:控制数据提交的后端路径(给哪个服务端提交数据)1.什么都不写  默认就是朝当前页面所在的url提交数据2.写全路径:https://www.baidu.com  朝百度服务端提交3.只写路径后缀action='/index/'  自动识别出当前服务端的ip和port拼接到前面host:port/index/<label for="d1">  第一种 直接讲input框写在label内username:<input type="text" id="d1">
</label>					第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题"""
label 和 input都是行内标签
"""input标签 就类似于前端的变形金刚  通过type属性变形text:普通文本password:密文date:日期	submit:用来触发form表单提交数据的动作button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能reset:重置内容radio:单选默认选中要加checked='checked'<input type="radio" name="gender" checked='checked'>男当标签的属性名和属性值一样的时候可以简写<input type="radio" name="gender" checked>女checkbox:多选<input type="checkbox" checked>DBJfile:获取文件  也可以一次性获取多个<input type="file" multiple>hidden:隐藏当前input框钓鱼网站select标签 默认是单选 可以加mutiple参数变多选 默认选中selected<select name="" id="" multiple><option value="" selected>新垣结衣</option><option value="" selected>斯佳丽</option><option value="">明老师</option></select>textarea标签  获取大段文本<textarea name="" id="" cols="30" rows="10"></textarea># 能够触发form表单提交数据的按钮有哪些(一定要记住)1、<input type="submit" value="注册">2、<button>点我</button># 所有获取用户输入的标签 都应该有name属性name就类似于字典的key用户的数据就类似于字典的value<p>gender:<input type="radio" name="gender">男<input type="radio" name="gender">女<input type="radio" name="gender">其他</p>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body><h1>注册页面</h1><form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"><p><label for="d1">username:<input type="text" id="d1" name="username" value="默认值" readonly></label></p><p><label for="d2">password:<input type="password" id="d2" name="password"></label></p><input type="hidden" name="usernamename" value="骗子账户"><p>birthday:<input type="date"></p><p>gender:<input type="radio" name="gender" value="male">男<input type="radio" name="gender" checked value="female">女<input type="radio" name="gender" value="others">其他</p><p>hobby:<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" checked name="hobby" value="football">足球<input type="checkbox" checked name="hobby" value="doublecolorball">双色球</p><p>province：<select name="province" id=""><option value="sh">上海</option><option value="bj" selected>北京</option><option value="sz">深圳</option></select></p>
<!--        <p>前女友:-->
<!--            <select name="" id="" multiple>-->
<!--                <option value="" selected>新垣结衣</option>-->
<!--                <option value="" selected>斯佳丽</option>-->
<!--                <option value="">明老师</option>-->
<!--            </select>-->
<!--        </p>-->
<!--        <p>province1:-->
<!--            <select name="" id="">-->
<!--                <optgroup label="上海">-->
<!--                    <option value="">浦东</option>-->
<!--                    <option value="">黄埔</option>-->
<!--                    <option value="">青浦</option>-->
<!--                </optgroup>-->
<!--                <optgroup label="北京">-->
<!--                    <option value="">朝阳</option>-->
<!--                    <option value="">昌平</option>-->
<!--                    <option value="">沙河</option>-->
<!--                </optgroup>-->
<!--                <optgroup label="深圳">-->
<!--                    <option value="">111</option>-->
<!--                    <option value="">222</option>-->
<!--                    <option value="">333</option>-->
<!--                </optgroup>-->
<!--            </select>-->
<!--        </p>--><p>文件:<input type="file" multiple name="myfile"></p><p>自我介绍:<textarea name="info" id="" cols="30" rows="10"></textarea></p><input type="submit" value="注册">
<!--        当你没有指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致--><input type="button" value="按钮"><input type="reset" value="重置"><button>点我</button></form>
</body>
</html>

2.1 验证form表单提交数据

# 接下来的框架代码无需掌握  看一下效果即可
pip3 install FLASKform表单默认提交数据的方式 是get请求  数据是直接放在url后面的http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式<form action="http://127.0.0.1:5000/index/" method="post">针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:<input type="radio" name="gender" value="male">男<input type="radio" name="gender" checked value="female">女<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" checked name="hobby" value="football">足球<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：<select name="province" id=""><option value="sh">上海</option><option value="bj" selected>北京</option><option value="sz">深圳</option></select>
</p>"""
form表单提交文件需要注意1.method必须是post2.enctype="multipart/form-data"enctype类似于数据提交的编码格式默认是urlencoded 只能够提交普通的文本数据formdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, requestapp = Flask(__name__)# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
def index():print(request.form)  # 获取form表单提交过来的非文件数据# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])print(request.files)  # 获取文件数据file_obj = request.files.get('myfile.png')file_obj.save(file_obj.name)return 'OK'app.run()# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读

相关文章：

前端(三)

1.表格标签 数据展示: jason 123 read egon 123 dbj tank 123 hecha ... <table> <thead><tr> 一个tr就表示一行<th>username</th> 加粗文本<td>username</td> 正常文本</tr></thead> 表头(字段信息)<tbody>…...

编程日记 2023/12/19 10:37:12

Maven知识

文章目录 一、概念1、官方文档2、什么是Maven&#xff1f; 二、相关知识1、Maven生命周期1.1、clean1.2、default1.3、site 2、Pom文件3、Pom常用元素3.1、项目基本元素3.2、<properties\></properties\>3.3、pom继承相关3.4、依赖管理相关3.5、构建管理相关3.6、&…...

编程日记 2023/12/19 10:33:08

美颜SDK是什么？视频美颜SDK在直播平台中的集成与接入教程详解

当下&#xff0c;主播们追求更加自然、精致的外观&#xff0c;而观众也期待在屏幕前欣赏到更为清晰、美丽的画面。为了满足这一需求&#xff0c;美颜SDK应运而生&#xff0c;成为直播平台的重要利器之一。 一、什么是美颜SDK&#xff1f; 通过美颜SDK&#xff0c;开发者可以…...

编程日记 2023/12/19 10:32:07

CSS基础面试题

介绍一下标准css盒子模型与低版本IE的盒子模型&#xff1f; 标准盒子模型&#xff1a;宽度内容的宽度&#xff08;content&#xff09; border padding margin 低版本IE盒子模型&#xff1a;宽度内容宽度&#xff08;contentborderpadding&#xff09; margin box-sizing 属性…...

编程日记 2023/12/19 10:30:06

L1-028 判断素数

本题的目标很简单&#xff0c;就是判断一个给定的正整数是否素数。 输入格式&#xff1a; 输入在第一行给出一个正整数N&#xff08;≤ 10&#xff09;&#xff0c;随后N行&#xff0c;每行给出一个小于231的需要判断的正整数。 输出格式&#xff1a; 对每个需要判断的正整数&a…...

编程日记 2023/12/19 10:24:01

Scala多线程爬虫程序的数据可视化与分析实践

一、Scala简介 Scala是一种多种类型的编程语言&#xff0c;结合了针对对象编程和函数式编程的功能。它运行在Java虚拟机上&#xff0c;具有强大的运算能力和丰富的库支持。Scala常用于大数据处理、并发编程和Web应用程序开发。其灵活性和高效性编程成为编写多线程爬虫程序的理…...

编程日记 2023/12/19 10:18:56

YOLOv8加入顶会ICLR2022MobileViT模块

一、原文引入介绍 MOBILEVIT：轻量级、通用型且移动友好的视觉Transformer 论文地址：https://arxiv.org/pdf/2110.02178.pdf MOBILEVIT: LIGHT-WEIGHT, GENERAL-PURPOSE,AND MOBILE-FRIENDLY VISION TRANSFORMER MobileViT是由苹果公司发表在ICLR2022顶会上的一篇文章，这篇文…...

编程日记 2023/12/19 10:14:53

「数据结构」二叉树1

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;C启航 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 文章目录 &#x1f349;树&#x1f349;二叉树&#x1f34c;特殊二叉树&#x1f34c;二叉树的性质&#x1f34c;存储结构 &#x1f349;…...

编程日记 2023/12/19 10:13:52

栈（C语言版）

一.栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守 后进先出 LIFO &#xff08; Last In First Out &#xff09;的原则。…...

编程日记 2023/12/19 10:10:49

聊聊reactor-logback的AsyncAppender

序 本文主要研究一下reactor-logback的AsyncAppender AsyncAppender reactor-logback/src/main/java/reactor/logback/AsyncAppender.java public class AsyncAppender extends ContextAwareBaseimplements Appender<ILoggingEvent>, AppenderAttachable<ILogging…...

编程日记 2023/12/19 10:09:48

Apache SeaTunne简介

Apache SeaTunne简介 文章目录 1.Apache SeaTunne是什么&#xff1f;1.1[官网](https://seatunnel.apache.org/)1.2 项目地址 2.架构3.特性3.1 丰富且可扩展的连接器和插件机制3.2 支持分布式快照算法以确保数据一致性3.3 支持流、批数据处理&#xff0c;支持全量、增量和实时数…...

编程日记 2023/12/19 10:06:45

【开题报告】基于uniapp的IT资讯阅读小程序的设计与实现

1.研究背景 随着信息技术的飞速发展和互联网的普及&#xff0c;IT&#xff08;Information Technology&#xff09;行业成为了当今社会中最活跃和最具前景的领域之一。人们对于IT领域的资讯需求越来越高&#xff0c;希望能够第一时间获取到全面、准确、及时的IT资讯。 传统的…...

编程日记 2023/12/19 10:04:43

Java小案例-SpringBoot火车票订票购票票务系统

目录 前言 详细资料 源码获取 前言 SpringBoot火车票订票购票票务系统 前端使用技术&#xff1a;HTML5,CSS3、JavaScript、VUE等 后端使用技术&#xff1a;Spring boot&#xff08;SSM&#xff09;等 数据库&#xff1a;Mysql数据库 数据库管理工具&#xff1a;phpstud…...

编程日记 2023/12/19 10:03:42

关于获取高级电工职业技能等级证书一些避坑经历

有幸在今年9月份成功通过高级电工职业技能等级认证,以下是我遇到的一些常见问题,以及一些考点内容以及总结 什么是高级电工职业技能等级证书 电工职业技能等级证书是证明持证人电工知识和技能水平高低的&#xff0c;是持证人应聘、求职、任职、开业的资格凭证&#xff0c;是用…...

编程日记 2023/12/19 9:57:36

springboot(ssm在线课程管理系统 网课管理系统Java系统

springboot(ssm在线课程管理系统 网课管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数…...

编程日记 2023/12/19 9:55:33

4.1 媒资管理模块 - Nacos与Gateway搭建

文章目录 媒资管理模块 - 媒资项目搭建一、需求分析1.1 介绍1.2 数据模型1.3 分析网关 二、 搭建Nacos2.1 服务发现中心2.2.1 Maven2.2.2 配置Nacos 2.2 配置中心2.2.1 介绍2.2.2 Maven 坐标2.2.3 配置 content-api 工程2.2.4 配置 content-service 工程2.2.5 配置 system-api …...

编程日记 2023/12/19 9:54:32

1641：【例 1】矩阵 A×B

【题目描述】 矩阵 A 规模为 nm &#xff0c;矩阵 B 规模为 mp &#xff0c;现需要你求 AB 。 矩阵相乘的定义&#xff1a;nm 的矩阵与 mp 的矩阵相乘变成 np 的矩阵&#xff0c;令 aik 为矩阵 A 中的元素&#xff0c;bkj 为矩阵 B 中的元素&#xff0c;则相乘所得矩阵 C 中的…...

编程日记 2023/12/19 9:53:31

iOS问题记录 - iOS 17通过NSUserDefaults设置UserAgent无效

文章目录 前言开发环境问题描述问题分析解决方案最后 前言 最近维护一个老项目时遇到的问题。说起这老项目我就有点头疼&#xff0c;一个快十年前的项目&#xff0c;这么说你可能不觉得有什么&#xff0c;但是你想想Swift也才发布不到十年&#xff08;2014年6月发布&#xff0…...

编程日记 2023/12/19 9:52:31

linux的一些典型面试题解读

目录 前言1 Linux 文件系统2 Shell 编程3 进程管理4 用户和权限管理5 软件包管理6 网络配置7 系统监控和日志8 存储管理9 安全性10 常见命令11 系统启动流程12 Linux 进程间通信方式13 Linux 中的 I/O 多路复用14 Shell 脚本优化与调试15 Linux 文件权限与 ACL16 Linux 中的环境…...

编程日记 2023/12/19 9:50:28

tortoisesvn各版本下载链接

https://tortoisesvn.net 无法访问最新版本下载 TortoiseSVN download | SourceForge.net 所有版本下载 TortoiseSVN - Browse Files at SourceForge.net...

编程日记 2023/12/19 9:44:23

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/7/4 0:49:28

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/7/4 6:07:49

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/6/22 12:36:42

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/6/24 6:33:39

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/7/5 7:21:39

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/6/26 1:25:59

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2025/7/3 6:38:48

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/7/4 0:55:04