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.mzph.cn/web/55859.shtml

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

相关文章

NC 单据模板自定义项 设置参照（自定义参照）

NC 单据模板自定义项 设置参照（自定义参照）

NC 单据模板自定义项 设置参照&#xff08;自定义参照&#xff09; 如图下图&#xff0c;NC 单据模板自定义项 设置参照&#xff1a; 1、选择需要设置参照的自定义字段&#xff0c;选择高级属性页签&#xff0c;在类型设置中&#xff0c;数据类型选择参照信息&#xff0c;即bd…
阅读更多...
【热门主题】000004 案例 Vue.js组件开发

【热门主题】000004 案例 Vue.js组件开发

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…
阅读更多...
JavaWeb合集11-Maven高级

JavaWeb合集11-Maven高级

十一、Maven高级 1、分模块设计与开发 为什么?将项目按照功能拆分成若干个子模块,方便项目的管理维护、扩展,也方便模块间的相互调用&#xff0c;资源共享。 分模块开发需要先针对模块功能进行设计&#xff0c;再进行编码。不会先将工程开发完毕,然后进行拆分。 实现步骤&…
阅读更多...
RabbitMQ下载与配置

RabbitMQ下载与配置

安装Erlang Erlang 下载地址如下&#xff1a; https://erlang.org/download/otp_versions_tree.html 安装 RabbitMQ RabbitMQ 下载地址如下&#xff1a; https://www.rabbitmq.com/install-windows.html 查看服务&#xff0c;服务已经正常启动 打开Command Prompt 输入rabb…
阅读更多...
bash之基本运算符

bash之基本运算符

一.算术运算符 vim test.sh #!/bin/basha10 b20valexpr $a $b echo "a b : $val"valexpr $a - $b echo "a - b : $val"valexpr $a \* $b echo "a * b : $val"valexpr $b / $a echo "b / a : $val"valexpr $b % $a echo "b % a …
阅读更多...
TH-OCR：强大的光学字符识别工具与车牌识别应用

TH-OCR：强大的光学字符识别工具与车牌识别应用

在当今数字化的时代&#xff0c;高效准确地识别文本和图像中的字符变得至关重要。TH-OCR&#xff08;清华 OCR&#xff09;作为一款优秀的光学字符识别软件&#xff0c;以其卓越的性能和广泛的应用场景&#xff0c;受到了众多用户的青睐。其中&#xff0c;车牌识别功能更是在交…
阅读更多...
Discuz | 全站多国语言翻译和繁体本地转换插件 特色与介绍

Discuz | 全站多国语言翻译和繁体本地转换插件 特色与介绍

Discuz全站多国语言翻译和繁体本地转换插件 特色与介绍 特殊&#xff1a;集成了2个开源库1.多国语言翻译 来自&#xff1a;github.com/xnx3/translate特色&#xff1a;无限使用接口 免费使用2个翻译端 带有一级和二级缓存 实现秒翻译 2.简体 繁体&#xff08;台湾&#xff09…
阅读更多...
springboot项目多个数据源配置 dblink

springboot项目多个数据源配置 dblink

当项目中涉及到多个数据库连接的时候该如何处理&#xff1f; 在对应的配置文件&#xff0c;配置对应的数据库情况&#xff0c;不过我确实没咋测试对于事务的处理我可以后续在多做测试 配置文件中配置对应的数据源 然后再使用的时候使用这个 DS(“pd_ob”)注解。 然后又长知识…
阅读更多...
《计算机视觉》—— 基于dlib库的人检检测

《计算机视觉》—— 基于dlib库的人检检测

文章目录 一、dlib库的安装1. 通过PyCharm的Settings安装2. 通过Anaconda安装&#xff08;适用于Windows等操作系统&#xff09;3. 通过命令行安装4.懒人安装 二、基于dlib库的人检测1.对图像进行人脸检测2.打开电脑摄像头&#xff0c;检测人脸 一、dlib库的安装 在PyCharm中&…
阅读更多...
Vulnhub：Me-and-My-Girlfriend-1

Vulnhub：Me-and-My-Girlfriend-1

一.环境启动/信息收集 &#xff08;1&#xff09;根据物理地址用nmap的主机发现功能得出IP地址 nmap -P 192.168.138.0/24 //同网段下主机发现得到IP为192.168.138.180&#xff08;2&#xff09;做nmap的目录扫描和端口扫描来发现其他站带以及信息 nmap -p- 192.168.138.180 …
阅读更多...
使用CSS Flexbox创建简洁时间轴

使用CSS Flexbox创建简洁时间轴

使用CSS Flexbox创建简洁时间轴 在网页设计中,时间轴是一种常见且有效的方式来展示事件的顺序和进程。本文将介绍如何使用CSS Flexbox创建一个简洁优雅的时间轴,无需复杂的JavaScript代码。 基本HTML结构 首先,我们需要创建基本的HTML结构: html复制<div class"ti…
阅读更多...
Ansible自动化工具

Ansible自动化工具

一、Ansible概述 1.1 什么是Ansible Ansible 是一个开源的自动化工具&#xff0c;用于配置管理、应用程序部署和任务自动化。它让你可以通过编写简单的 YAML 文件&#xff08;剧本&#xff0c;Playbooks&#xff09;&#xff0c;轻松管理和配置多个服务器。Ansible 的特点是无…
阅读更多...
第十七周：机器学习笔记

第十七周：机器学习笔记

第十七周周报 摘要Abstratc一、机器学习——生成式对抗网络&#xff08;Generative Adversarial Networks | GAN&#xff09;——&#xff08;中&#xff09;1. GAN 的理论介绍2. 用JS散度训练存在的问题3. WGAN 算法4. 拓展——流体 总结 摘要 本周周报主要对GAN进行了详细的…
阅读更多...
学习笔记——交换——STP（生成树）工作原理

学习笔记——交换——STP（生成树）工作原理

三、工作原理 STP的基本原理是在一个有二层环路的网络中&#xff0c;交换机通过运行STP&#xff0c;自动生成一个没有环路的网络拓扑。这个无环网络拓扑也叫做STP树(STP Tree)&#xff0c;树节点为某些交换机&#xff0c;树枝为某些链路。当网络拓扑发生变化时&#xff0c;STP…
阅读更多...
js简单基础笔记

js简单基础笔记

一 . js特点 1. Js是一门解释型语言&#xff0c;不用编译&#xff0c;而是直接执行 2. js是一门动态语言&#xff0c;其中的任何内容都是不确定的 3. 语法结构和Java&#xff0c;c都很像 4. ​ js是一门面向对象的语言 5.js严格区分大小写 二 . js使用 1…
阅读更多...
TiDB 新版本：更稳、更快、更好的数据库体验

TiDB 新版本：更稳、更快、更好的数据库体验

作者&#xff1a; TiDB社区小助手 原文来源&#xff1a; https://tidb.net/blog/2d33d7db 本文内容出自&#xff1a;PingCAP 高级顾问 蓝功儒老师 在 9 月 21 日 TiDB 新版本 Meetup 中&#xff0c;PingCAP 高级顾问蓝功儒老师为我们带来了关于 TiDB 新版本的深入分享。TiD…
阅读更多...
基于LORA的一主多从监测系统_数据发送

基于LORA的一主多从监测系统_数据发送

数据上传我这里使用了问询的方式&#xff0c;这样的好处一是可以用来统计节点的存活状态&#xff0c;二是可以避免冲突&#xff0c;主节点通过向从节点发送问询帧&#xff0c;从节点收到问询帧后开始向主节点发送数据&#xff0c;同时我们也可以加入不同的帧类型&#xff0c;比…
阅读更多...
4.three.js网格模型介绍和绘制基础点、线、面

4.three.js网格模型介绍和绘制基础点、线、面

4.three.js网格模型介绍和绘制基础点、线、面 1、计算机中3D世界的组成 在计算机世界里&#xff0c;3D世界是由点组成&#xff0c;两个点能够组成一条直线&#xff0c;三个不在一条直线上的点就能够组成一个三角形面&#xff0c;无数三角形面就能够组成各种形状的物体&#x…
阅读更多...
Linux基础项目开发day05：量产工具——页面系统

Linux基础项目开发day05：量产工具——页面系统

文章目录 一、数据结构抽象page_manager.h 二、页面管理器page_manager.c 三、单元测试1、main.page.c2、page_test.c3、Makefile修改3.1、unittest中的Makefile3.2、page中的Makefile 四、上机实验 前言 前面实现了显示、输入、文字、UI系统&#xff0c;现在我们就来实现页面的…
阅读更多...
Axure树形菜单展开与折叠

Axure树形菜单展开与折叠

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;Axure树形菜单展开与折叠 主要内容&#xff1a;树形菜单制作——层级关系——隐藏与显示——值的变化——多层交互 应用场景&#xff1a;关系树、菜…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023