HTML5的新属性和新方法

1.表单新增的type属性

email: email提供了默认的电子邮箱校验：要求必须包含@符号，同时必须包含服务器的名称，例如@qq.com，@163.com，如果不能满足验证，则会阻止当前数据的提交
tel: tel并不提供校验功能，它的本质目的是为了在移动端能打开数字键盘，这意味着数字键盘限制了用户只能输入数字
url: 验证只能输入合法的网址：必须包含http://…
number: 只能输入数字（包含小数点），不能输入其他字符，max：可输入的最大值；min：可输入的最小值；value：默认值
range:范围条
search:更人性化的输入体验，输入框最右侧有一个X符号，可一键删除输入框的内容
color:提供颜色选择
time:时分秒
date:年月日
datetime-local:日期时间
month:月份
week:星期

<form>
    <input type="email"><br>
    <input type="tel"><br>
    <input type="url"><br>
    <input type="number" max="100" min="0" value="66"><br>
    <input type="range" max="100" min="0" value="22"><br>
    <input type="search"><br>
    <input type="color"><br>
    <input type="time"><br>
    <input type="date"><br>
    <input type="datetime-local"><br>
    <input type="month"><br>
    <input type="week"><br>
    <input type="submit" value="提交">
</form>

2.表单新增的其他属性

placeholder:提示文本；
autofocus:自动获取输入框焦点；
autocomplete:提示输入过的内容，但要满足两个条件
1.必须成功提交过；
2.标签元素具有name属性
required:必须输入值，如果没有输入会阻止当前数据的提交
pattern:正则表达式验证
*: 表示任意个
?: 代表0个或1个
+: 代表1个或多个
multiple:可以选择多个文件，当type类型为email时，也可以输入多个邮箱地址，以逗号分隔
form:指定表单id，那么将来指定id的表单进行数据提交的时候，也会将当前form属性值为对应表单id的数据一起提交-

<form id="myForm">
  <input type="text" name="account" placeholder="请输入用户名" autofocus autocomplete="on"><br>
   
   <input type="tel" required pattern="^(\+86)?\d{10}$"><br>
   
    <input type="file" multiple name="files"><br>
    <input type="email" multiple name="email">
    
    <input type="submit">
</form>
<input type="text" name="address" form="myForm">
<!--这个元素并没有包含在form中：默认情况下该元素也不会被提交，通过form属性提交->

3.表单新增元素（datalist）

创建选项值：value–具体的值 label–提示信息，辅助值
看似功能十分强大但是兼容性特别差
option:可以是单标签，也可以是双标签
如果input的type为URL，那么value值必须包含http://…

<form id="myForm">
    专业：<input type="text" list="sublist">
    <datalist id="sublist">
    	<option value="java" label="针不戳"></option>
    	<option value="Python" label="人多"></option>
    	<option value="javascript" label="一般"></option>
    </datalist>
    <input type="submit">
</form>

4.表单新增的事件

oninput：监听当前指定元素内容的改变，只要内容改变（添加内容，删除内容），就会触发该事件
与onkeyup的区别：可检测到右键粘贴导致的文本框内容变化
oninvaild:当验证不通过时触发

<form id="myForm">
   用户名：<input type="text" name="userName" id="userName"><br>
    电话：<input type="tel" name="userPhone" pattern=“^{d}10$” id="userPhone"><br>
    <input type="submit">
</form>
<script>
   
document.getElenemtById('userName').oninput=function(){
    console.log(this.value)
}
    
    document.getElenemtById('userPhone').oninvaild=function(){
    this.setCustomValidity('请输入合法的手机号')
}
</script>

5.进度条

progress:max:最大值 value：当前值
meter:high:规定的较高的值 low:规定的较低的值 max：最大值 min:最小值 value：当前值

<progress max="100" value="22"></progress>
<meter max="100" min="0" low="22" high="66" value="33"></meter>

6.小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        fieldset{
            width:60%;
            margin:10px auto;
            padding:40px;
        }
        fieldset>label{
            padding:10px;
            display: inline-block;
        }
        fieldset>meter,
        fieldset>input{
            width:100%;
            padding:10px 10px;
            font-size: 15px;
            border:1px solid skyblue;
            border-radius:10px;
            outline:none;
        }
        fieldset>meter{
            outline: #333;
            height:50px;
            padding:0;
        }
        fieldset>input[type="submit"]{
            margin:10px;
        }
    </style>
</head>
<body>
<form action="" method="post">
  <fieldset>
      <legend>学生档案</legend>
      <label for="userName">姓名：</label>
      <input id="userName" type="text" placeholder="请输入姓名">
      <label for="userPhone">手机号码：</label>
      <input id="userPhone" type="tel" pattern="^(\+86)?\d{10}$">
      <label for="userEmail">邮箱地址：</label>
      <input id="userEmail" type="email" required>
      <label for="userSchool">所属学院：</label>
      <input id="userSchool" type="text" list="school">
      <datalist id="school">
          <option value="web前端"></option>
          <option value="web后端"></option>
          <option value="python"></option>
      </datalist>
      <label for="userGrade">入学成绩：</label>
      <input id="userGrade" type="number" min="0" max="100" value="0">
      <label for="userLevel">基础水平：</label>
      <meter id="userLevel" min="0" max="100" value="0" low="59" high="95"></meter>
      <label for="userRegister">入学日期：</label>
      <input id="userRegister" type="datetime-local" >
      <label for="userGraduate">毕业日期：</label>
      <input id="userGraduate" type="datetime-local" >
      <input type="submit" value="提交">
  </fieldset>
</form>
</body>
<script>
   document.querySelector('#userPhone').addEventListener('invalid',function(){
       this.setCustomValidity("请输入十位电话号码")
   })
   document.querySelector('#userGrade').addEventListener('input',function (){
       document.querySelector('#userLevel').value=this.value
   })
</script>
</html>

7.自定义属性

以**data-**开头
data-后必须至少有一个字符，多个单词使用-连接
名称都是小写字符，不能包含大写字符和特殊符号

<p data-school-name='itcast'>
    22132
</p>
<script>
let p=document.querySelector('p');
   let value=p.dataset['schoolName']
   console,log(value)
</script>

8.全屏接口

requestFullScreen():开启全屏显示

不同浏览器下需要添加不同的前缀

Chrome：webkit firefox：moz ie：ms opera：o
cancelFullScreen():退出全屏显示

与开启全屏类似，需要添加前缀
fullScreenElement():是否是全屏状态

兼容性写法

<button>full</button>
<script>
  document.querySelector('button').addEventListener('click',function (){
      let div= document.querySelector('body');
       if(div.requestFullScreen){
           div.requestFullScreen();
       }
       else if(div.webkitRequestFullScreen){
           div.webkitRequestFullScreen();
       }
       else if(div.mozRequestFullScreen){
           div.mozRequestFullScreen();
       }
       else if(div.msRequestFullScreen){
           div.msRequestFullScreen();
       }
   })
</script>

9.fileReader

readAsText():读取文本文件（可以使用Txt打开的文件），返回文本字符串，默认编码是UTF-8
readAsBinaryString():读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。（把文件以二进制的形式传递给后端）
readAsDataURL():读取文件以获取一段以data开头的字符串。DataURL是将资源转换成base64编码的字符串形式，并且将这些内容直接存储在URL中，优化网站的加载速度和执行效率
abort（）:中断读取
事件函数
- onabort()读取文件中断时触发
- onerror()读取错误时触发
- onload()文件读取成功完成时触发
- onloadend()文件读取完成时触发，无论成功与否
- onloadstart()开始读取时触发
- onprogress()读取文件过程中持续触发
实现案例

<body>
    <form action="">
    <input type="file" name="myFile" id="myFile" onchange="submitFile()">
    <input type="submit" value="submit">
</form>
<img src="" alt="">
</body>

<script>
  function submitFile(){
      let reader=new FileReader();//创建文件读取对象
      let file=document.querySelector('#myFile').files[0];
      reader.readAsDataURL(file);//读取文件
      //1.没有返回值，但是会把读取结果存储在读取对象的result中
      //2.需要传递一个blob参数，即二进制文件（一般指图片或者其他可以嵌入到文档的类型）
      reader.onload=function(){
          console.log(reader.result);
          document.querySelector('img').src=reader.result;
      }
  }
</script>

10.拖拽

在HTML5中，想要拖拽元素，需要为元素添加draggable属性

被拖动的源对象可以触发的事件：

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入

(2)ondragover：目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手，但浏览器存在默认行为，会阻止ondrop事件，需要在ondragover中阻止浏览器的默认行为

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1,.div2{
            width:400px;
            height: 400px;
            border:1px solid skyblue;
        }
    </style>
</head>
<body>
<div  class="div1">
    <p id="wwww" draggable="true">232323</p>
</div>
<div  class="div2"></div>
</body>
<script>

  document.ondragstart=function(e){
      console.log(e)
      e.target.style.opacity=0.5;
      e.dataTransfer.setData("text/html",e.target.id);
  }
    document.ondragend=function(e){
        e.target.style.opacity=1;
    }
document.ondragover=function(e){
      e.preventDefault();
}
document.ondrop=function(e){
    let id=e.dataTransfer.getData("text/html");
    e.target.appendChild(document.getElementById(id))
}
</script>
</html>

11.地理定位

1.H5地理位置定位功能

首先判断用户浏览器是否支持该功能，目前大多数现代浏览器均支持，获取位置信息需用户授权同意

function getLocation(){ 
  if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(showPosition,showError); 
  }else{ 
    alert("浏览器不支持地理定位。"); 
  } 
}

2.showPosition（）获取用户经度纬度

function showPosition(position){
   console.log(position); 
   var lat = position.coords.latitude; //纬度 
   var lag = position.coords.longitude; //经度 
   console.log('纬度:'+lat+',经度:'+lag); 
}

3.执行函数getLocation(),如果调用成功即可显示经度纬度

4.补充showError（），这个函数是报错信息

showError(error){

  console.log(error.code)

}

function showError(error){ 
  switch(error.code) { 
    case error.PERMISSION_DENIED: 
      alert("定位失败,用户拒绝请求地理定位"); 
      break; 
    case error.POSITION_UNAVAILABLE: 
      alert("定位失败,位置信息是不可用"); 
      break; 
    case error.TIMEOUT: 
      alert("定位失败,请求获取用户位置超时"); 
      break; 
    case error.UNKNOWN_ERROR: 
      alert("定位失败,定位系统失效"); 
      break; 
  } 
}