明金同学
明金同学

HTML网页设计基础笔记 • 【第3章 表单】

全部章节   >>>>

本章目录

3.1 表单

3.1.1 表单概述

3.1.1 表单概述（续）

3.1.2 表单标签

3.1.3 表单数据的提交方式

3.2 输入框和按钮

3.2.1 表单元素概述

3.2.2 输入框

3.2.3 按钮

3.3 单选按钮、复选框和下拉框

3.3.1 单选按钮

3.3.2 复选框

3.3.3 下拉框

3.4 表单验证

3.4.1 必填验证

3.4.2 类型匹配验证

3.4.3 控制字符数量

3.4.4 验证输入范围

3.4.5 自定义错误消息

总结：

3.1 表单

3.1.1 表单概述

在遨游网络世界时，我们除了浏览网页信息，有时还需要将一些数据输入到网页中，经过网页提交至服务器。例如，我们登录邮箱时，需要输入用户名和密码。注册网站的用户时需要输入用户的信息，用户输入到网页中的信息均通过表单中的各表单元素来接收，然后传递给服务器。

HTML网页设计基础笔记 • 【第3章 表单】_第1张图片

表单在网页开发中很常见，典型的应用场景有以下几种：

网站的登录、注册。

HTML网页设计基础笔记 • 【第3章 表单】_第2张图片

填写订单信息。

HTML网页设计基础笔记 • 【第3章 表单】_第3张图片

填写调查问卷。

HTML网页设计基础笔记 • 【第3章 表单】_第4张图片

输入关键字搜索。

HTML网页设计基础笔记 • 【第3章 表单】_第5张图片

以注册页面为例，注册表单中包含了以下表单元素：

  • 文本框：常用于输入姓名、用户名和电子邮件等。
  • 密码框：用于输入密码，显示为代替字符，如星号“*”。
  • 单选按钮：在多个选项中选择 1 个，如性别。
  • 复选框：在多个选项中可以选择 1 个或多个，如爱好。
  • 下拉列表：在多个下拉选项中选择 1 个，如省份、月份等。
  • 按钮：通常用于执行表单信息的提交或取消等功能。

HTML网页设计基础笔记 • 【第3章 表单】_第6张图片

3.1.1 表单概述（续）

表单是 HTML5 的一个重要部分，主要用于采集和提交用户输入的信息。例如，登录时输入的用户名和密码就是通过表单实现数据提交，如果没有表单，输入的登录信息将无法被网站获取。

HTML网页设计基础笔记 • 【第3章 表单】_第7张图片

3.1.2 表单标签

在 HTML 中，

和
标签对用来创建一个表单，即定义表单的开始和结束位置，在标签对之间的一切都属于表单的内容。在表单的 form 标签中，还可以设置表单的基本属性，包含表单的名称、处理程序和传送方法等。

语法：


	表单元素

name 属性用于设置表单的名称。

action 属性用于设置处理表单提交数据的 url。

method 属性用于定义浏览器将表单中的信息提交给服务器端的方式，其值可以取 get 和 post 两种，默认为get。

示例：



	
		
		 无标题文档 
	
	
		
 处理登录 ........

	



	
 用户登录 

	

	

		用户名 :
 密      码 :
		

		  

3.1.3 表单数据的提交方式

表单的 method 属性用来定义处理程序从表单中获得信息的方式，它决定了表单中已收集的数据是用什么方法发送到服务器的。传送方式的值有两种选择，即 get 和 post。

HTML网页设计基础笔记 • 【第3章 表单】_第8张图片

get 方式提交：使用 get 方式提交数据时，表单数据会附加在 URL 之后，由用户端直接发送至服务器，所以速度比 post 快，但缺点是数据长度不能太长。

HTML网页设计基础笔记 • 【第3章 表单】_第9张图片

post 方式提交

使用 post 时，表单数据是与 URL 分开发送的，客户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比 get 慢。

HTML网页设计基础笔记 • 【第3章 表单】_第10张图片

两种提交方式在使用上的主要区别：

安全性。

  • 使用 get 方式提交时，提交的信息会出现在浏览器的地址栏中，post 方式提交时不会出现在地址栏中。在对安全性有要求的情况下，不建议使用 get 方式，而应该使用 post 方式。

提交数据的长度。

  • 使用 get 方式提交的数据有长度限制，使用 post 方式提交的数据没有长度限制，所以当使用表单提交的数据比较大时，如文件上传，建议使用 post 方式。

HTML网页设计基础笔记 • 【第3章 表单】_第11张图片

3.2 输入框和按钮

3.2.1 表单元素概述

表单中大部分表单元素均使用 input 标签，只是它们的属性设置不同，其统一用法如下：

语法：

input标签属性

属性

说明

type    

指 定 表 单 元 素 的 类 型， 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text

name     

指定表单元素的名称

value      

指定表单元素的初始值

size        

指定表单元素的初始宽度。如果 type 为 text 或 password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位

maxlength

指定可在 text 或 password 元素中输入的最大字符串，默认无限制

checked

此属性只有一个值，为 checked，表示选中状态，如果不选中，则无须添加此属性

readonly

当文本框标签的 readonly 属性指定为 readonly 时，文本框中的值不允许更改

HTML5 表单常用控件的标签

表单控件标签写法

说明

单行文本输入框。使用的是 input 标签和 type 属性

将表单中的信息提交给表单中 action 属性所指向的地址

 

复选框

单选钮

密码输入框（输入的文字用 * 表示）

下拉框

<textArea>

多行文本输入框

3.2.2 输入框

文本框：表单中最常用的输入元素就是文本框（text），它提供给用户输入的单行文本信息，如用户名的输入。文本框的用法很简单，只需将 input 标签的 type 属性设置为 text 即可。

语法：

示例：


       

	姓 名 :
	
	

	邮箱 :

HTML网页设计基础笔记 • 【第3章 表单】_第12张图片

密码框：密码框主要用于一些保密信息的输入，如密码。因为用户输入时，显示的不是输入的内容，而是“*”。

语法：

示例：


	

		姓名 :

		密码 :

HTML网页设计基础笔记 • 【第3章 表单】_第13张图片

多行文本域：多行文本域用于显示或输入两行或两行以上的文本，它使用的标签是 textarea。

语法：

其中，cols 用于指定多行文本域的列数，rows 用于指定多行文本域的行数。在

HTML网页设计基础笔记 • 【第3章 表单】_第14张图片

3.2.3 按钮

重置、提交与普通按钮

根据按钮的功能，分为提交按钮、重置按钮和普通按钮。

  • 提交按钮用于提交表单数据，
  • 重置按钮用于清空现有表单数据，
  • 普通按钮通常用于调用 JavaScript 脚本。

在用法上，为不同的按钮设置不同的 type 属性值即可；如果要禁用按钮，则使用 disabled 属性设置其取值为 disabled 即可。

语法：

示例：


	

		姓名 :

HTML网页设计基础笔记 • 【第3章 表单】_第15张图片

图片按钮：有时候为了达到比较好的视觉效果，可以使用图片代替按钮来提交或者重置表单数据。

语法：

input标签的type="image"类似于type="submit"，不同的是，type="image"以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。

示例：


       

	输入商品编号：
	HTML网页设计基础笔记 • 【第3章 表单】_第16张图片
 
  
3.3 单选按钮、复选框和下拉框
 
  
3.3.1 单选按钮
 
  
用于一组相互排斥的选项，组中的每个选项应具有相同的名称（name），以确保用户只能选择一个选项，单选按钮对应的 type 属性为 radio。
 
  
语法：
 
  


 
  
 
   
用 checked 属性表示缺省已选的选项： 桔子。桔子选项将默认为选中状态。
 
  
 
  
示例：
 
  

	请选择你喜欢的水果：

	
		
	


 
  
HTML网页设计基础笔记 • 【第3章 表单】_第17张图片
 
  
3.3.2 复选框
 
  
复选框用于选择多个选项，将 input 的 type 属性设置为 checkbox 就可以创建一个复选框。
 
  
语法：
 
  


 
  
 
   
用 checked 属性表示缺省已选的选项，写法是：
 
   
桔子。
 
   
桔子选项将默认为选中状态。
 
  
 
  
示例：
 
  

      请选择你喜欢的水果：

     

	 桔子 

	 芒果 

	
      



 
  
HTML网页设计基础笔记 • 【第3章 表单】_第18张图片
 
  
3.3.3 下拉框
 
  
下拉框主要可以使用户快速、方便、正确地选择一些选项，而且还能节省页面空间。它是通过 select 和 option标签来实现的,其中，在有多种选项可供用户滚动查看时，size 属性确定列表中可同时看到的行数；selected 属性表示该选项在默认情况下是被选中的。
 
  
语法：
 
  


 
  
 
   
如果将下拉框变成多选，则添加 muiltiple 属性即可。
 
  
 
  
示例：
 
  

	

	生日 :
	 年
	
	 日 
 省份 :
	
	



 
  
HTML网页设计基础笔记 • 【第3章 表单】_第19张图片
 
  
3.4 表单验证
 
  
表单在提交之前应该执行输入验证，以检查用户输入内容是否符合要求。如验证用户是否输入、比较两次输入的内容是否相同、输入内容的长度是否过长等。表单只能在输入符合要求的情况下才能提交。
 
  
HTML网页设计基础笔记 • 【第3章 表单】_第20张图片
 
  
 
   
在 HTML5 中，通过对标签使用验证属性，可以实现在表单提交时执行自动验证的功能，并提示用户输入了错误的信息。
 
  
 
  
3.4.1 必填验证
 
  
required 属性可应用于大多数 input 标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户该元素中必须输入内容。
 
  
语法：
 
  


 
  
示例：
 
  

	

		输入查询内容：
		
	



 
  
HTML网页设计基础笔记 • 【第3章 表单】_第21张图片
 
  
3.4.2 类型匹配验证
 
  
在 HTML5 中，增加了 input 标签的 type 属性值，可以使用这些 type 属性值实现基本的类型匹配功能。
 
  
 
    
    
 
      
type 属性
 		 
      
说明
 		 
    
 
    
 
      
e-mail   
 		 
      
在提交表单时，会自动验证值是否符合 e-mail 格式要求
 		 
    
 
    
 
      
url   
 		 
      
在提交表单时，会自动验证值是否符合 url 格式要求
 		 
    
 
    
 
      
number       
 		 
      
在提交表单时，会自动验证值是否为数字，并可以配合 min、max 以及 step 属性进行数值的限定
 		 
    
 
    
 
      
range         
 		 
      
在提交表单时，会自动验证值是否在指定的范围内的数字，使用配合 min、max 以及 step 属性进行数值的限定，显示为滑动条
 		 
    
 
    
 
      
date
 		 
      
用于选取年、月、日
 		 
    
 
    
  
 
  
示例：
 
  

	

		Email：

 Date:
		


		
	



 
  
HTML网页设计基础笔记 • 【第3章 表单】_第22张图片
 
  
HTML网页设计基础笔记 • 【第3章 表单】_第23张图片
 
  
3.4.3 控制字符数量
 
  
在控制字符数量方面，我们可以使用 maxlength 属性设置输入字符的最大数量，以防止用户输入大量无效内容。
 
  
示例：
 
  

	

		用户：
	



 
  
HTML网页设计基础笔记 • 【第3章 表单】_第24张图片
 
  
3.4.4 验证输入范围
 
  
min、max 属性是数值类型或日期类型的 input 标签的专用属性，它们限制了在 input 标签中输入的数值与日期的范围。
 
  
示例：
 
  

      Number：
     

     



 
  
 
   
step属性控制input标签中的值增加或减少时的步长。本例中，输入的值不仅在0与100之间，还必须是10的倍数，因为step为10。
 
  
 
  
HTML网页设计基础笔记 • 【第3章 表单】_第25张图片
 
  
3.4.5 自定义错误消息
 
  
HTML5 表单验证给前端开发带来许多便利，但是默认的提示不友好。我们可以通过 setCustomValidity 方法来自定义提示信息，更准确的提示给用户。
 
  
当用户输入信息时，使用 setCustomValidity(“”) 将错误提示设置为空字符串，当用户输入不合法时，使用setCustomValidity(“自定义提示信息”) 来替换提示信息即可。
 
  
示例：
 
  

	

		年龄：
		
		
	



 
  
HTML网页设计基础笔记 • 【第3章 表单】_第26张图片
 
  
总结：
 
  
     
   
  • 表单是 HTML5 的一个重要部分，主要用于采集和提交用户输入的信息。
    •  
   
  • 表单数据提交的有两种方式：get 方式和 post 方式。
    •  
   
  • 表单中大部分表单元素均使用 input 标签，只是它们的属性设置不同，其用法统一
    •  
   
  • 文本输入控件包括文本框、密码框以及多行文本域。
    •  
   
  • 选择型控件包括复选框、单选钮、下拉框和数据列表。
    •  
   
  • 按钮型控件包括提交按钮、图片按钮。
    •  
   
  • 在 HTML5 中，通过对标签使用验证属性，可以实现在表单提交时执行自动验证的功能，并提示用户输入了错误的信息。
    •

你可能感兴趣的:(#,HTML网页设计基础学习笔记)

  • 使用 Hadoop 实现大数据的高效存储与查询 王子良. 经验分享大数据hadoop分布式
    欢迎来到我的博客！非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长。博客内容包括：Java核心技术与微服务：涵盖Java基础、JVM、并发编程、Redis、Kafka、Spring等，帮助您全面掌握企业级开发技术。大数据技术：涵盖Hadoop（HDFS）、Hive、Spark、Fli
  • Python使用QQ邮箱发送邮件提示 高质量海王哦 pythonpython
    python发送qq邮件htmlimportbase64importsmtplibimporttimefromemail.mime.textimportMIMETextdefsend_QQ_mail_HTML():user='[email protected]'#发送方的邮箱账号passwd='xruuwiyxdcouddjg'#授权码receiver='[email protected]
  • 正则表达式基础学习 RrEeSsEeTt 正则表达式正则表达式正则
    目录1.基础1.1正则表达式的模式1.2正则表达式元字符和特性2.语法2.1普通字符2.2非打印字符2.3特殊字符2.4限定符2.5定位符2.6选择2.7反向引用3.修饰符（标记）4.元字符5.运算符优先级6.匹配规则6.1基本模式匹配6.2字符簇6.3确定重复的出现1.基础正则表达式(RegularExpression)是一种文本模式，包括普通字符（例如，a到z之间的字母）和特殊字符（称为"元字
  • 正则表达式基础知识 不习惯有你 正则表达式
    1.正则表达式，又称规则表达式。英语：RegularExpression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式_百度百科(baidu.com)在我理解的就是正确的规则，按照你设置的规则正确排列。2.正则表达式的特点：a.灵活性、逻辑性和功能性非常强；b.可以迅速地用极简单的方式达到字符串的复
  • Docker安装PostgreSQL tag心动 Docker容器dockerpostgresql容器docker-compose
    文章目录一、PostgreSQL是什么？二、搭建步骤1、编写docker-compose.yml脚本2、启动验证一、PostgreSQL是什么？PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统（ORDBMS），其基础源于加州大学计算机系开发的POSTGRES4.2版本。PostgreSQL不仅支持大部分的SQL标准，还提供了许多现代特性，如复杂查询、外键、触发器、视图、
  • QT Web UI设计与实现 QT性能优化QT原理源码QT界面美化 qtqt6.3qt5QT教程c++
    QTWebUI设计与实现补天云火鸟博客创作软件补天云网站1Qt_Web_UI概述1.1Qt_Web框架基础1.1.1Qt_Web框架基础Qt_Web框架基础Qt_Web框架基础引言,跨平台UI开发的利器在当前软件开发领域中，跨平台应用的需求日益增长，这不仅限于操作系统之间的兼容性，更多的是对多终端设备（如桌面、移动设备、Web）的统一用户体验追求。QtFramework作为一款功能全面、易于上手且
  • WebSocket 安全实践：从认证到加密
    在前三篇文章中,我们深入探讨了WebSocket的基础原理、服务端开发和客户端实现。今天,让我们把重点放在安全性上,看看如何构建一个安全可靠的WebSocket应用。我曾在一个金融项目中,通过实施多层安全机制,成功防御了多次恶意攻击尝试。安全挑战WebSocket应用面临的主要安全挑战包括：身份认证数据加密跨站点WebSocket劫持(CSWSH)拒绝服务攻击(DoS)中间人攻击让我们逐一解决这些
  • WebSocket 基础入门：协议原理与实现
    在现代网页应用中,WebSocket就像是一条永不断开的高速公路,让客户端和服务器之间的实时通信变得畅通无阻。记得在一个实时协作项目中,我们通过使用WebSocket,让用户的操作延迟从300ms降到了50ms。今天,我想和大家分享WebSocket的基础知识和实现方案。WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工通信的协议。它提供了在客户端和服务器之间建立持久连
  • WebSocket 客户端开发：浏览器实战
    在前两篇文章中,我们深入探讨了WebSocket的基础原理和服务端开发。今天,让我们把目光转向客户端,看看如何在浏览器中构建强大的WebSocket客户端。我曾在一个实时协作项目中,通过优化WebSocket客户端的重连机制和消息队列,使得用户即使在网络不稳定的情况下也能保持良好的体验。基础架构设计一个可靠的WebSocket客户端需要考虑以下几个关键点：连接管理消息处理重连机制心跳检测错误处理让
  • 2、Flink 在 DataStream 和 Table 之间进行转换 猫猫爱吃小鱼粮 FlinkSQLflink大数据
    1.概述TableAPI和DataStreamAPI都可以处理有界流和无界流。DataStreamAPI提供了流处理的基础（时间、状态和数据流管理）；TableAPI抽象了许多内部内容，并提供了一个结构化和声明性的API；在处理历史数据时，需要管理有边界的流；无边界流出现在实时处理场景中，这些场景可能需要先使用历史数据进行初始化。为了高效执行，这两个API都以优化的批处理执行模式处理有界流。由于批
  • C#语言的数据结构 技术的探险家 包罗万象golang开发语言后端
    C#语言的数据结构探讨数据结构是计算机科学中一种用于组织、存储和管理数据的方式。有效地使用数据结构能使算法更加高效，并提高程序的性能。在C#语言中，我们可以构建和使用多种数据结构，以满足不同的需求。本文将介绍C#中的常用数据结构，包括数组、链表、栈、队列、哈希表、树和图等，并探讨它们的特点、实现和应用场景。1.数组数组是一种最基础且常用的数据结构。它是一个固定大小的线性结构，可以通过索引访问其中的
  • Go语言的学习路线 技术的探险家 包罗万象golang开发语言后端
    Go语言的学习路线随着科技的迅速发展，编程语言也在不断进化，Go（又称Golang）作为一种现代化的编程语言，其简单性、高效性和强大的并发支持吸引了越来越多的开发者。本文将为您提供一条系统的Go语言学习路线，帮助您从零基础逐步掌握这门语言。一、Go语言简介Go语言是Google于2007年开发的一种开源编程语言，旨在提高编程的效率，与传统的编程语言相比，Go具有以下几个显著的优点：简洁性：Go设计
  • Windows基础命令_组策略开启80瑞口 2401_84300239 程序员windows
    -a:查询-d:删除————arp–d169.254.155.18-s:添加主机————arp–a127.127.127.12701-01-01-01-01shutdown-s（立刻关机）shutdown-t180（180秒后关机）shutdown-s-t180（180秒后关机，shutdown-a取消上一个操作）startwww.baidu.com（访问百度网站（start——打开））copy文
  • C++.类和对象（基础） 煦842 cc++
    1.类的定义1.1.类的定义格式：class类名(注：类中的变量叫做成员变量，类中的函数叫做成员函数){public:成员函数private:成员变量（一般情况下成员变量都是设为私有）};（注意这里的引号不可以省略）classdate{  public:voidInit(){a=1;b=2;} private:  inta_1;(为了区分成员变量，一般会在成员变量上加一个特殊标识，如这里的变量后面
  • 一文梳理基础概念：ARM指令集、ARM架构、ARM内核、Cortex、SOC、芯片、单片机之间的关系【科普】 CHD-grl 嵌入式知识科普arm开发单片机linux
    0前言：ARM公司简介1、ARM既可以认为是一个公司的名字，也可以认为是对一类微处理器的通称，还可以认为是一种技术的名字。2、ARM公司是专门从事基于RISC（精简指令集）技术芯片设计开发的公司，作为知识产权供应商，本身不直接从事芯片生产，而是转让设计许可，由合作公司生产各具特色的芯片。3、ARM处理器的内核是统一的，由ARM公司提供，而片内部件则是多样的，由各大半导体公司设计，这使得ARM设计嵌
  • 吴恩达系列——微调（Fine-tuning）与生成模型的应用 疯狂小料 aiprompt
    微调（Fine-tuning）是指在已有预训练模型的基础上，对模型进行进一步训练，以适应特定任务或需求。在自然语言处理领域，生成模型通过微调可以在特定场景下生成更加准确、一致的输出，同时保护用户的隐私，减少不当信息的泄露。本文将结合生成模型的工作原理和实际应用，解释微调如何提升生成模型的效果，并探讨其在保护隐私方面的优势。1.生成模型与Prompt的作用生成模型，如GPT系列，通常通过接受一个输入
  • R语言的并发编程 技术的探险家 包罗万象golang开发语言后端
    R语言的并发编程引言在现代计算中，如何有效地利用计算资源进行数据处理和分析已成为一个重要的研究方向。尤其在大数据时代，数据量的急剧增加让单线程处理方式显得力不从心。为了解决这一问题，各种编程语言都开展了并发编程的研究和应用。R语言作为一种广泛应用于统计分析和数据科学的语言，也为并发编程提供了强大的支持。本文将介绍R语言的并发编程，包括其基本概念、常用包、应用示例以及实用技巧。一、并发编程基础并发编
  • 麒麟操作系统基础知识保姆级教程（十五）权限管理 小屁不止是运维 基础知识linux服务器网络运维学习bash
    如果你想拥有你从未拥有过的东西，那么你必须去做你从未做过的事情之前咱们了解过了麒麟操作系统的sudo提权，那么都有哪些关于咱们权限有哪些相关的知识呢？欢迎交流：在学习过程中如果你有任何疑问或想法，欢迎在评论区留言，我们可以共同探讨学习的内容。你的支持是我持续创作的动力！点赞、收藏与推荐：如果你觉得这篇文章对你有所帮助，请不要忘记点赞、收藏，并分享给更多的小伙伴！你们的鼓励是我不断进步的源泉！推广给
  • 麒麟操作系统基础知识保姆级教程（八）压缩解压缩和文件权限 小屁不止是运维 基础知识服务器网络linux运维学习ubuntu
    如果你想拥有你从未拥有过的东西，那么你必须去做你从未做过的事情一、打包压缩和解压缩麒麟操作系统常用的打包和压缩的命令有两种：tar和zip1、tar打包压缩打包：tar最初主要用于将多个文件和目录打包成一个文件，方便文件的存储和传输。它不会对文件内容进行压缩，只是简单地将它们整合在一起。压缩：tar可以与其他压缩工具（如gzip、bzip2等）结合使用，实现打包和压缩的功能。这样可以有效地减小文件
  • 麒麟操作系统基础知识保姆级教程（五）系统优化 小屁不止是运维 基础知识架构linux运维服务器
    如果你想拥有你从未拥有过的东西，那么你必须去做你从未做过的事情1、查看系统版本两种方法1、使用命令查看[root@localhost~]#hostnamectl Statichostname:localhost.localdomain    Iconname:computer-vm     Chassis:vm   MachineID:372f0bb3bfcd4bd09688fd725b9a085
  • java3d酷眩贪吃蛇下载,100行JS实现HTML5的3D贪吃蛇游戏 weixin_39983554 java3d酷眩贪吃蛇下载
    js1k.com收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。自己写不出来，站在巨人肩膀总是有机会吧，折腾了一番站在Hightopo的肩膀上搞了个3D贪吃蛇游戏，算了算JS代码还只有90来行
  • html5贪吃蛇特点,简易html5贪吃蛇 雪小梨 html5贪吃蛇特点
    1.[图片]E6~0%QPA46ER843UQJ$0Z`H.jpg2.[文件]snake.htmlThesnakegamefunctionlog(msg){console.log(msg);}Yourbrowsercannotsupporthtml5.this.onkeydown=function(e){varcode=e.keyCode;if(code==37)changeMove(3);if(
  • 后端方向初阶入门——MySQL 小羊一定要努力变强 mysql数据库
    各位帅哥美女，编辑不易，动动发财小手，来个三连加关注，后续会有更加优秀的推文推出~Mysql：用的最多的数据库，项目都用此数据库(Oracle：大型数据库，用的不多，因为收费，大公司难免会遇到。目录1.MySQL简介2.MySQL安装与配置2.1下载与安装2.2配置与启动3.数据库基础操作3.1创建数据库3.2选择数据库3.3创建表3.4插入数据3.5查询数据3.6更新数据3.7删除数据3.8.添
  • Python数据分析高频面试题及答案 闲人编程 程序员面试python数据分析面试题核心
    目录1.基础知识2.数据处理3.数据可视化4.机器学习模型5.进阶问题6.数据清洗与预处理7.数据转换与操作8.时间序列分析9.高级数据分析技术10.数据降维与特征选择11.模型评估与优化12.数据操作与转换13.数据筛选与分析14.数据可视化与报告15.数据统计与分析16.高级数据处理以下是一些Python数据分析的高频核心面试题及其答案，涵盖了基础知识、数据1.基础知识问1：Python中列表
  • Open3D 手动裁剪点云【2025最新版】 点云侠 python点云处理几何学python3d计算机视觉算法
    目录一、概述1、主要函数2、基础操作二、代码实现三、结果展示四、相关链接博客长期更新，本文最近更新时间为：2025年1月18日。一、概述  Open3d中的VisualizerWithEditing类提供了图形用户交互功能。draw_geometries_with_editing([pcd])函数提供了顶点选择和裁剪功能。1、主要函数defdraw_geometries_with_editing(
  • Java 基础之泛型：类型安全的保障与灵活运用 幽兰的天空 Java基础启航：从零到小有所成开发语言java
    在Java编程的世界里，泛型是一个至关重要且非常实用的特性。它在Java5中被引入，从根本上改变了我们处理数据类型的方式，提供了更强的类型安全保障，同时也增加了代码的复用性和可读性。一、什么是泛型泛型（Generics）简单来说，就是允许在定义类、接口和方法时使用类型参数。这些类型参数在使用时会被具体的类型所替代。例如，我们常见的集合类ArrayList就是一个泛型类，它的定义形式是ArrayLi
  • Thanos架构学习 qq_道可道 监控K8S与容器架构
    Thanos架构学习简介Thanos有两种架构模式sidecar部署receiver部署组件概念及说明简介官网参考Thanos基于prometheus，在此基础上提供了全局指标查询，可将多个云/region的prometheus数据集中管理，并且将数据直接存储到廉价的对象存储，可以存放更久的数据（并对历史数据进行压缩与降采样），降低本地prometheus存储费用，同时可与现有的prometheu
  • UDP 单播、多播、广播：原理、实践 jiuri_1215 linuxudp网络协议网络UDP
    一、引言在计算机网络通信领域，UDP（UserDatagramProtocol，用户数据报协议）是一种重要的传输层协议。它以无连接、低开销的特点，在众多实时性要求高的应用场景中发挥关键作用。UDP支持单播、多播和广播三种通信模式，每种模式都有其独特的应用场景和工作原理。深入理解这些通信模式，对于开发高效的网络应用程序至关重要。二、UDP基础概述UDP是一种无连接的传输层协议，它在网络层IP协议的基
  • ORACLE与SQL SERVER的区别 nanzhuhe 文章笔记数据库Oracle
    ORACLE与SQLSERVER的区别转载自：https://www.cnblogs.com/chuncn/archive/2009/01/28/1381262.html体系结构ORACLE的文件体系结构为：数据文件.DBF（真实数据）日志文件.RDO控制文件.CTL参数文件.ORASQLSERVER的文件体系结构为：.MDF（数据字典）.NDF（数据文件）.LDF（日志文件）ORACLE存储结构
  • keepalived+haproxy实现高可用集群 mark.meng 中间件运维
    实验环境172.16.32.21172.16.32.22Vip:172.16.32.301.部署httpd测试服务yuminstallhttpdecho"172.16.32.22">>/var/www/html/id.htmlsystemctlstarthttpdcurl172.16.32.22/id.html172.16.32.222.部署haproxy实现负载均衡yuminstallhapro
  • jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque qiaolevip 每天进步一点点学习永无止境跨域众观千象
    XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1
  • mysql 分区查询优化 annan211 java分区优化mysql
    分区查询优化 引入分区可以给查询带来一定的优势，但同时也会引入一些bug. 分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。 所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。 可以通过查看explain执行计划，是否携带 partitions
  • MYSQL存储过程中使用游标 chicony Mysql存储过程
    DELIMITER $$ DROP PROCEDURE IF EXISTS getUserInfo $$ CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08--    BEGINdecla
  • mysql 和 sqlite 区别 Array_06 sqlite
    转载： http://www.cnblogs.com/ygm900/p/3460663.html mysql 和 sqlite 区别 SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq
  • pinyin4j使用 oloz pinyin4j
    首先需要pinyin4j的jar包支持；jar包已上传至附件内 方法一:把汉字转换为拼音；例如：编程转换后则为biancheng      /** * 将汉字转换为全拼 * @param src 你的需要转换的汉字 * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal
  • 微博发送私信 随意而生 微博
    在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 http://weibo.com/message/history?uid=****&name=**** 可以发现其发送提交的Post请求和其中的数据， 让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。
  • jsp 香水浓 jsp
    JSP初始化     容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 JSP执行     这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。     当JSP网页完成初始化后
  • 在 Windows 上安装 SVN Subversion 服务端 AdyZhang SVN
    在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号   最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx   现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使
  • android开发中如何使用 alertDialog从listView中删除数据？ aijuans android
    我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter ，ArrayList，listView 全部删除），我知道在 下面的onItemLongClick 方法中 参数 arg2  是选中的序号，但是我不知道如何继续处理下去 1 2 3
  • jdk-6u26-linux-x64.bin 安装 baalwolf linux
    1.上传安装文件(jdk-6u26-linux-x64.bin) 2.修改权限 [root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 3.执行安装文件 [root@localhost ~]# cd /usr/local [root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs
  • MongoDB经典面试题集锦 BigBird2012 mongodb
    1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ NoSQL是非关系型数据库，NoSQL = Not Only SQL。 关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。 在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。 在考虑数据库的成熟
  • JavaScript异步编程Promise模式的6个特性 bijian1013 JavaScriptPromise
            Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。         在我们开始正式介绍之前，我们想看看Javascript Promise的样子： var p = new Promise(function(r
  • [Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager bit1129 zookeeper
    ClientWatchManager接口 //接口的唯一方法materialize用于确定那些Watcher需要被通知 //确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path public interface ClientWatchManager { /** * Return a set of watchers that should
  • 【Scala十五】Scala核心九：隐式转换之二 bit1129 scala
    隐式转换存在的必要性，   在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下：   val button = new JButton button.addActionListener( new ActionListener { def actionPerformed(event: ActionEvent) {
  • Android JSON数据的解析与封装小Demo ronin47
    转自：http://www.open-open.com/lib/view/open1420529336406.html package com.example.jsondemo; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject;    impor
  • [设计]字体创意设计方法谈 brotherlamp UIui自学ui视频ui教程ui资料
      从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。 如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔
  • 单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值 bylijinnan java算法面试题
    import java.util.LinkedList; /* 单调队列 滑动窗口 单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减 题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k. 要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1 问题的另一种描述就
  • struts2处理一个form多个submit chiangfai struts2
    web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： <s:form action="submit" method="post" namespace="/my"> <s:textfield name="msg" label="叙述：">
  • shell查找上个月，陷阱及野路子 chenchao051 shell
    date -d "-1 month" +%F     以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。     野路子解决：假设当天日期大于15号
  • mysql导出数据中文乱码问题 daizj mysql中文乱码导数据
    解决mysql导入导出数据乱码问题方法： １、进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+----------------------------------------+ | Variable_name&nbs
  • SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write dcj3sjt126com PHPsmartysae
      对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。 官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&catId=11#show_213 解决方案为：   01 $path 
  • 《教父》系列台词 dcj3sjt126com
    Your love is also your weak point. 你的所爱同时也是你的弱点。   If anything in this life is certain, if history has taught us anything, it is that you can kill anyone.   不顾家的人永远不可能成为一个真正的男人。 &
  • mongodb安装与使用 dyy_gusi mongo
    一.MongoDB安装和启动,widndows和linux基本相同 1.下载数据库,     linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 2.解压文件,并且放置到合适的位置     tar -vxf mongodb-linux-x86_64-ubun
  • Git排除目录 geeksun git
    在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。   有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 1.  针对单一工程排除文件 这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一
  • Ubuntu 创建开机自启动脚本的方法 hongtoushizi ubuntu
    转载自： http://rongjih.blog.163.com/blog/static/33574461201111504843245/ Ubuntu 创建开机自启动脚本的步骤如下： 1) 将你的启动脚本复制到 /etc/init.d目录下 以下假设你的脚本文件名为 test。   2) 设置脚本文件的权限 $ sudo chmod 755
  • 第八章 流量复制/AB测试/协程 jinnianshilongnian nginxluacoroutine
    流量复制 在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发
  • 电商系统商品表设计 lkl
    DROP TABLE IF EXISTS `category`; -- 类目表 /*!40101 SET @saved_cs_client = @@character_set_client */; /*!40101 SET character_set_client = utf8 */; CREATE TABLE `category` ( `id` int(11) NOT NUL
  • 修改phpMyAdmin导入SQL文件的大小限制 pda158 sqlmysql
    　用phpMyAdmin导入mysql数据库时，我的10M的 数据库不能导入，提示mysql数据库最大只能导入2M。 　　 phpMyAdmin数据库导入出错： 　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.
  • Tomcat性能调优方案 Sobfist apachejvmtomcat应用服务器
    一、操作系统调优 对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。 【适用场景】 任何项目。 二、Java虚拟机调优 应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 J
  • SQLServer学习笔记 vipbooks 数据结构xml
    1、create database school 创建数据库school 2、drop database school 删除数据库school 3、use school 连接到school数据库，使其成为当前数据库 4、create table class(classID int primary key identity not null) 创建一个名为class的表，其有一
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他