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

前端(三)

news 2026/5/18 15:41:41

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

Web NFC技术入门：在浏览器中实现NFC标签读写与信息管理

1. 项目概述&#xff1a;当NFC遇见浏览器作为一名在嵌入式系统和物联网领域摸爬滚打了十多年的开发者&#xff0c;我经历过无数次需要将物理设备与数字世界连接起来的项目。从早期的红外、蓝牙&#xff0c;到后来的RFID&#xff0c;每次技术迭代都试图让这种连接变得更无缝、更…...

编程新知 2026/5/18 15:28:46

冻肉切丁机性价比排名：企业采购选型策略深度解析

冻肉切丁机性价比排名与企业采购选型策略&#xff1a;FAQ深度解析“不是越贵越好&#xff0c;适合才是王道——冻肉切丁机采购需平衡性能、成本与场景适配性”企业采购冻肉切丁机时&#xff0c;常被市场上五花八门的性价比排名绕晕&#xff0c;既担心买贵了浪费成本&#xff0c…...

编程新知 2026/5/18 14:40:34

构建多模型智能客服时如何借助 Taotoken 实现灵活路由与降级

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 构建多模型智能客服时如何借助 Taotoken 实现灵活路由与降级 在构建企业级智能客服系统时&#xff0c;服务的稳定性和响应能力至关…...

编程新知 2026/5/18 14:13:38

在Node.js后端服务中集成Taotoken实现稳定且低成本的大模型能力

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在Node.js后端服务中集成Taotoken实现稳定且低成本的大模型能力 对于需要在产品中集成智能对话功能的中小型团队而言&#xff0c;直…...

编程新知 2026/5/18 13:22:00

独立可托管的 listmonk：新闻通讯与邮件列表管理的高效工具

【导语&#xff1a;listmonk 作为一款独立且可自行托管的新闻通讯和邮件列表管理工具&#xff0c;以其速度快、功能丰富等特点受到关注。本文将介绍其安装方式、开发者相关信息及许可证等内容。】功能特性鲜明的 listmonklistmonk 是一款独立的、可自行托管的新闻通讯和邮件列表…...

编程新知 2026/5/18 12:14:34

不止于仿真：用Vivado自带的仿真器做FPGA设计验证与快速迭代

从仿真到验证&#xff1a;Vivado仿真器在FPGA设计中的高阶应用 在FPGA开发领域&#xff0c;仿真环节常常被工程师视为"不得不做"的流程性工作&#xff0c;而非设计验证的核心手段。这种认知导致许多项目陷入"烧录-调试-修改"的循环中&#xff0c;消耗大量时…...

编程新知 2026/5/18 11:03:02

Taotoken的Token Plan套餐如何帮助个人开发者更可控地规划AI支出

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken的Token Plan套餐如何帮助个人开发者更可控地规划AI支出 对于个人开发者或小型项目团队而言&#xff0c;大模型API的调用成…...

编程新知 2026/5/18 10:54:36

从SolidWorks到Geant4仿真：我的第一个粒子探测器CAD模型导入全记录（含CADMesh避坑点）

从SolidWorks到Geant4仿真&#xff1a;我的第一个粒子探测器CAD模型导入全记录&#xff08;含CADMesh避坑点&#xff09; 作为一名刚接触粒子探测器仿真的研究生&#xff0c;我花了整整两周时间才成功将SolidWorks设计的模型导入Geant4进行模拟。这个过程远比想象中复杂&#x…...

编程新知 2026/5/18 12:13:44

告别手改脚本！用CANoe Panel面板做个变量控制台，测试效率翻倍

告别手改脚本&#xff01;用CANoe Panel面板打造智能变量控制台 在车载网络测试领域&#xff0c;效率提升往往隐藏在那些被忽视的日常操作细节中。当测试工程师频繁打开CAPL脚本修改超时阈值、调整诊断ID或切换测试模式时&#xff0c;不仅打断了工作流&#xff0c;更在团队协作…...

编程新知 2026/5/18 11:55:27

5分钟免费制作专业AI翻唱：AICoverGen完整指南

5分钟免费制作专业AI翻唱&#xff1a;AICoverGen完整指南 【免费下载链接】AICoverGen A WebUI to create song covers with any RVC v2 trained AI voice from YouTube videos or audio files. 项目地址: https://gitcode.com/gh_mirrors/ai/AICoverGen 想让AI帮你翻唱…...

编程新知 2026/5/18 13:27:38