H5新增特性

1、pattern：写正则，但是需要和form表单连着用

2、WebSocket “网络套接字”,

是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

socket. io

端口要一致：

socket.emit()是发送广播，仅自己可见

socket.broadcast.emit()是发送广播，除了自己不可见，其他的人都可见

3、H5新特性-----type=file文件上传

1、语法

单文件上传：<input type="file" id="file1"/>

多文件上传：<input type="file" id="file2" multiple/>

2、属性（以下三个仅HTML5支持，因此存在兼容性问题）

（1）multiple ：表示用户是否可以选择多个值。multiple只能用于type=file和type=email。

（2）accept：服务器接受的文件类型，否则将被忽略。

音频/ *代表声音文件。仅HTML5支持

视频/ *代表视频文件。仅HTML5支持

图像/ *表示图像文件。仅HTML5支持

（3）required：此属性指定用户在提交表单之前必须填写一个值。

3、获取上传的文件信息

Input.onchange = function (event) {
    if(!window.FileReader){
        console.log("浏览器不支持HTML5");
        return false;
    }
    var a = event.target;
    var b = event.target.files;
    var c = event.target.files[0];
    console.log(a);//input对象
    console.log(b);//files数组对象
    console.log(c);//第一张图片的file对象
}

可以发现input.files是一个数组，由传入的file对象组成。每个file对象包含以下属性：

lastModified：数值，表示最近一次修改时间的毫秒数；

lastModifiedDate：对象，表示最后一次表示最近一次修改时间的Date对象（高程中说是字符串，根据上图可看出应该为对象，为了层级清晰未对其展开，大家可自行查看，其可调用Date对象的有关方法，例如getDay方法）；

name：本地文件系统中的文件名；

size：文件的字节大小；

type：字符串，文件的MIME类型；

weblitRelativePath：此处为空；当在input上加上webkitdirectory属性时，用户可选择文件夹，此时weblitRelativePath表示文件夹中文件的相对路径。

FileReader

以上file对象只获取到了对文件的描述信息，但没有获得文件中的数据，而event.target.value也只是保存的是文件的绝对路径

我们可以通过html5提供的FileReader读取到文件中的数据。

首先创建一个FileReader实例：

var reader = new FileReader();

方法

FileReader提供了如下方法：

readAsArrayBuffer(file) 按字节读取文件内容，结果用ArrayBuffer对象表示

readAsBinaryString(file) 按字节读取文件内容，结果为文件的二进制串

readAsDataURL(file) 读取文件内容，结果用data:url的字符串形式表示

readAsText(file,encoding) 按字符读取文件内容，结果用字符串形式表示

abort() 终止文件读取操作

readAsDataURL和readAsText较为常用，这里只对这两者进行说明。

readAsDataURL会将文件内容进行base64编码后输出：

var Input = document.querySelector("#file1");
Input.onchange = function (event) {
    if(!window.FileReader){
        console.log("浏览器不支持HTML5");
        return false;
    }
    var files = event.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(files);//发起异步请求
    reader.onload = function(e){
        //读取完成后，数据保存在对象的result属性中
        console.log(this.result);
    }
}

事件

onabort 当读取操作被中止时调用

onerror 当读取操作发生错误时调用

onload 当读取操作成功完成时调用

onloadend 当读取操作完成时调用，无论成功或失败

onloadstart 当读取操作开始时调用

onprogress 在读取数据过程中周期性调用

var Input = document.querySelector("#file1");
var count=0;
Input.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsText(inputBox.files[0],"utf-8");//发起异步请求
  reader.onload = function(){
    console.log("加载成功")
  }
  reader.onloadstart = function(){
    console.log("开始加载")
  }
  reader.onloadend= function(){
    console.log("加载结束")
  }
  reader.onprogress = function(){
    count++;
    console.log("加载中"+count)
  }
})

4、progress 进度条

 <progress value="30" min='0' max="100"></progress>

5、H5新增的input的type类型

HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括：

1).color属性

点击时弹出颜色选择器，可以选择任意颜色

<input type="color">

2).number属性

输入范围内的数字，可以手动输入超出范围的数字，但不能提交

Points: <input type="number" name="points" min="1" max="10" />

ps：这里需要说明的是，number的时候提供了一个最大值和最小值的限制条件，可以更好的满足我们做限制的时候的操作。

3).Email属性

检测提交的是否是一个电子邮件格式

E-mail: <input type="email" name="user_email" />

4).url属性

检测是否是一个url格式

Homepage: <input type="url" name="user_url" />

5).range属性

选择区域

<input type="range" name="points" min="1" max="10" />

ps：这里也是一样的，给定了几个常用的属性：

6).date属性

选取日、月、年

7).month属性

选取月、年

8).week属性

选取月、年

9).time属性

选取时间（小时和分钟）

10).datetime属性

选取时间、日、月、年（UTC 时间）

11).datime-local属性

选取时间、日、月、年（本地时间）

12).search

这里就是一个普通的搜索域。

1.placeholder 属性

• placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

• 该提示会在用户输入值之前显示在输入字段中。

• placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

// 拥有占位符文本的输入字段

<input type="search" name="fname" placeholder="First name">

2.step 属性

• step 属性规定 input元素的合法数字间隔。

• step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

// 拥有具体的合法数字间隔的输入字段

<input type="number" name="points" step="3">

3.pattern 属性

• pattern 属性规定用于检查 input 元素值的正则表达式。

• pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

// 只能包含三个字母的输入字段（无数字或特殊字符）：

<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

4.multiple 属性

• multiple 属性是布尔属性。

• 如果设置，则规定允许用户在input元素中输入一个以上的值。

• multiple 属性适用于以下输入类型：email 和 file。

<input type="file" name="img" multiple="multiple" />

5.min 和 max 属性

min 和 max 属性规定input元素的最小值和最大值。

<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="number" name="points" min="0" max="10" />
<input type="submit" />

6.height 和 width 属性

• height 和 width 属性规定input元素的高度和宽度。

• height 和 width 属性仅用于<input type="image">

• 注释:请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。

<input type="image" src="/i/eg_submit.jpg" alt="Submit" width="128" height="128"/>

7.list属性

• list 属性引用的 datalist 元素中包含了 input 元素的预定义选项。

<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

8.required属性

• required 属性是布尔属性。

• 如果设置，则规定在提交表单之前必须填写输入字段。

Name: <input type="text" name="usr_name" required="required" />
<input type="submit" value="提交" />

9.formtarget 属性

• formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。

• formtarget 属性会覆盖 form元素的 target 属性。

• formtarget 属性可与 type="submit"和 type="image"使用。

  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />
</form>

10.formmethod 属性

• formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。

• formmethod 属性覆盖 form 元素的 method 属性。

• formmethod 属性适用于 type="submit" 以及 type="image"

  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formmethod="post" formaction="/example/html5/demo_post.asp" value="使用 POST 提交" />
</form>

11.autofocus 属性

• autofocus 属性是布尔属性

• 如果设置，则规定当页面加载时input元素应该自动获得焦点。

示例代码：

// 使 "First name" 输入字段在页面加载时自动获得焦点：

First name:<input type="text" name="fname" autofocus>

12.autocomplete 属性

• autocomplete 属性规定表单或输入字段是否应该自动完成。

• 当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

• 提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。

• 适用范围：autocomplete 属性适用于 form以及如下 input类型：text、search、url、tel、email、password、datepickers、range 以及 color。

示例代码：

   First name:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

13.form 属性

• form 属性规定 input 元素所属的一个或多个表单。

14.formaction 属性

• formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

• formaction 属性覆盖 form 元素的 action 属性。

• formaction 属性适用于 type="submit" 以及 type="image"。

15.formenctype 属性

• formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

• formenctype 属性覆盖 form 元素的 enctype 属性。

• formenctype 属性适用于 type="submit" 以及 type="image"。

16.formnovalidate 属性

• novalidate 属性是布尔属性。

• 如果设置，则规定在提交表单时不对  元素进行验证。

• formnovalidate 属性覆盖

元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"。

MDN:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5