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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

鼠标移入盒子，盒子跟随鼠标移动

鼠标移入盒子，盒子跟随鼠标移动

demo效果&#xff1a; 鼠标移入盒子&#xff0c;按下鼠标,开启移动跟随移动模式,再次按下关闭移动模式 涉及主要属性 在元素上单击鼠标按钮时输出鼠标指针的坐标&#xff1a; var x event.pageX; // 获取水平坐标 var y event.pageY; // 获取垂直坐标元素offsetL…
阅读更多...
JDK-23与JavaFX配置在IDEA中

JDK-23与JavaFX配置在IDEA中

一、安装 1.IDEA安装&#xff0c;可以查看CSDN 2.JDK,JavaFX安装&#xff0c;可以查看CSDN 二、配置JDK 打开IDEA&#xff0c;选择个项目&#xff0c;点击图中的设置按钮&#xff1a; 点击项目设置&#xff1a; 点击“”添加JDK&#xff0c;寻找相应的JDK目录就行 三、配置…
阅读更多...
Python快速入门教程

Python快速入门教程

目录 1. Python 简介 2. 环境准备 3. 第一个 Python 程序 4. 变量与数据类型 5. 基本操作与控制结构 6. 函数与模块 7. 实践项目 结语 Python 是一种非常友好的编程语言&#xff0c;特别适合初学者。它的语法简洁&#xff0c;容易上手&#xff0c;并且广泛应用于各种领…
阅读更多...
机器视觉运动控制一体机在DELTA并联机械手视觉上下料应用

机器视觉运动控制一体机在DELTA并联机械手视觉上下料应用

市场应用背景 DELTA并联机械手是由三个相同的支链所组成&#xff0c;每个支链包含一个转动关节和一个移动关节&#xff0c;具有结构紧凑、占地面积小、高速高灵活性等特点&#xff0c;可在有限的空间内进行高效的作业&#xff0c;广泛应用于柔性上下料、包装、分拣、装配等需要…
阅读更多...
从docker中导出已经存在的容器

从docker中导出已经存在的容器

从docker中导出已经存在的容器,作用:创建一个容器可以给多台电脑的docker使用&#xff0c;不用重复安装环境。 操作步骤&#xff1a; (1)先运行要导出的容器&#xff0c;并在cmd终端使用docker ps 查看运行的详细信息&#xff0c;留意一下 COMMAND对应的值后面运行容器需要使用…
阅读更多...
创建匿名管道

创建匿名管道

匿名管道&#xff1a; pipe()函数可用于创建一个管道&#xff0c;以实现进程间的通信。 头文件是#include<unistd.h>&#xff0c;参数是int类型的数组 fd[0]表示读端 fd[1]表示写端 如下代码使用pipe函数创建管道&#xff0c;并打印出来&#xff0c;最后关闭终端。 #…
阅读更多...
力扣 简单 70.爬楼梯

力扣 简单 70.爬楼梯

文章目录 题目介绍题解 题目介绍 题解 思路分析&#xff1a; 确定dp数组以及下标的含义&#xff1a;dp[i]&#xff1a; 爬到第i层楼梯&#xff0c;有dp[i]种方法确定递推公式&#xff1a;从dp[i]的定义可以看出&#xff0c;dp[i] 可以有两个方向推出来。首先是dp[i - 1]&…
阅读更多...
Springboot基于微信小程序的同城优惠软件的开发-计算机毕设 附源码24287

Springboot基于微信小程序的同城优惠软件的开发-计算机毕设 附源码24287

Springboot基于微信小程序的同城优惠软件的开发 摘要 随着互联网技术的发展&#xff0c;网络购物越来越受到大家的欢迎。电子商务这一概念大家都不在陌生。通过互联网进行的商品贸易范围越来越广泛&#xff0c;从经典的电子商品、到化妆品、书籍等&#xff0c;发展到小吃商品&a…
阅读更多...
PCL学习——点云基础

PCL学习——点云基础

点云基础 一、什么是三维点云二、获取三维点云的几种方式三、主要挑战四、什么是PCL 一、什么是三维点云 三维点云&#xff08;3D Point Cloud&#xff09;是一种用于表示三维空间中对象或场景的数据结构。在最基础的形式中&#xff0c;它是一个包含多个三维坐标点&#xff08…
阅读更多...
SpringBoot民宿预定信息管理系统-计算机毕业设计源码89828

SpringBoot民宿预定信息管理系统-计算机毕业设计源码89828

目 录 摘要 1 绪论 1.1 选题背景与意义 1.2研究背景 1.3论文结构与章节安排 2 民宿预定信息管理系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分…
阅读更多...
Pytest日志收集器配置

Pytest日志收集器配置

前言 在pytest框架中&#xff0c;日志记录&#xff08;logging&#xff09;是一个强大的功能&#xff0c;它允许我们在测试期间记录信息、警告、错误等&#xff0c;从而帮助调试和监控测试进度。 pytest与Python标准库中的logging模块完美集成&#xff0c;因此你可以很容易地在…
阅读更多...
Spring源码解析(35)之Spring全体系源码流程图

Spring源码解析(35)之Spring全体系源码流程图

一、前言 画了一个spring全体系的流程图&#xff0c;spring容器创建过程&#xff0c;spring生命周期过程&#xff0c;AOP过程&#xff0c;Spring事务执行过程。 二、Spring体系源码图
阅读更多...
【1024程序员节】之C++系列完结篇：Web编程

【1024程序员节】之C++系列完结篇：Web编程

文章目录 一、Web编程1. 使用C标准库和第三方库2. 使用CWeb框架3. 使用C与JavaScript的集成4. 数据库交互5. 部署和运维 二、CppCMS框架构建Web应用1. 安装 CppCMS&#xff1a;2. 创建项目目录和文件3. 编写源代码4. 编译和运行5. 访问 Web 应用 三、HTTP介绍1. 请求头部字段&a…
阅读更多...
Vue项目的创建

Vue项目的创建

安装Vue工具 Vue CLI Vue CLI Vue.js 开发的标准工具&#xff0c;Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 npm install -g vue/cli安装之后&#xff0c;你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue&#xff0c;看看是否展示出了一份所有可用命令的…
阅读更多...
qt QApplication详解

qt QApplication详解

一、概述 QApplication是Qt应用程序的基础类&#xff0c;负责设置和管理应用的环境。它的主要功能包括&#xff1a;初始化应用程序、管理事件循环、处理命令行参数、提供全局设置&#xff08;如样式和调色板&#xff09;以及创建和管理主窗口。通常在main函数中创建QApplicati…
阅读更多...
Netty简单应用

Netty简单应用

1.服务端构建 接收客户端请求&#xff0c;打印请求消息&#xff1b;消息采用内置String作为编码与解码器&#xff1b;开启信息输入监听线程&#xff0c;发送消息至客户端&#xff1b; 1.1 服务端消息处理类 import io.netty.channel.Channel; import io.netty.channel.Chann…
阅读更多...
React实现购物车功能

React实现购物车功能

今日学习React的useReducer&#xff0c;实现了一个购物车功能 文章目录 目录 效果展示 逻辑代码 CSS代码 效果展示 逻辑代码 import {useReducer} from "react"; import ./index.css; import { message} from antd;export function ShoppingCount(){// 初始化购…
阅读更多...
去哪儿旅行携手 HarmonyOS SDK | 告别繁琐，常用信息秒级填充

去哪儿旅行携手 HarmonyOS SDK | 告别繁琐，常用信息秒级填充

背景 去哪儿旅行作为行业内领先的一站式在线旅游平台&#xff0c;多年来在日益加剧的市场竞争中积极寻求创新&#xff0c;凭借其优质的服务深受消费者青睐。2024年&#xff0c;去哪儿旅行适配HarmonyOS NEXT版本&#xff0c; 升级用户服务体验。 当前&#xff0c;去哪儿旅行应…
阅读更多...
HTML+JavaScript 贪吃蛇游戏实现与详解

HTML+JavaScript 贪吃蛇游戏实现与详解

在网页开发的领域中&#xff0c;利用 HTML 和 JavaScript 能够创造出各种引人入胜的互动游戏。其中&#xff0c;贪吃蛇作为一款经典之作&#xff0c;以其简单易玩的特性和紧张刺激的挑战&#xff0c;一直深受玩家的喜爱。本文将详细阐述如何运用 HTML 和 JavaScript 来打造一个…
阅读更多...
OPPO携手比亚迪共同探索手机与汽车互融新时代

OPPO携手比亚迪共同探索手机与汽车互融新时代

10月23日&#xff0c;OPPO与比亚迪宣布签订战略合作协议&#xff0c;双方将共同推进手机与汽车的互融合作&#xff0c;这一合作也标志着两大行业巨头在技术创新和产业融合上迈出了重要一步&#xff0c;为手机与汽车的深度融合探索新的可能。 OPPO创始人兼首席执行官陈明永、OP…
阅读更多...
最新文章

Copyright @ 2022~2023