HTML之表单设计

1、HTML表单

HTML表单是用于收集用户输入的信息，并将用户输入的内容信息传到后台服务器中。

表单是通过form标签实现。

特别注意：如果一些内容提交后，没有将内容提交给后台服务器，那么需要添加一个name属性，语法：name=“变量名”。

2、HTML表单的action属性

（1）表单中action属性，里面填写的是后台服务器的地址，表示向何处发送数据。

语法：<form action="URL">

（2）常用表单属性还有method，该属性指定提交表单数据时要使用的 HTTP 方法，也即请求方法。非必填，默认的 HTTP 方法是 GET。以名称/值对的形式将表单数据追加到 URL，但URL 的长度受到限制（2048 个字符），POST 没有大小限制，可用于发送大量数据。

语法：<form action="URL" method="post"> #定义请求方法，非必填，默认get

注：URL定义

  • 绝对 URL - 指向另一个网站（比如 action=“http://www.example.com/example.htm”）
  • 相对 URL - 指向网站内的一个文件（比如 action=“example.htm”）

有几种url地址的写法要注意区分:

①. action="/upload"： 这是一个绝对路径，浏览器将从网站的根目录开始解析该路径。例如，如果你的网站位于 http://example.com/，那么表单数据将被提交到 http://example.com/upload。
如下效果一样：

<form action="/test3">
<form action="http://10.12.224.153:5569/test3">

② action="./upload"： 这是相对于当前路径的路径，./ 表示当前目录。如果当前页面的URL是 http://example.com/initfolder/initpage，那么表单数据将被提交到 http://example.com/initfolder/initpage/upload。

③. action="upload"： 这是一个相对路径,路径跟当前的路径平级。浏览器将根据当前页面的URL进行解析。如果当前页面的URL是 http://example.com/initfolder/initpage，那么表单数据将被提交到 http://example.com/initfolder/upload。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com" method= "get"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

3、HTML表单-----标签

(1)、HTML表单–输入标签–<input>：

表单中最常用的标签为<input>标签，<input>标签为单标签，使用type属性来决定不同的输入类型。

①type=“text”—文本输入框

这个类型表示输入框为文本输入框，用户可以在文本输入框中输入数字，字母，中文等任何东西。

技能点1：文本框输入提交后，它不会对文本框的内容上传给后台服务器。

解决方法：添加一个name属性，语法：name=“变量名”

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"></form>
</body></html>

效果如下：
在这里插入图片描述

在输入框中输入：李四，回车，效果如下：

在这里插入图片描述

可见：提交后就可以将输入框中“李四”传到后台服务器上

说明：如果想将输入框中的数据传到后台服务器上每个输入框都要有一个name属性

技能点2：文本输入框默认值

使用value属性，可以给文本输入框添加默认值

 请输入姓名：<input type="text" name="uname" value="张三">

②type=“password”—密码框

这个类型表示输入框为密码框，里面可以填写数字，字母，中文等所有东西，但是输入的内容都会被隐藏起来。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><br>这是一个密码框：<input type="password"></form>
</body></html>

效果如下：
在这里插入图片描述

③type=“radio”—单选框

这个类型代表输入框为一个单选按钮，比如性别男和女分类这时使用单选按钮

如：

男<input type="radio">女<input type="radio">

效果如下：
在这里插入图片描述

技能点1：如果仅仅这样，可以同时选中这两个单选按钮，为了解决这个问题，我们需要将两个单选按钮进行绑定，这样就可以实现两个只能选其一个。

解决方法：使用name属性。语法：name=“变量名”（但是这两个单选按钮的那么的参数必须相同）

男<input type="radio" name="sex">女<input type="radio" name="sex">

技能点2：如果想默认选中女要怎么解决呢？

解决方法：在女的单选按钮上添加属性checked

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><br>这是一个密码框：<input type="password"><br>男<input type="radio" name="sex">女<input type="radio" name="sex" checked></form>
</body></html>

效果如下 ：
在这里插入图片描述
④type=“checkbox”—多选框

唱<input type="checkbox">跳<input type="checkbox">rap<input type="checkbox">

效果如下：
在这里插入图片描述
技能点1：如何实现默认选择跳和rap

解决方法：只需要将对应的input标签添加checked属性即可实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><br>这是一个密码框：<input type="password"><br>男<input type="radio" name="sex">女<input type="radio" name="sex" checked><br><!-- 使用type="checkbox"实现多选框 -->唱<input type="checkbox">跳<input type="checkbox" checked>rap<input type="checkbox" checked></form>
</body></html>

效果如下：
在这里插入图片描述
⑤type=“submit”—提交按钮，作用是将表单中的内容提交到后台服务器中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"><br>这是一个密码框：<input type="password"><br>男<input type="radio" name="sex">女<input type="radio" name="sex" checked><br><!-- 使用type="checkbox"实现多选框 -->唱<input type="checkbox">跳<input type="checkbox" checked>rap<input type="checkbox" checked></form>
</body></html>

效果如下：
在这里插入图片描述

提交的作用是将表单中的内容提交到后台服务器中并实现跳转。如文本框输入李四，点击提交按钮，会跳转到http://www.baidu.com
在这里插入图片描述
技能点1：表单还可以通过<button>按钮标签实现提交的功能
在这里插入图片描述
效果如下：
在这里插入图片描述
⑥type=“reset”—重置按钮，作用是清空让输入框中的非默认值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"><br>这是一个密码框：<input type="password"><br>男<input type="radio" name="sex">女<input type="radio" name="sex" checked><br><!-- 使用type="checkbox"实现多选框 -->唱<input type="checkbox">跳<input type="checkbox" checked>rap<input type="checkbox" checked></form>
</body></html>

效果如下：
在这里插入图片描述
**⑦type=“date”— 日期输入 **

用于应该包含日期的输入字段。当您填写输入字段时会弹出日期选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><input type="date"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

效果如下：
在这里插入图片描述
**⑧type=“month” —月份输入 **

允许用户选择月份。根据浏览器支持，日期选择器会出现输入字段中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><input type="month"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

效果如下：
在这里插入图片描述
**⑨type=“time” —时间输入 **

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><input type="time"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

允许用户选择时间（无时区）。根据浏览器支持，时间选择器会出现输入字段中。

效果如下：
在这里插入图片描述
**⑩type=“file” —文件上传 **

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><input type="file" name="fi"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

效果如下：
在这里插入图片描述

(2)、HTML表单–下拉框标签–<select>和<option>

表格中实现下来框需要使用<select>标签和<option>标签同时使用。

  • <select>标签是一个双标签，主要是用来包着标签用来表示这是一个下拉框。
  • <option>标签是一个双标签，主要是展示下拉框的具体内容。

这些标签必须在form表单中才能实现下拉框的作用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"><br>这是一个密码框：<input type="password"><br>男<input type="radio" name="sex">女<input type="radio" name="sex" checked><br><!-- 使用type="checkbox"实现多选框 -->唱<input type="checkbox">跳<input type="checkbox" checked>rap<input type="checkbox" checked><br><select><option>张三</option><option>李四</option><option>王五</option></select></form>
</body></html>

效果如下：
在这里插入图片描述

技能点1：如何修改默认值，不让第一个作为默认值呢？

解决方法：在想要默认值的<option>标签中添加一个selected属性即可，但是注意只能有一个！

<option selected>王五</option>

(3)HTML表单—边框标签–<fieldset>

如果表单需要加上边框，可以使用标签<fieldset>

<fieldset>标签是一个双标签，它可以将表单中的内容添加边框，只需要要被加边框的内容外套上标签即可，并且边框可以嵌套

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><fieldset><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"><br>这是一个密码框：<input type="password"><br>男<input type="radio" name="sex">女<input type="radio" name="sex" checked><br><!-- 使用type="checkbox"实现多选框 -->唱<input type="checkbox">跳<input type="checkbox" checked>rap<input type="checkbox" checked><br><fieldset><select><option>张三</option><option>李四</option><option selected>王五</option></select></fieldset></fieldset></form>
</body></html>

效果如下：
在这里插入图片描述
技能点1：边框可以嵌套，如上demo

技能点2：如果要在表单的边框上添加标题，只需使用<legend>标签实现即可

<legend>标签是一个双标签，作用是给表单添加一个标题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><fieldset><!-- 实现表单的标题 --><legend>个人信息</legend><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname"><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></fieldset></form>
</body></html>

效果如下：

在这里插入图片描述
(4)HTML表单–文本域标签–<textarea>—可输入多行内容

文本域是一个可以让我们输入多行内容的一个容器，使用<textarea>标签实现，这是一个单标签。

常见属性如下：

①cols

语法：cols=数量，表示这个文本域的宽度能容纳多少个字母

②rows

语法：rows=数量，表示这个文本域有多少行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个文本域输入框 --><textarea cols="26" rows="3" placeholder="请输入内容"></textarea><br><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

效果如下：
在这里插入图片描述
技能点1：文本域输入内容提交后，它不会对输入的内容上传给后台服务器。

解决方法：添加一个name属性，语法：name=“变量名”

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><textarea placeholder="请输入" name="un"></textarea><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

四、HTML表单-----标签的通用属性，可以在表单中的所有标签上使用。

第一项：readonly只读添加这个属性，输入框就无法输入内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><fieldset><!-- 实现表单的标题 --><legend>个人信息</legend><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname" value="张三" readonly><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></fieldset></form>
</body></html>

效果如下：只能查看内容，但无法进行添加、删除、修改等操作
在这里插入图片描述
第二项：disabled无法操作

这个属性与只读类似，但是它直接输入框都无法点击。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><fieldset><!-- 实现表单的标题 --><legend>个人信息</legend><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname" value="张三" disabled><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></fieldset></form>
</body></html>

效果如下：文本输入框无法点击
在这里插入图片描述
第三项：hidden隐藏

这个属性能使表单中标签隐藏起来，无法看见。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><fieldset><!-- 实现表单的标题 --><legend>个人信息</legend><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname" value="张三" hidden=""><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></fieldset></form>
</body></html>

效果如下：文本输入框直接看不见了
在这里插入图片描述
第四项：placeholder输入提示信息—仅为提示信息，即使submit也不会作为请求数据提交到后端，但是输入框的默认值会最为请求数据提交到后端(默认值使用value属性)

这个属性可以让输入框中出现提示，当用户输入信息时会消失，但是当用户将内容清空后会再次出现提示。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><fieldset><!-- 实现表单的标题 --><legend>个人信息</legend><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname" placeholder="张三"><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></fieldset></form>
</body></html>

效果如下：
在这里插入图片描述

第五项：autofocus自动聚焦属性

这个属性是当用户进入网页后鼠标会自动聚焦到对应输入框中，自动聚焦在整个网页中只能出现一次这个属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><fieldset><!-- 实现表单的标题 --><legend>个人信息</legend><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname" autofocus><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></fieldset></form>
</body></html>

效果如下:
在这里插入图片描述

第六项：autocomplete属性—记忆功能

autocomplete属性能自动完成允许浏览器对字段的输入，是基于之前输入过的值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname" autocomplete=""><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

效果如下：之前输入过的值在点击输入框时候能够展示出来选择输入
在这里插入图片描述

第七项：required属性—必填项

required属性表明该控件为必填项。required特性可用于任何类型的输入元素。required属性是布尔类型属性，无需专门把它设置为true，只需将它添加到标签中即可。一个表单中，可以有多个元素拥有required属性。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="http://www.baidu.com"><!-- 这是一个普通的文本输入框 -->请输入姓名：<input type="text" name="uname" required><!-- 这个一个重置按钮，可以将非默认值进行清空 --><input type="reset"><!-- 使用type="submit"这个一个提交按钮，可以将内容提交到后台服务器--><input type="submit"></form>
</body></html>

效果如下：没有填写无法提交
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/455367.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Stable Diffusion 3.5 震撼发布！最新开源 AI 图像生成模型，艺术创作必备神器！

Stable Diffusion 3.5 震撼发布！最新开源 AI 图像生成模型，艺术创作必备神器！

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…
阅读更多...
【NOIP普及组】 装箱问题

【NOIP普及组】 装箱问题

【NOIP普及组】 装箱问题 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 有一个箱子容量为V&#xff08;正整数&#xff0c;0&#xff1c;&#xff1d;V&#xff1c;&#xff1d;20000&#xff09;&#xff0c;同时有n个物品&#xff08;0&…
阅读更多...
KubeSphere 最佳实战：Kubernetes 部署集群模式 Nacos 实战指南

KubeSphere 最佳实战：Kubernetes 部署集群模式 Nacos 实战指南

Nacos 是 Dynamic Naming and Configuration Service 的首字母简称&#xff0c;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 Nacos 是构建以服务为中心的现代应用架构 (例如微服务范式、云原生范式) 的服务基础设施。 在本文中&#xff0c;我将为您提供…
阅读更多...
k8s备份恢复（velero）

k8s备份恢复（velero）

velero简介 velero官网&#xff1a; https://velero.io/ velero-github&#xff1a; https://github.com/vmware-tanzu/velero velero的特性 备份可以按集群资源的子集&#xff0c;按命名空间、资源类型标签选择器进行过滤&#xff0c;从而为备份和恢复的内容提供高度的灵活…
阅读更多...
怎么在线制作拼团活动

怎么在线制作拼团活动

在这个快节奏的时代&#xff0c;我们总在寻找那份独特的购物乐趣与超值体验。传统购物模式已难以满足日益增长的个性化与性价比需求&#xff0c;而在线购物虽便捷&#xff0c;却常让人在琳琅满目的商品中迷失方向。正是在这样的背景下&#xff0c;一种全新的购物方式——“在线…
阅读更多...
vue3处理货名的拼接

vue3处理货名的拼接

摘要&#xff1a; 货品的拼接规则是&#xff1a;【品牌】货名称/假如货品名称为空时&#xff0c;直接选择品牌为【品牌】赋值给货品&#xff0c;再选择品牌&#xff0c;会替换【品牌】&#xff1b;假如货名称为【品牌】名称&#xff0c;再选择品牌只会替换【品牌】&#xff0c;…
阅读更多...
vue3项目页面实现echarts图表渐变色的动态配置

vue3项目页面实现echarts图表渐变色的动态配置

完整代码可点击vue3项目页面实现echarts图表渐变色的动态配置-星林社区 https://www.jl1mall.com/forum/PostDetail?postId202410151031000091552查看 一、背景 在开发可配置业务平台时&#xff0c;需要实现让用户对项目内echarts图表的动态配置&#xff0c;让用户脱离代码也…
阅读更多...
2024下半年软考机考模拟系统已开放！小伙伴们速速练起来

2024下半年软考机考模拟系统已开放！小伙伴们速速练起来

千呼万唤使出来&#xff0c;软考机考的模拟练习系统已于10月23号正式开放&#xff01; 今年报名计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff08;软考&#xff09;的小伙伴们千万不要忘记哦&#xff01; 01、开放时间 据中国计算机技术职业资格网发…
阅读更多...
基于AI识别数据的Vue.js图像框选标注

基于AI识别数据的Vue.js图像框选标注

在数字化时代&#xff0c;图像识别技术的应用越来越广泛&#xff0c;尤其是在车牌识别、人脸识别等领域。本文将介绍如何使用Vue.js框架和JavaScript创建一个交互式组件&#xff0c;该组件不仅允许用户在图片上绘制多个区域&#xff0c;加载文字&#xff0c;还提供了清空功能。…
阅读更多...
外包干了2个月，技术明显退步

外包干了2个月，技术明显退步

回望过去&#xff0c;我是一名普通的本科生&#xff0c;于2019年通过校招有幸加入了南京某知名软件公司。那时的我&#xff0c;满怀着对未来的憧憬和热情&#xff0c;投入到了功能测试的岗位中。日复一日&#xff0c;年复一年&#xff0c;转眼间&#xff0c;我已经在这个岗位上…
阅读更多...
常用shell指令

常用shell指令

这些指令通常在adb shell环境中使用&#xff0c;或者通过其他方式&#xff08;如SSH&#xff09;直接在设备的shell中使用。 文件操作命令 ls&#xff1a;列出目录的内容 ls /sdcard cd&#xff1a;改变目录 cd /sdcard/Download pwd&#xff1a;打印当前工作目录 pwd cat&…
阅读更多...
CV2通过一组轮廓点扣取图片

CV2通过一组轮廓点扣取图片

代码如下&#xff1a; import cv2 import numpy as np# 读取原始图像 original_image cv2.imread(img.png)# 定义一组轮廓点&#xff08;这里只是示例&#xff0c;你需要根据实际情况替换&#xff09; points np.array([[50, 100], [100, 200], [200, 150], [200, 50], [160…
阅读更多...
负载均衡服务器攻击怎么解决最有效？

负载均衡服务器攻击怎么解决最有效？

负载均衡服务器攻击怎么解决最有效&#xff1f;常见的有效解决方法包括&#xff1a;使用SYNCookie机制、限制ICMP包速率、基于源IP的连接速率限制、检测并丢弃异常IP包、配置访问控制列表&#xff08;ACL&#xff09;、设置虚拟服务器/服务器连接数量限制、设置HTTP并发请求限制…
阅读更多...
【景观生态学实验】实验二 景观类型分类

【景观生态学实验】实验二 景观类型分类

实验目的 1.掌握ArcGIS软件的基本操作&#xff1a;通过课堂理论学习与实验课的实际动手操作&#xff0c;学习并熟练掌握如何利用ArcGIS软件对遥感影像进行一些较为基础的数据处理与分析工作&#xff0c;具体包括波段合成、图像镶嵌、图像裁剪与图像分类等&#xff1b; 2.熟悉…
阅读更多...
基于STM32设计的养殖场环境监测系统(华为云IOT)

基于STM32设计的养殖场环境监测系统(华为云IOT)

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】需求总结 1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发 二、部署华为云物联网平台2.1 物联网平台介绍2.2 开通物联网服务2.3 创建产品&#x…
阅读更多...
微信小程序-获取头像和昵称

微信小程序-获取头像和昵称

一.获取头像 1.将button组件open-type的值设置为chooseAvatar 2.通过bindchooseavatar事件回调获取到头像信息的临时路径 wxml文件代码&#xff1a; <view> <button class"btn" open-type"chooseAvatar" bindchooseavatar"chooseavatar&qu…
阅读更多...
生成式人工智能

生成式人工智能

这个接龙的生成就是概率式的&#xff0c;下一个接龙的字是有概率的 本身就是在做文字接龙的游戏&#xff0c;不会搜索网上的资料
阅读更多...
Zig语言通用代码生成器：逻辑，冒烟测试版发布

Zig语言通用代码生成器：逻辑，冒烟测试版发布

#1024程序员节 | 征文# Zig语言通用代码生成器&#xff1a;逻辑&#xff0c;冒烟测试版发布 Zig语言是一种新的系统编程语言&#xff0c;其生态位类同与C&#xff0c;是前一段时间大热的rust语言的竞品。它某种意义上的确非常像rust&#xff0c;尤其是在开发过程中无穷无尽抛错…
阅读更多...
【哈工大_操作系统理论】L282930 生磁盘的使用从生磁盘到文件文件使用磁盘的实现

【哈工大_操作系统理论】L282930 生磁盘的使用从生磁盘到文件文件使用磁盘的实现

L4.3 生磁盘的使用 1、认识磁盘 选择磁道旋转扇区数据读写 哪一个柱面 C哪一个磁头 H哪一个扇区 S 2、第一层抽象&#xff1a;盘块号block 发送盘块号block&#xff0c;磁盘驱动根据 block 计算出 cyl、head、sec&#xff08;CHS&#xff09; 磁盘访问时间主要是寻道时间…
阅读更多...
精准布局：探索CSS中的盒子固定定位的魅力

精准布局：探索CSS中的盒子固定定位的魅力

一、概念 固定定位使元素相对于浏览器窗口进行定位&#xff0c;无论网页如何滚动&#xff0c;固定定位的元素也会保持在相同的位置&#xff0c;设置固定定位的元素脱离文档流。 二、语法结构 <style>选择器{/* fixed 固定定位 */position: fixed;}</style> 与绝…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023