H5新增特性

Posted 2021-03-12 lyly96720

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 元素的预定义选项。
<input list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>

8.required属性
? required 属性是布尔属性。
? 如果设置，则规定在提交表单之前必须填写输入字段。
<form action="/example/html5/demo_form.asp" method="get"> Name: <input type="text" name="usr_name" required="required" /> <input type="submit" value="提交" />

9.formtarget 属性
? formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
? formtarget 属性会覆盖 form元素的 target 属性。
? formtarget 属性可与?type="submit"和?type="image"使用。
<form action="/example/html5/demo_form.asp" method="get"> 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"
<form action="/example/html5/demo_form.asp" method="get"> 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。
示例代码：
<form action="action_page.php" autocomplete="on"> 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