技术标签: 达达前端指路
哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。
把你的前端拿捏得死死的,每天学习得爽爽的,如果你所学的东西 处于喜欢 才会有强大的动力支撑。
感谢不负每一份热爱前端的程序员,不论前端技能有多奇葩,欢迎关注加我入群vx:xiaoda0423
希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)
HTML5
表单增加的输入类型url
类型:专门为输入url
地址定义的文本库,在验证输入文本的格式时,如果文本框中的的内容不符合url
地址的格式,会提示验证错误。email
类型:专门是为输入email
地址定义的文本框,在验证输入的文本的格式时,如果文本框中的内容不符合email
地址的格式,会提示验证错误。在email
类型的input
元素还有一个multiple
属性,表示在该文本框中可输入用逗号隔开的多个邮件地址。range
类型:用于把输入框显示为滑动条,可以作为某一特定范围内的数值选择器。min
和max
特性,分别表示范围的最小值,默认为0,范围的最大值,默认为100.range
类型有一个step
特性,表示拖动的步长,默认为1。number
类型:专门为输入特定的数字而定义的文本框,具有min,max,step
特性。tel
类型:专门为输入电话号码而定义的文本框,没有特殊的验证规则。search
类型:专门为输入搜索引擎关键词定义的文本框,没有特殊的验证规则。color
类型:color
类型的input
元素默认会提供一个颜色选择器。date
类型:专门用于输入日期的文本框,默认带日期选择器的输入框。month,week,time,datetime,datetime-local
类型的input
元素与date
类型的input
元素类似,提供一个相应的选择器。HTML5
增加表单的特性以及元素form
特性在HTML5
中,可以把从属于表单的元素放在任何地方,然后指定该元素的form
特性值为表单的id
,该元素就从属于表单。
<input name="da" type="text" form="form1" required/>
<form id="form1">
<input type="submit" value="提交"/>
</form>
formaction
特性:每个表单都会通过action
特性把表单内容提交到另外一个页面,而在html5
中,为不同的“提交”按钮分别添加formaction
特性后,该特性会覆盖表单的action
特性,将表单提交至不同的页面。<form id="form1" method="post">
<input name="name" type="text" form="form1"/>
<input type="submit" value="提交page1" formaction="?page=1"/>
</form>
formmethod,formenctype,formnovalidate,formtarget
特性:formmethod
特性会覆盖表单的method
特性;formenctype
特性可覆盖表单的enctype
;formnovalidate
特性可覆盖novalidate
特性,formtarget
特性可以覆盖表单的target
特性。
placeholder
特性,向用户提示描述性的信息。
autofocus
特性,用于所有类型的input
元素,当页面加载完成时,可自动获取焦点,每个页面只允许出现一个有autofocus
特性的input
元素,如果设置多个,相当于未指定该行为。
autocomplete
特性:应用于form
元素和输入型的input
元素,用于表单的自动完成。可以autocomplete="on"
,其可以指定"on","off"和" "
不指定。
list
特性和datalist
元素,可以为某个可输入的input
元素定义一个选值列表。
<input name="email" type="email" list="emaillist"/>
<datalist id="emaillist">
<option value="[email protected]"> dada </option>
<option value="[email protected]"> dada2 </option>
</datalist>
keygen
元素:提供了一种安全的方式来验证用户,该元素有密钥生成的功能,在提交表单时,会分别生成一个私人密钥和一个公共密钥,私人密钥保存在客户端,公共密钥则通过网络传输至服务器。<form action="">
<input type="text" name="name"/> <br>
<keygen name="security"/>
<br><input type="submit"/>
</form>
output
元素用于不同类型的输出,该元素必须从属于某个表单,即是写在表单的内部。<form oninput="x.value=da.value">
<input type="range" name="da" value="20"/>
<output name="x"></output>
</form>
HTML5
如何实现跨域response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST");
response.setHeader("Access-Control-Allow-Headers", "x-requested-width,content-type");
WebSql
WebSql
是一个在浏览器客户端的结构关系数据库,是浏览器内的本地RDBMS
关系型数据库管理系统,可以使用SQL
查询。
WebSql
是基于SQLite
的。
// 在代码login.php始终都不应该缓存或者离线访问
NETWORK:
login.php
网络命令描述不需要缓存的文件。
Canvas
和SVG
的区别是什么
SVG
是可缩放矢量图形,它是基于文本的图形语言,使用文本,线条,点等来绘制图像。
a. 一旦Canvas
绘制完成将不能访问像素或操作它,任何使用SVG
绘制的形状都能被记忆和操作,可以被浏览器再次显示。
b. Canvas
对绘制动画和游戏有利,SVG
对创建图像有利。
c. 因为不需要记住之后的事,所以Canvas
运行快,而SVG
需要记录坐标,所以运行慢。
d. 在Canvas
中不能为绘制对象绑定相关事件;在SVG
中可以为绘制对象绑定相关事件。
e. Canvas
绘制出的是位图,因此与分辨率有个,SVG
是矢量图,与分辨率无关。
使用SVG
绘制:
<svg xmlns="http://ww.xx.xx/pic/svg" version="1.1">
<rect stype="fill:rgb(255,100,0);" height="200" width="400"></rect>
</svg>
使用Canvas
绘制:
<canvas id="myCanvas" width="500" height="500"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.rect(100,100,300,200);
ctx.fillStyle="red"
ctx.fill()
本地存储的数据没有生命周期,它将一直存储数据,直到用户从浏览器清除或者使用
javascript
代码移除。
API
required
特性:表示此项的值不能为空,否则无法提交表单。pattern
特性用于input
元素定义一个验证模式。<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6为邮政编码"/>
min,max,step
特性novalidate
用于指定表单或表单内的元素在提交时不验证,form
元素应用novalidate
特性,表示表单中的所有元素在提交时不再验证。validaty
属性用于获取表单元素的ValidityState
对象,该对象包含8个方面的验证结果。ValidityState
对象会持续存在,每次获取validity
属性时,返回的是同一个ValidityState
对象。var validityState=document.getElementById("username").validity;
willValidate
属性,用于获取一个布尔值,表示表单元素是否需要验证,如果表单元素设置了required
特性或pattern
特性,则willValidate
属性为true
,即表单的验证将执行。var willValidate=document.getElementById("username").willValidate;
validationMessage
属性,用于获取表单元素的错误提示信息var validationMessage = document.getElementById("username").validationMessage;
ValidityState
对象,是通过validity
属性获取的,该对象有8个属性。
a. valueMissing
属性:必填的表单元素的值为空。如果表单元素设置了required
特性,则表示必填,如果必填项为空,就无法通过表单的验证,valueMissing
属性会返回true
,否则反之。
b. typeMismatch
属性:输入值与type
类型不匹配。html5
增加的表单类型email
等,都包含一个原始的类型验证,如果用户输入的内容与表单类型不符合,typeMismatch
属性将返回true
,否则反之。
c. patternMismatch
属性:输入值与pattern
特性的正则不匹配。表单元素可通过pattern
特性数组正则表达式的验证模式,如果输入内容不符,patternMismatch
将返回true
,否则反之。
d. tooLong
属性:输入的内容大小超过了表单的元素的maxLength
特性限定的字符长度。如果超过tooLong
属性返回true
,否则反之。
e. rangeOverflow
属性:输入的值大于max
特性的值。一般用于填写数值的表单元素,也可能会使用max
特性设置数值范围的最大值,如果输入的数值大于最大值,则rangeOverflow
返回true
,否则反之。
f. rangeUnderflow
属性,输入的值小于min
特性的值,上述雷同。
g. stepMismatch
属性,输入的值不符合step
特性所推算出的规则。不符为true
,否则反之。
h. customError
属性,使用自定义的验证错误提示信息,在有些情况下不适合使用浏览器内置的验证错误提示信息,需要自定义,当输入值不符合语义规则,页面会提示自定义的错误信息。
表单验证的方法
checkValidity()
方法,显式验证方法,每个表单元素都可以调用checkValidity()
方法,它返回一个布尔值,表示是否通过验证。默认情况下,表单的验证发生在表单提交时,如果使用checkValidity()
方法,可以在需要的任何地方验证表单。setCustomValidity()
方法,自定义错误提示信息的方法。当默认的提示错误满足不了需求时,可以通过该方法自定义错误提示。当通过此方法自定义错误提示信息时,元素的validationMessage
属性值会更改为定义的错误提示信息,同时ValidityState
对象的customError
属性值变成true
。cookie
,sessionStorage
,localStorage
cookie
数据存放在客户的浏览器上,session
数据存放在服务器上。cookie
不是很安全,别人可以分析存放在本地的cookie
并进行cookie
欺骗。session
会在一定时间内保存在服务器上,当访问增加时,会占用较多服务器的资源。为了减轻服务器的负担,应当使用cookie
在适当的情况下。cookie
保存的数据不能超过4kb,很多浏览器都限制一个站点最多保存20个cookie
session
中,其他可以存放在cookie
中。cookie
的数量和长度有限制,每个domain
最多只能有20条cookie
,每个cookie
的长度不能超过4kb,否则会被裁掉。cookie
被别人拦截了,就可以取得所有的session
信息,即使加密也是没有用,拦截者不需要知道cookie
的意义,只要原样转发cookie
就可以到达目的。cookie
中的session
对象的大小。ssl
,降低cookie
被破解的可能性。cookie
中存放不敏感数据,即使被盗也不会有重大的损失。cookie
的生命周期,使之不会永远有效,数据偷盗者很可能得到一个过期的cookie
。cookie
最大为4096字节,为了兼容性,一般不能超过4095字节。cookie
ie6
或更低版本最多有20个cookie
ie7
和之后的版本最多可以有50个cookie
firefox
最多可以有50个cookie
Chrome
和Safari
没有硬性限制sessionStorage
用于在本地存储一个会话中的数据,这些数据只有同一个会话中的页面才能访问,当会话结束后,数据也随之销毁,因此sessionStorage
不是一种持久化的本地存储,仅仅是会话级别的存储。localStorage
用于持久化本地存储,除非主动删除数据,否则数据一般是永久不会过期的。localStorage
是为了更大容量的存储设计的,cookie
的大小是有受限制的,并且每次请求一个新页面时,cookie
都会被发送过去,这无形中浪费了带宽,cookie
需要制定作用域,不可以跨域调用。HTML5
为浏览器提供了哪些数据存储方案在较高版本的浏览器中,提供了sessionStorage
和globalStorage
,在html5
规范中localStorage
取代了globalStorage
。
应用程序缓存:
HTML5
应用缓存的目的是帮助用户离线浏览页面,如果网络连接不可用,打开的页面就来自浏览器缓存,离线应用缓存可以帮助用户达到这个目的。
本地存储数据持续永久,但是会话存储在浏览器打开时有效,在浏览器关闭时会话重置存储数据。
提升网站的性能:
<!doctype html>
<html manifest="dadda.appcache">
</html>
在标签页之间,调用localstorage,cookies
等数据存储,可以实现标签页之间的通信。
Web Worker
和webSocket
的作用WebSocket
:它是web
应用程序的传输协议,提供了双向的,按序到达的数据流,它是html5
新增的协议,WebSocket
的连接是持久的,它在客户端和服务器之间保持双工连接,服务器的更新可以及时推送到客户端,而不需要客户端以一定的时间间隔去轮询。
Web Worker
:通过worker=new Worker(url)
加载一个javascript
文件,创建一个Worker
,同时返回一个Worker
实例;用worker.postMessage(data)
向Worker
发送数据;绑定worker.onmessage
接收Worker
发送过来的数据;可以使用worker.terminate()
终止一个Worker
的执行。
HTML5
新特性拖放api
,语义化更好的内容标签,音频,视频,画布,地理api
等,本地离线存储,会话存储,表单控件。
嵌入音频:
<audio controls>
<source src="dada.mp3" type="audio/mpeg">
dadaqianduan.cn
</audio>
嵌入视频:
<video width="450" height="100" controls>
<source src="dada.mp4" type="video/mp4">
dadaqianduan.cn
</video>
新增表单属性包括:datalist,datetime,output,keygen,date,month,week,time,number,range,emailurl
提供了很多新的api
,包括Media API, Text Track API, Application Cache API, User Interaction API, Data Transfer API, Command API, Constraint Validation API, History API
html
和html5
用DOCTYPE
声明新增的结构元素和功能元素来区别它们。
HTML5
使用的字符集<meta charset="UTF-8">
HTML5 Canvas
元素有什么用Canvas
元素用于在网页上绘制图形,该元素标签的强大之处在于可以直接在html
上进行图形操作。
我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)
文章持续更新,可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 http://www.dadaqianduan.cn/#/ 已经收录
github收录,欢迎Star:https://github.com/webVueBlog/WebFamily
文章浏览阅读8.9k次,点赞2次,收藏2次。先说以下我为何要删除docker的原因吧:因为我感觉Docker Hub有点慢,就配置了阿里云的镜像加速器,可是按阿里云的官方配置完后我怎么感觉它更慢了,对比昨天配置阿里的maven镜像仓库后快到起飞的速度,我认为是此次配置没有生效。多次确认新加入的/etc/docker/demon.json文件无误后又多次systemctl了未果,随即我怀疑阿里给出的以下方案中的“修改”的/etc/dock...
文章浏览阅读1.9k次,点赞3次,收藏4次。文章目录空间物理的研究对象太阳风能量向地球传输的三种方式和所需要的时间太阳内部结构、太阳活动太阳内部结构太阳活动太阳风速度从太阳表面到地球轨道附近变化参考空间物理的研究对象大气层:10KM以上,分成平流层、中层、低热层、热层、逃逸层电离层:60-90KM以上,一直到1000KM左右,部分电离气体,中性成风碰撞的影响不可忽略地球磁层:完全电离的气体,1000KM以上,可忽略碰撞,有太阳风和..._空间物理概论
文章浏览阅读2.9k次,点赞5次,收藏25次。BQ4050学习笔记(二)永久失效:如果发⽣严重故障,该设备可以永久禁⽤电池组。永久故障检查(IFC 和 DFW 除外)可以通过设置Settings:Enabled PFA、 Settings:Enabled PF B、 Settings:Enabled PF C 和Settings:Enabled PF D 中的相应位单独启⽤或禁⽤。所有永久在设置ManufacturingStatus()[PF]之前,故障检查(IFC 和 DFW 除外)被禁⽤。当任何PFStatus()位置位时,器件进⼊ PER_bq4050
文章浏览阅读152次。第二步:填写配置文件参数,这里定义了一个名字为application-user-dev.yaml的配置,使用的是YAML格式。DataID : 非常重要,可以看做是配置的文件的名字,在程序中拉取配置文件的时候需要指定Data ID。如果不使用默认的public命名空间,那么需要指定namespace配置为要使用的命名空间的Id值。第一步:打开Nacos监控面板,进入配置列表,新增一个user服务的配置文件。进入配置列表 ,切换到新建立的命名空间,创建配置文件。修改Nacos,添加命名空间。_spring-cloud-alibaba 使用nacos 2.1版本
文章浏览阅读293次。受害者打开python代码生成的RTF文件,RTF解析器解析恶意代码,触发堆溢出,Microsoft Word会闪退,用户其它Word中未保存的内容会丢失。_cve-2023-21716复现
文章浏览阅读451次。文件排版存档编号:[UYTR-OUPT28-KBNTL98-UYNN208]文件排版存档编号:[UYTR-OUPT28-KBNTL98-UYNN208]C语言程序设计A期末模拟试题C语言程序设计A期末模拟试题一一、单项选择题(每小题2分,共20分)由C++目标文件连接而成的可执行文件的缺省扩展名为( )。A. cpp B. exe C. obj D. li..._c语言如何将a转换成a
文章浏览阅读534次。笔记beef启动 beef 的方法msfbeef工具目录 /usr/share/beef-xss配置文件 config.yaml启动 beef 的方法1.beef-xss2./usr/share/beef-xss/beef(使用前需要修改默认的用户名称和密码)Web 管理界面 http://127.0.0.1:3000/ui/panelShellcode http://127.0.0.1:3000/hook.js测试页面 http://127.0.0.1:3000/demos/butch_msf如何切换一个session
文章浏览阅读503次。丑数问题及变种小结声明1 判断丑数因子只包含2,3,5的数称为丑数(Ugly Number),习惯上把1当作第一个丑数面试lintcode 517 ugly numbersegmentfault剑指offer 面试题34 丑数数组解法:参考剑指offer,将待判断目标依次连续整除2,3,5,若是最后获得1,证实该数为丑数;优化/*** 依次整除2,3,5判断(2,3,5顺序判断时间最优)* htt..._编写python来证明一个数是丑数
文章浏览阅读1.9k次,点赞30次,收藏11次。Selenium 简介: WebDriver是Selenium Tool套件中最重要的组件。Selenium 2.0之后已经将Selenium和WebDriver进行合并,作为一个更简单、简洁、有利于维护的API提供给测试人员使用。 它提供了一套标准的接口,可以用多种编程语言调用,并且和浏览器进行交互。 WebDriver可以对浏览器进行控制,包括输入URL,点击按钮,填写表单,滚动页面,甚至是执行JavaScript代码。同时,它也能够获取网页中的信息,如文本,标签,属_python webdriver api
文章浏览阅读1w次。1.什么是公钥加密私钥解密 简单一点来说一般加密解密都用的是同一个秘钥或者根本不用,而这里采用的是加密用一个秘钥,解密用另一个秘钥且能解密成功.这就属于不对称加密解密算法的一种了.2.公钥秘钥的生成 由于这种加密方案,公钥秘钥是成对的,所以需要一些工具生成 利用 openssl 生成公钥私钥 生成公钥: openssl genrsa -out rsa_private_key...._crypto.publicencrypt
文章浏览阅读1.7k次。[工欲善其事,必先利其器]上文中,我们简单介绍了依赖关系的基本理论与配置方式。但是由于这个知识点在我们日后的开发过程中会经常使用到,因此,我们在本篇中通过演示实例来说明依赖关系,请各位看官一定跟着步骤,亲自尝试一番。仔细观察通过这种方式对我们程序架构造成的影响。特别的,这里以一份已经调试完成的工程为例,因此,与前文说的工程命名不一致,敬请谅解。准备工作:a.操作系统:win7 x6_依赖关系怎么写
文章浏览阅读343次。Rikka with GraphTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submission(s): 592 Accepted Submission(s): 353Problem DescriptionAs we know,