前端(三)
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>…...
Maven知识
文章目录 一、概念1、官方文档2、什么是Maven？ 二、相关知识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、&…...
美颜SDK是什么？视频美颜SDK在直播平台中的集成与接入教程详解
当下，主播们追求更加自然、精致的外观，而观众也期待在屏幕前欣赏到更为清晰、美丽的画面。为了满足这一需求，美颜SDK应运而生，成为直播平台的重要利器之一。 一、什么是美颜SDK？ 通过美颜SDK，开发者可以…...
CSS基础面试题
介绍一下标准css盒子模型与低版本IE的盒子模型？ 标准盒子模型：宽度内容的宽度（content） border padding margin 低版本IE盒子模型：宽度内容宽度（contentborderpadding） margin box-sizing 属性…...
L1-028 判断素数
本题的目标很简单，就是判断一个给定的正整数是否素数。 输入格式： 输入在第一行给出一个正整数N（≤ 10），随后N行，每行给出一个小于231的需要判断的正整数。 输出格式： 对每个需要判断的正整数&a…...
Scala多线程爬虫程序的数据可视化与分析实践
一、Scala简介 Scala是一种多种类型的编程语言，结合了针对对象编程和函数式编程的功能。它运行在Java虚拟机上，具有强大的运算能力和丰富的库支持。Scala常用于大数据处理、并发编程和Web应用程序开发。其灵活性和高效性编程成为编写多线程爬虫程序的理…...
YOLOv8加入顶会ICLR2022MobileViT模块
一、原文引入介绍 MOBILEVIT：轻量级、通用型且移动友好的视觉Transformer 论文地址：https://arxiv.org/pdf/2110.02178.pdf MOBILEVIT: LIGHT-WEIGHT, GENERAL-PURPOSE,AND MOBILE-FRIENDLY VISION TRANSFORMER MobileViT是由苹果公司发表在ICLR2022顶会上的一篇文章，这篇文…...
「数据结构」二叉树1
🎇个人主页：Ice_Sugar_7 🎇所属专栏：C启航 🎇欢迎点赞收藏加关注哦！ 文章目录 🍉树🍉二叉树🍌特殊二叉树🍌二叉树的性质🍌存储结构 🍉…...
栈（C语言版）
一.栈的概念及结构 栈：一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶，另一端称为栈底。 栈中的数据元素遵守 后进先出 LIFO （ Last In First Out ）的原则。…...
聊聊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…...
Apache SeaTunne简介
Apache SeaTunne简介 文章目录 1.Apache SeaTunne是什么？1.1[官网](https://seatunnel.apache.org/)1.2 项目地址 2.架构3.特性3.1 丰富且可扩展的连接器和插件机制3.2 支持分布式快照算法以确保数据一致性3.3 支持流、批数据处理，支持全量、增量和实时数…...
【开题报告】基于uniapp的IT资讯阅读小程序的设计与实现
1.研究背景 随着信息技术的飞速发展和互联网的普及，IT（Information Technology）行业成为了当今社会中最活跃和最具前景的领域之一。人们对于IT领域的资讯需求越来越高，希望能够第一时间获取到全面、准确、及时的IT资讯。 传统的…...
Java小案例-SpringBoot火车票订票购票票务系统
目录 前言 详细资料 源码获取 前言 SpringBoot火车票订票购票票务系统 前端使用技术：HTML5,CSS3、JavaScript、VUE等 后端使用技术：Spring boot（SSM）等 数据库：Mysql数据库 数据库管理工具：phpstud…...
关于获取高级电工职业技能等级证书一些避坑经历
有幸在今年9月份成功通过高级电工职业技能等级认证,以下是我遇到的一些常见问题,以及一些考点内容以及总结 什么是高级电工职业技能等级证书 电工职业技能等级证书是证明持证人电工知识和技能水平高低的，是持证人应聘、求职、任职、开业的资格凭证，是用…...
springboot(ssm在线课程管理系统 网课管理系统Java系统
springboot(ssm在线课程管理系统 网课管理系统Java系统 开发语言：Java 框架：ssm/springboot vue JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.7（或8.0） 数…...
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 …...
1641：【例 1】矩阵 A×B
【题目描述】 矩阵 A 规模为 nm ，矩阵 B 规模为 mp ，现需要你求 AB 。 矩阵相乘的定义：nm 的矩阵与 mp 的矩阵相乘变成 np 的矩阵，令 aik 为矩阵 A 中的元素，bkj 为矩阵 B 中的元素，则相乘所得矩阵 C 中的…...
iOS问题记录 - iOS 17通过NSUserDefaults设置UserAgent无效
文章目录 前言开发环境问题描述问题分析解决方案最后 前言 最近维护一个老项目时遇到的问题。说起这老项目我就有点头疼，一个快十年前的项目，这么说你可能不觉得有什么，但是你想想Swift也才发布不到十年（2014年6月发布࿰…...
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 中的环境…...
tortoisesvn各版本下载链接
https://tortoisesvn.net 无法访问最新版本下载 TortoiseSVN download | SourceForge.net 所有版本下载 TortoiseSVN - Browse Files at SourceForge.net...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...
绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化
iOS 应用的发布流程一直是开发链路中最“苹果味”的环节：强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说，这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发（例如 Flutter、React Na…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...
《Offer来了：Java面试核心知识点精讲》大纲
文章目录 一、《Offer来了：Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了：Java面试核心知识点精讲（原理篇）》技术文章大纲核心主题：Java基础原理与面试高频考点Java虚拟机（JVM）原理Java并发编程原理Jav…...
node.js的初步学习
那什么是node.js呢？ 和JavaScript又是什么关系呢？ node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说， 需要在node.js的环境上进行当JavaScript作为前端开发语言来说，需要在浏览器的环境上进行 Node.js 可…...
java 局域网 rtsp 取流 WebSocket 推送到前端显示 低延迟
众所周知 摄像头取流推流显示前端延迟大 传统方法是服务器取摄像头的rtsp流 然后客户端连服务器 中转多了，延迟一定不小。 假设相机没有专网 公网 1相机自带推流 直接推送到云服务器 然后客户端拉去 2相机只有rtsp ，边缘服务器拉流推送到云服务器 …...
华为OD机考- 简单的自动曝光/平均像素
import java.util.Arrays; import java.util.Scanner;public class DemoTest4 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint[] arr Array…...