前端HTML5面试官和应试者一问一答

Posted 2021-03-30 程序员哆啦A梦

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

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

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

前言

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

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

1. url类型：专门为输入 url地址定义的文本库，在验证输入文本的格式时，如果文本框中的的内容不符合 url地址的格式，会提示验证错误。
2. email类型：专门是为输入 email地址定义的文本框，在验证输入的文本的格式时，如果文本框中的内容不符合 email地址的格式，会提示验证错误。在 email类型的 input元素还有一个 multiple属性，表示在该文本框中可输入用逗号隔开的多个邮件地址。
3. range类型：用于把输入框显示为滑动条，可以作为某一特定范围内的数值选择器。 min和 max特性，分别表示范围的最小值，默认为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>

2. formmethod,formenctype,formnovalidate,formtarget特性：formmethod特性会覆盖表单的method特性；formenctype特性可覆盖表单的enctype；formnovalidate特性可覆盖novalidate特性，formtarget特性可以覆盖表单的target特性。

3. placeholder特性，向用户提示描述性的信息。

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

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

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

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

<datalist id="emaillist">
 <option value="[e-mail]"> dada </option>
 <option value="[e-mail]"> dada2 </option>
</datalist>

7. keygen元素：提供了一种安全的方式来验证用户，该元素有密钥生成的功能，在提交表单时，会分别生成一个私人密钥和一个公共密钥，私人密钥保存在客户端，公共密钥则通过网络传输至服务器。

<form action="">
 <input type="text" name="name"/> <br>
 <keygen name="security"/>
 <br><input type="submit"/>
</form>

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

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

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

8.表单验证的API

1. required特性：表示此项的值不能为空，否则无法提交表单。
2. pattern特性用于 input元素定义一个验证模式。

<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6为邮政编码"/>

3. min,max,step特性
4. novalidate用于指定表单或表单内的元素在提交时不验证， form元素应用 novalidate特性，表示表单中的所有元素在提交时不再验证。
5. validaty属性用于获取表单元素的 ValidityState对象，该对象包含8个方面的验证结果。 ValidityState对象会持续存在，每次获取 validity属性时，返回的是同一个 ValidityState对象。

var validityState=document.getElementById("username").validity;

6. willValidate属性，用于获取一个布尔值，表示表单元素是否需要验证，如果表单元素设置了 required特性或 pattern特性，则 willValidate属性为 true，即表单的验证将执行。

var willValidate=document.getElementById("username").willValidate;

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

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

在较高版本的浏览器中，提供了sessionStorage和globalStorage，在html5规范中localStorage取代了globalStorage。

应用程序缓存：

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

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

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

提升网站的性能：

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

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

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

12.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的执行。

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.如何区别html和html5

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

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

15.HTML5 Canvas元素有什么用

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

点赞、收藏和评论

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

我们下期见！

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

github收录，欢迎Star：https://github.com/webVueBlog/WebFamily