前言
希望可以通过这篇文章，能够给你得到帮助。(感谢一键三连)
一.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元素类似，提供一个相应的选择器。
二.HTML5增加表单的特性以及元素
form特性在HTML5中，可以把从属于表单的元素放在任何地方，然后指定该元素的form特性值为表单的id，该元素就从属于表单。
1.formaction特性：每个表单都会通过action特性把表单内容提交到另外一个页面，而在html5中，为不同的“提交”按钮分别添加formaction特性后，该特性会覆盖表单的action特性，将表单提交至不同的页面。
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元素定义一个选值列表。
7.keygen元素：提供了一种安全的方式来验证用户，该元素有密钥生成的功能，在提交表单时，会分别生成一个私人密钥和一个公共密钥，私人密钥保存在客户端，公共密钥则通过网络传输至服务器。
8.output元素用于不同类型的输出，该元素必须从属于某个表单，即是写在表单的内部。
3.HTML5如何实现跨域
4.什么是WebSql
WebSql是一个在浏览器客户端的结构关系数据库，是浏览器内的本地RDBMS关系型数据库管理系统，可以使用SQL查询。
WebSql是基于SQLite的。
5.应用缓存中网络命令的作用是啥
网络命令描述不需要缓存的文件。
6.Canvas和SVG的区别是什么
SVG是可缩放矢量图形，它是基于文本的图形语言，使用文本，线条，点等来绘制图像。
a. 一旦Canvas绘制完成将不能访问像素或操作它，任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器再次显示。
b. Canvas对绘制动画和游戏有利，SVG对创建图像有利。
c. 因为不需要记住之后的事，所以Canvas运行快，而SVG需要记录坐标，所以运行慢。
d. 在Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。
e. Canvas绘制出的是位图，因此与分辨率有个，SVG是矢量图，与分辨率无关。
使用SVG绘制
使用Canvas绘制：
7.本地存储的数据有生命周期吗
本地存储的数据没有生命周期，它将一直存储数据，直到用户从浏览器清除或者使用javascript代码移除。
8.表单验证的API
1.required特性：表示此项的值不能为空，否则无法提交表单。
2.pattern特性用于input元素定义一个验证模式。
min,max,step特性
novalidate用于指定表单或表单内的元素在提交时不验证，form元素应用novalidate特性，表示表单中的所有元素在提交时不再验证。
validaty属性用于获取表单元素的ValidityState对象，该对象包含8个方面的验证结果。ValidityState对象会持续存在，每次获取validity属性时，返回的是同一个ValidityState对象。
willValidate属性，用于获取一个布尔值，表示表单元素是否需要验证，如果表单元素设置了required特性或pattern特性，则willValidate属性为true，即表单的验证将执行。
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。
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应用缓存的目的是帮助用户离线浏览页面，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。
本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。
提升网站的性能：
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的执行。
我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。
13. HTML5新特性
拖放api，语义化更好的内容标签，音频，视频，画布，地理api等，本地离线存储，会话存储，表单控件。
嵌入音频：
嵌入视频：
新增表单属性包括：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上进行图形操作。
点赞、收藏和评论
网友评论