前端HTML5面试官和应试者一问一答 | 七日打卡

2,823 阅读12分钟

哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。

把你的前端拿捏得死死的,每天学习得爽爽的,微信搜索【程序员哆啦A梦】关注这个不一样的程序员,如果你所学的东西 处于喜欢 才会有强大的动力支撑。

感谢不负每一份热爱前端的程序员,不论前端技能有多奇葩,欢迎关注加我入群vx:xiaoda0423

前言

希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)

1.HTML5表单增加的输入类型

  1. url类型:专门为输入url地址定义的文本库,在验证输入文本的格式时,如果文本框中的的内容不符合url地址的格式,会提示验证错误。
  2. email类型:专门是为输入email地址定义的文本框,在验证输入的文本的格式时,如果文本框中的内容不符合email地址的格式,会提示验证错误。在email类型的input元素还有一个multiple属性,表示在该文本框中可输入用逗号隔开的多个邮件地址。
  3. range类型:用于把输入框显示为滑动条,可以作为某一特定范围内的数值选择器。minmax特性,分别表示范围的最小值,默认为0,范围的最大值,默认为100.range类型有一个step特性,表示拖动的步长,默认为1。
  4. number类型:专门为输入特定的数字而定义的文本框,具有min,max,step特性。
  5. tel类型:专门为输入电话号码而定义的文本框,没有特殊的验证规则。
  6. search类型:专门为输入搜索引擎关键词定义的文本框,没有特殊的验证规则。
  7. color类型:color类型的input元素默认会提供一个颜色选择器。
  8. date类型:专门用于输入日期的文本框,默认带日期选择器的输入框。
  9. month,week,time,datetime,datetime-local类型的input元素与date类型的input元素类似,提供一个相应的选择器。

2.HTML5增加表单的特性以及元素

form特性在HTML5中,可以把从属于表单的元素放在任何地方,然后指定该元素的form特性值为表单的id,该元素就从属于表单。

<input name="da" type="text" form="form1" required/>
<form id="form1">
 <input type="submit" value="提交"/>
</form>
  1. 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>
  1. formmethod,formenctype,formnovalidate,formtarget特性:formmethod特性会覆盖表单的method特性;formenctype特性可覆盖表单的enctypeformnovalidate特性可覆盖novalidate特性,formtarget特性可以覆盖表单的target特性。

  2. placeholder特性,向用户提示描述性的信息。

  3. autofocus特性,用于所有类型的input元素,当页面加载完成时,可自动获取焦点,每个页面只允许出现一个有autofocus特性的input元素,如果设置多个,相当于未指定该行为。

  4. autocomplete特性:应用于form元素和输入型的input元素,用于表单的自动完成。可以autocomplete="on",其可以指定"on","off"和" " 不指定。

  5. list特性和datalist元素,可以为某个可输入的input元素定义一个选值列表。

<input name="email" type="email" list="emaillist"/>

<datalist id="emaillist">
 <option value="1@qq.com"> dada </option>
 <option value="2@qq.com"> dada2 </option>
</datalist>
  1. keygen元素:提供了一种安全的方式来验证用户,该元素有密钥生成的功能,在提交表单时,会分别生成一个私人密钥和一个公共密钥,私人密钥保存在客户端,公共密钥则通过网络传输至服务器。
<form action="">
 <input type="text" name="name"/> <br>
 <keygen name="security"/>
 <br><input type="submit"/>
</form>
  1. output元素用于不同类型的输出,该元素必须从属于某个表单,即是写在表单的内部。
<form oninput="x.value=da.value">
 <input type="range" name="da" value="20"/>
 <output name="x"></output>
</form>

3.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");

4.什么是WebSql

WebSql是一个在浏览器客户端的结构关系数据库,是浏览器内的本地RDBMS关系型数据库管理系统,可以使用SQL查询。

WebSql是基于SQLite的。

5.应用缓存中网络命令的作用是啥

// 在代码login.php始终都不应该缓存或者离线访问
NETWORK:
login.php

网络命令描述不需要缓存的文件。

6.CanvasSVG的区别是什么

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()

7.本地存储的数据有生命周期吗

本地存储的数据没有生命周期,它将一直存储数据,直到用户从浏览器清除或者使用javascript代码移除。

8.表单验证的API

  1. required特性:表示此项的值不能为空,否则无法提交表单。
  2. pattern特性用于input元素定义一个验证模式。
<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6为邮政编码"/>
  1. min,max,step特性
  2. novalidate用于指定表单或表单内的元素在提交时不验证,form元素应用novalidate特性,表示表单中的所有元素在提交时不再验证。
  3. validaty属性用于获取表单元素的ValidityState对象,该对象包含8个方面的验证结果。ValidityState对象会持续存在,每次获取validity属性时,返回的是同一个ValidityState对象。
var validityState=document.getElementById("username").validity;
  1. willValidate属性,用于获取一个布尔值,表示表单元素是否需要验证,如果表单元素设置了required特性或pattern特性,则willValidate属性为true,即表单的验证将执行。
var willValidate=document.getElementById("username").willValidate;
  1. 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属性,使用自定义的验证错误提示信息,在有些情况下不适合使用浏览器内置的验证错误提示信息,需要自定义,当输入值不符合语义规则,页面会提示自定义的错误信息。

表单验证的方法

  1. checkValidity()方法,显式验证方法,每个表单元素都可以调用checkValidity()方法,它返回一个布尔值,表示是否通过验证。默认情况下,表单的验证发生在表单提交时,如果使用checkValidity()方法,可以在需要的任何地方验证表单。
  2. setCustomValidity()方法,自定义错误提示信息的方法。当默认的提示错误满足不了需求时,可以通过该方法自定义错误提示。当通过此方法自定义错误提示信息时,元素的validationMessage属性值会更改为定义的错误提示信息,同时ValidityState对象的customError属性值变成true

9.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字节。
  • 每个特定的域名下最多生成20个cookie
  • ie6或更低版本最多有20个cookie
  • ie7和之后的版本最多可以有50个cookie
  • firefox最多可以有50个cookie
  • ChromeSafari没有硬性限制
  • sessionStorage用于在本地存储一个会话中的数据,这些数据只有同一个会话中的页面才能访问,当会话结束后,数据也随之销毁,因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
  • localStorage用于持久化本地存储,除非主动删除数据,否则数据一般是永久不会过期的。
  • localStorage是为了更大容量的存储设计的,cookie的大小是有受限制的,并且每次请求一个新页面时,cookie都会被发送过去,这无形中浪费了带宽,cookie需要制定作用域,不可以跨域调用。

10.HTML5为浏览器提供了哪些数据存储方案

在较高版本的浏览器中,提供了sessionStorageglobalStorage,在html5规范中localStorage取代了globalStorage

应用程序缓存:

  • 离线浏览,让用户可在应用离线时使用它们。
  • 速度,让已缓存资源加载更快。
  • 减少服务器负载,让浏览器将指下载服务器更新过的资源。

HTML5应用缓存的目的是帮助用户离线浏览页面,如果网络连接不可用,打开的页面就来自浏览器缓存,离线应用缓存可以帮助用户达到这个目的。

本地存储数据持续永久,但是会话存储在浏览器打开时有效,在浏览器关闭时会话重置存储数据。

提升网站的性能:

<!doctype html>
<html manifest="dadda.appcache">
</html>

11.如何实现浏览器内多个标签页之间的通信

在标签页之间,调用localstorage,cookies等数据存储,可以实现标签页之间的通信。

12.Web WorkerwebSocket的作用

WebSocket:它是web应用程序的传输协议,提供了双向的,按序到达的数据流,它是html5新增的协议,WebSocket的连接是持久的,它在客户端和服务器之间保持双工连接,服务器的更新可以及时推送到客户端,而不需要客户端以一定的时间间隔去轮询。

Web Worker:通过worker=new Worker(url)加载一个javascript文件,创建一个Worker,同时返回一个Worker实例;用worker.postMessage(data)Worker发送数据;绑定worker.onmessage接收Worker发送过来的数据;可以使用worker.terminate()终止一个Worker的执行。

13. 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

14.如何区别htmlhtml5

DOCTYPE声明新增的结构元素和功能元素来区别它们。

HTML5使用的字符集<meta charset="UTF-8">

15.HTML5 Canvas元素有什么用

Canvas元素用于在网页上绘制图形,该元素标签的强大之处在于可以直接在html上进行图形操作。

点赞、收藏和评论

我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)

我们下期见!

文章持续更新,可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 www.dadaqianduan.cn/#/ 已经收录

github收录,欢迎Star:github.com/webVueBlog/…