HTML5

1.HTML5介绍

• 所有的主流浏览器都支持h5(IE9及以上支持h5（有选择性的支持）,IE8以下不支持)
• 改变了用户与文档的交互方式（多媒体）
• 增加了其他的新特性（语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡、动画））
• 相对于H4：
  抛弃了一些不常用的标记和属性
  新增了一些标记和属性—表单属性
  h5的网页代码结构更简洁

2.HTML5 新增语义标签

标签名	作用
header	表示页眉
nav	表示导航
main	文档主要内容
article	文章
aside	主题内容之外
footer	文档或者页的页脚

3.HTML5新增语义标签的兼容问题

IE9及以上有选择性的支持,IE8以下不支持
解决方法：
（1）手动创建标签（注意默认创建的标签都是行级元素，行级元素设置高度无效，需转换为块级元素display:block;）
（2）引入第三方插件 html5shiv.min.js

4.H5表单新增的type属性

1.email:输入email地址，应用于包含email地址的输入域，在表单提交时会进行完整的验证，必须包含@符号和域名
2.url:输入url地址，在提交表单时，会进行合法性验证，必须包含htpp://
3.tel:输入电话号码，在移动端会自动打开数字键盘以限制用户输入的必须是数字
4.number:输入数字，使用max设置最大值，min设置最小值，value设置当前值
5.range:范围
6.color:颜色
7.与日期相关的：
	- time:时分秒
	- date：年月日
	- datetime：日期时间（大多是浏览器不支持，只在苹果的safari支持）
	- datetime-local:日期时间
	- month:月份
	- week:星期

5.H5表单新增的其他属性

(1)palceholder:提示文本，提示占位
(2)autofocus:自动获取焦点
(3)autocomplete:自动完成：on打开 ，off关闭
     1.必须成功提交过：提交才会有记录
     2.当前添加autocomplete的元素必须有name属性
(4)required：必须输入，如果没有输入，则会阻止提交
(5)pattern:正则表达式验证
         *：代表任意个
         ？：0个或者1个
         +：1个或者多个
(6)multiple 可以进行多选文件,在 输入email邮箱中，允许输入多个邮箱
     文件：<input type="file" name="photo" multiple><br>
(7)form属性，指定表单的id,在指定表单提交时，当前表单元素会被提交

6.H5表单新增元素

（1）datalist:创建选择列表
属性：
- value:具体的值
- label:辅助信息
- option可以是单标签也可以是双标签
一般和输入框一起使用：要建立输入框和datalist的连接输入框的list属性值="datalist的id值

专业:<input type="text" list="subjects">
<datalist id="subjects">
     <option value="前端开发" label="前景好"></option>
     <option value="python数据分析" label="工资好"></option>
     <option value="java开发" label="掉发快"></option>
     <option value="网络运维" label="烧脑壳"></option>
</datalist>

（2）keygen加密(生成公钥和私钥)

加密： <keygen></keygen><br>

（3）output：显示输出信息，只能显示，不能修改，语义性更强

<output>总金额：￥8888元</output>

（4）progress:进度条
属性：
- max:最大值
- min：最小值

<progress min="1" max="100"></progress>

（5）meter:度量器，衡量当前进度值
属性：
- high:规定的较高的值
- low:规定的较低的值
- max:最大值
- min:最小值
- value:当前值

<meter min="0" high="80" low="40" value="30" max="100"></meter>
<meter min="0" high="80" low="40" value="60" max="100"></meter>
<meter min="0" high="80" low="40" value="90" max="100"></meter>

7.H5-新增的表单事件

oninput:监听当前指定元素内容的改变，只要内容改变（添加内容，删除内容），就会触发这个事件
oninvalid:当验证不通过时触发,可以自定义提示信息（setCustomValidity（））

oninput事件区别于onkeyup事件：

• onkeyup:键盘弹起的时候触发，每一个键的弹起都会触发一次

8.H5-新增多媒体标签

（1）audio：音频
属性：
- src:路径
- controls:控制器面板
- autoplay:自动播放
- loop:循环

<audio src="../../../前端/素材/song.mp3" controls="controls" autoplay></audio>

（2）video：视频
属性：
- src:路径
- controls:控制器面板
- autoplay:自动播放
- loop:循环
- width:宽度
- height:高度
- poster:当视频还没完全加载，或者用户还没有点击播放前的默认显示的画面，默认显示当前视频文件的第一幅画面

<video controls>
    <source src="../mp4/mov_bbb.mp4" type="video/mp4">
    <source src="../mp4/mov_bbb.webm" type="video/webm">
    您的浏览器不支持
</video>

注意：
当设置宽高的时候，一般情况下只设置宽度或高度，让其自动的等比缩放，如果同时设置宽度和高度，那么视频并不会调整到设置的宽高，除非设置的刚好是等比例，一般只设置一个属性即可
(3)HTML5 Audio/Video中常用的方法、属性、事件

1.常用方法：
load():加载
play():播放
pause():暂停
js没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法–dom元素
2.常用属性：
currentTime:视频播放的当前进度
duration:视频的总时间
paused:视频播放状态
3.常用事件：
oncanplay:事件在用户可以开始播放视频/音频时触发
ontimeupdate:通过该事件来报告当前的播放进度
onended:播放完时触发–重置

9.H5-获取DOM元素方式

（1）querySelector获取单个元素，如果获取的元素有多个，只会返回满足条件的第一个

• 参数：选择器名称
  • 如果是类选择器，必须添加.
  • 如果是id选择器，必须添加#

（2）获取满足条件的所有元素：querySelectorALL（）

10.H5-操作元素类样式

（1）add方法添加指定的类样式，一次只能添加一个类样式
（2）remove方法:移除指定名称的样式（不是移除类属性），一次只能移除一个
（3）toggle方法：切换元素样式，如果之前没有指定名称的样式则添加，有则移除
（4）contain方法：判断元素是否包含某个指定的类样式，包含返回true，不包含返回false

 //classList:当前元素的所有样式列表--数组
 document.querySelector("li").classList.add("red");
 //document.querySelector("li").className("red underline");//添加新样式的同时，要指定原有的样式，否则会覆盖掉原有的样式

 document.querySelector(".blue").classList.remove("blue");

 document.querySelectorAll("li")[2].classList.toggle("green");

 var flag= document.querySelectorAll("li")[3].classList.contains("underline");

11.H5-自定义属性

规范：
1.data-开头
2.data-后面至少有一个字符
建议：
- 名称应使用小写，不要包含任何大写字母
- 名称中不能有任何特殊符号
- 名称不要用纯数字

<p data-school-name="itcast">好好学习</p>

<script>
    window.onload=function(){
        var p=document.querySelector("p");
        /*
            获取自定义属性的值
            将data-后面的单词使用驼峰命名法连接,必须使用camel合法获取，否则为undefined，无法获取到
        */
        var value=p.dataset["schoolName"];
        console.log(value);
    }
</script>

12.H5-网络监听接口

online:网络连接时触发
offline:网络断开时触发

 window.addEventListener("online",function(){
        alert("网络连通了");
    });
 window.addEventListener("offline",function(){
      alert("网络断开了");
  })

13.H5-全屏接口

全屏操作的主要方法和属性:
1.requestFullScreen():开启全屏显示
不同浏览器需要添加不同的前缀： Chrome;webkit firefox:moz ie:ms opers:o
2.cancelFullScreen():退出全屏显示
只能使用document来实现
3.fullScreenElement():是否是全屏状态
只能 使用document来实现

if(document.fullscreeElement || document.webkitFullscreenElement || document.mozFullScreenElement ||msFullscreenElement){
	alert(true);
}else{
    alert(false)
}

14.H5-拖拽接口

在h5中如果要拖拽，就必须为元素添加draggable=“true”,图片和超链接默认可以拖拽

拖拽事件
被拖拽元素:
ondrag:应用于拖拽元素，整个拖拽过程都会调用—持续
ondragstart:应用域拖拽元素，当拖拽开始时调用
ondragleave:应用于拖拽元素，当鼠标开始拖拽元素时调用
ondragend:应用于拖拽元素，当拖拽结束时调用
目标元素：
ondragenter:应用于目标元素，当拖拽元素进入时调用
ondragover:当保留在目标元素上时调用
ondrop:当在目标元素上松开时调用
ondragleave:当鼠标离开目标元素时调用

 document.ondragstart=function(e){
  console.log(e);
  e.target.opacity=0.5;//设置被拖拽元素的透明度
  /*通过dataTransfer来实现数据的存储与获取
      setData(format,data)
      format:数据的类型 text/html  text/uri-list
      Data：数据，一般来说是字符串
  */
  e.dataTransfer.setData("text/html",e.target.id);
};
 document.ondragend=function(e){
      e.target.opacity=1;
  };
  document.ondragleave=function(e){
      console.log("ondragleave");
  };
  document.ondrag=function(e){
      console.log("ondrag");
  }
  //目标元素
  document.ondragenter=function(e){
  }
  document.ondragover=function(e){
      e.preventDefault();//阻止默认事件
  }
  // 浏览器会默认阻止ondrop事件，那么就必须在ondragover中阻止浏览器的默认行为
  document.ondrop=function(e){
      // 添加被拖拽的元素到当前目标元素
      var id=e.dataTransfer.getData("text/html");
      e.target.appendChild(document.getElementById(id));//将被拖拽元素添加到目标位置
  }
  document.ondragleave=function(e){
  }

15.H5-地理定位接口

参考：https://www.w3school.com.cn/html5/html_5_geolocation.asp
几个IP获取地理位置的API接口：https://cloud.tencent.com/developer/article/1152362

16.H5-FileReader读取文件

方法：
- readAsText():读取文本内容。返回文本字符串，默认编码是UTF-8
- readAsBinaryString():读取任意类型的文件，返回二进制字符串，这个方法不是用来读取文件展示给用户看的，而是存储文件
例如：读取文件的内容，获取二进制数据，传递到后台，后台接收了数据之后，再将数据存下
- readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL。DataURL是一种将文件（这个文件一般是指图像或者能够嵌入到文档的文件格式）嵌入到文档的方案，DataURL是将资源转换成base64编码的字符串形式，并且将这些内容直接存储在url中—优化网站的加载速度和执行速度
- abort():中断读取

注意：readAsDataURL()方法
- 没有返回值:void 但是读取完文件之后会将读取的结果存储到文件读取对象的result中
- 需要传递一个binary large object:文件（图片或者其他可以嵌入到文档的类型）

//实现图片即时预览
<form action="">
  文件： <input type="file" name="myFile" id="myFile"  onchange="getFileContent();"><br>
  <input type="submit">
</form>
<img src="" alt="">
<script>
function getFileContent(){
  //1.创建文件读取对象
  var reader=new FileReader();
  //2.读取文件，获取DataURL
  var file=document.querySelector("#myFile").files;//文件存储在file表单的files属性中，它是一个数组
  reader.readAsDataURL(file[0]);
  reader.onload=function(){
  	document.querySelector("img").src=reader.result;
      }
  }
</script>

注意：
FileReader:提供一个完整的事件模型，用来捕获文件的状态
onabort:读取文件中断片时触发
onerror:读取文件错误时触发
onload:文件读取成功完成时触发
onloadend:读取万和城呢个时触发，无论成功还是失败
onloadstart:开始读取时触发
onprogress:读取文件过程中持续触发

17.H5-web存储

1.cookie:存储容量4k左右
2.sessionStorage:存储数据到本地，存储的容量为5MB左右
特点：
（1）数据存储在当前页面的内存中
（2）它的生命周期为关闭当前页面，关闭页面数据会自动清除
方法：
setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的value值
clear():清空所有鵆的内容
3.localStorage:存储数据到本地，存储容量大约20MB
特点：
（1）不同浏览器间不能共享数据
（2）同一浏览器的不同窗口可以共享数据
（3）永久生效，它的数据存储在硬盘上，并不会随之页面或者浏览器的关闭而清除，如果要清除可以手动清除

//存储数据
window.sessionStorage.setItem("userName",name);
//获取数据
//注意：如果找不到对应名称的key,那么会获取到null
window.sessionStorage.getItem("userName");
//删除数据
//注意：在删除时如果key值错误，则不会报错，也不会删除数据
window.sessionStorage.removeItem("userName");

18.应用程序缓存

使用HTML5，通过创建cache manifest文件，可以创建web应用的离线版本

优势：
(1) 可配置需要缓存的资源
(2) 网络无连接时仍可用
(3) 本地读取缓存资源，提升访问速度，增强用户体验
(4) 减少请求，减轻服务器负担

Cache Mainfest基础：
1.如果需要应用程序缓存，请在文档标签中包含mainfest属性

<html lang="en" manifest="demo.appcache">

每个指定了manifest的页面在用户对齐访问时都会被缓存，如果未指定manifest属性，则页面不会被缓存（除非在manifest文件中直接指定了该页面）
manifest文件建议的文件扩展名是:".appache"

2.manifest文件：简单的文本文件，告知浏览器被缓存的内容（以及不缓存的内容）

a.CACHE MANIFEST:开始
b.CACHE：在此标题下列出的文件将在首次下载后进行缓存
c.NETWORK:在此标题下列出的文件需要与服务器的连接，且不会被缓存
d.FALLBACK:在此标题下列出的文件规定当页面无法访问时的回退页面

3.完整的demo.appache文件

CACHE MANIFEST
#上一句必须放置在第一行

#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/my.jpg
# *:代表所有文件

#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK
../images.dog.jpg

#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
../images/head.jpg ../images/banner.jpg

# /:代表所有文件

4.配置：manifest文件需要配置正确的MIME-type，即"text/cache-mainfest",必须在web服务器上进行配置
相关参考链接：
VScode开启本地服务器及本地调试：https://www.jianshu.com/p/9f332d67d90f
Win10打开internet信息服务的方法:https://jingyan.baidu.com/article/a17d5285ecafef8099c8f279.html
配置：http://www.360doc.com/content/15/0414/16/15821544_463157243.shtml