讲在前面：建议在IDE集成环境下开发学习。
HTML5
一、什么是H5？
- H5并不是一个新的语言，它只是HTML语言的第五次重大的修改----版本。
- 支持：支持所有的主流浏览器（Chrome、火狐、Safari、苹果、IE及9以上），IE8以下的不支持，需要考虑兼容性。
- 改变了用户与文档的交互方式。多媒体：video、audio、canvas等。
- 增加了新特性：语义特性、本地存储特性、网页多媒体、二维三维、特效（转换、过渡）。
- 相对于H4：
进步：抛弃了一些不合理不常用的标签和属性；
新增了一些标记和属性表单；
从代码角度看，H5的代码结构更加简洁。
webstorm快捷键生成HTML文档结构：
1. html:5+tab 生成HTML5代码结构
2. html:xt+tab XHTML过渡性文档类型
3. html:4s+tab 严格按照H4的请求标准进行解析
二、H5的语义化：
通俗来讲H5语义化它的本质就是div，只不过是换了名字而已，通过用正确的标签做正确的事情，实现见名知意的效果。
意义：让页面的内容结构化，结构更加清晰，便于浏览器、搜索引擎解析，提高浏览器的性能；使得代码容易阅读；SEO搜索引擎得以优化。但是需要注意的是使用期语义化标签时，需要考虑兼容性（IE8及其以下的浏览器不支持）。
兼容性处理：
- 可以为HTML创建一个元素
document.createElement("header");
document.createElement("nav");
//注意：创建的元素默认是行内元素，需要将其转化为块级元素
header, section, footer, aside, nav, main, article, figure, main {
display: block;
}
- 针对低版本的浏览器，引入html5shiv.js
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
三、H5表单认识
- 表单input中type属性值：email、tel（不起验证作用，主要是打开手机数字键盘）、url（必须是合法的包含协议）、number（包含max/min/value属性）、range、color、time、date、datetime、datetime-local、month、week等；
- 可以通过 setCustomValidity() 方法来改变默认提示的信息；
- 表单新属性：placeholder、autofocus、autocomplete、pattern、multiple，list（结合datalist的id号来使用）等；
- 表单新元素：datalist（需要配合上input输入框来使用）、Keygen、output；
- 表单事件：oninput（兼容输入框的改变事件，只要内容变化就会触发）、onkeyup（监听键盘的抬起事件）、oninvalid （监听表单验证事件）；
- 补充进度条：progress、meter（包含max/min/height/low/value属性）。
四、多媒体（audio、video）
<!--
embed：直接插入了视频文件，他的本质是调用本机上已经安装的软件，有兼容性
flash插件：安装flash插件，增加了成本，并且苹果系统不支持flash
-->
<!--
audio音频:
src：播放的音频文件 controls：音频控制面板 autoplay：自动播放 loop：循环
-->
<audio src="" controls autoplay loop></audio>
<!--
video视频:
src：播放的视频文件 controls：视频控制面板 autoplay：自动播放 loop：循环
width: 宽度 height：高度
注意：一般只需要设置宽与高一个即可，跟着比例自适应，当同是设置时，并不会跟着设置的宽高来进行缩放。
poster：当视频还没有下载或者用户还没有点击播放前，默认显示视频的第一帧画面，可以通过设置其路径来改变显示的画面
-->
<video src="" poster="" width="800" height="600" controls></video>
<!--
重点说明 source ：因为不同的浏览器对视频的支持格式不同，所以我们在进行添加视频的时候需要考虑兼容性，通过source
来添加不同格式的视频，让浏览器自己来选择
-->
<video controls>
<source src="mp4.mp4" type="video/mp4">
<source src="flv.flv" type="video/flv">
</video>
在实际开发中，直接通过标签的控件属性来确定播放器样式，在不同个浏览器间显示均不一样。为了保持一致，控件样式需要自定义实现。
五、H5元素新增操作
- 获取dom元素
querySelector()、querySelectorAll() //参数可以是选择器 - 操作元素样式类
通过classlist的方法：add()、item()、remove()、toggle()、
window.onload = function(){
//默认会获取到所有li元素中的第一个,add()方法一次只能添加一个
docuemnt.querySelector("li").classList.add("red");
docuemnt.querySelector("li").classList.add("pink");
//remove()方法一次只能删除一个（删除的是类中的值而不是class属性）
document.querySelector("li").classList.remove("pink");
//toggle()切换class属性值，有则切换，无则添加
document.querySelectorAll("li")[2].classList.toggle("green");
//item() 判断是否包含指定的名称的值，返回Boolean值
var res = document.querySelectorAll("li")[3].classlist.item("red");
}
六、自定义属性
- 定义及规范：
data-开头 data-后至少有一个字符，多个单词间使用 - 来连接
建议：名称中不要包含任何大写字符，不要包含特殊字符，不要包含纯数字
<p data-school-name="test" class="class">自定义属性</p>
<script>
let className = document.querySelector("p").className;
console.log(className);
let p = document.querySelector("p");
//通过dataset来获取自定义属性，必须使用camel驼峰命名法来获取
// var result = p.dataset['schoolname']; //data-schoolname
var result = p.dataset['schoolName']; //data-school-name
console.log(result);
</script>
七、H5接口介绍
- 网络状态改变事件
//ononline事件
// window.ononline = function(){};
window.addEventListener("online",function () {
alert("网络接通了");
});
//onoffline事件
window.addEventListener("offline",function () {
alert("网络断开了");
})
- 全屏、退出全屏及是否是全屏状态接口的使用
H5中全屏等相关操作方法或属性：requestFullScreen()、cancelFullScreen()、fullScreenElement；
<script>
/*全屏操作的主要方法和属性
* 1.requestFullScreen(): 开启全屏
* 兼容性处理，不同浏览器需要加不同的前缀,使用能力测试为不同浏览器添加不同的前缀
* Chrome：webkit Firefox：moz ie：ms opera：o
* 2.cancelFullScreen():退出全屏
* 退出全屏也不要添加前缀，不同浏览器需要通过document来退出全屏，是整个文档退出全屏显示
* 3.fullScreenElement: 是否是全屏状态,也只能通过document来判断
*
* 使用document的原因：是整个文档而不是某一个元素
* */
window.onload = function () {
let div = document.querySelector("div");
//考虑兼容性问题 全屏处理
document.querySelector("#full").onclick = function () {
if(div.requestFullScreen){
div.requestFullScreen();
}else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}else if(div.msRequestFullscreen){
div.msRequestFullScreen();
}
}
//退出全屏处理
document.querySelector("#cancelFull").onclick = function () {
if(document.cancelFullScreen){
document.cancelFullScreen();
}else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}else if(document.msCancelFullScreen){
document.msCancelFullScreen();
}
}
//判断是否是全屏状态
document.querySelector("#isFull").onclick = function () {
//注意：使用document判断 能力测试 ,只有Firefox是标准的
if(div.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.mozFullScreenElement){
alert(true);
}else{
alert(false);
}
}
}
/*
* 能力检测：被人们广泛接受的客户端浏览器检测性形式。其目的不是识别特定的浏览器而是识别浏览器的能力。
* 采用这种方式不用顾及特定浏览器如何如何，只要确定浏览器支持特定的能力就可以给出解决方案。
* */
</script>
- 文件读取FileRead
- readAsText(): 读取文本文件（可以使用Txt打开的文件），返回文本字符串，默认的编码是UTF-8
- readAsBinaryString(): 读取任意类型的文件，返回二进制字符串。该方法不是用来读取文件展示给用户看的，而是存储文件。例如：读取文件内容，获取二进制数据，传递给后台，后台接收到数据后，再将数据存储
- .readAsDataURL(): 读取文件获取一段以data开头的字符串，这段字符串的本质是DataURL。DateURL是将资源转化为base64编码的字符串形式，并将这些内容直接存储在url中，可以优化网站的加载速度和执行效率。
- abort(): 中断文件的读取
案例：实现一个即时预览的效果（更换头像操作等）
<!--
即时：当用户选择完图片之后就立马展示预览的处理 》》 onchange(当内容变化时触发)
预览：通过文件读取对象的readAsDataURL()方法完成
-->
<form action="">
上传图片：<input type="file" name="myFile" id="myFile" onchange="getFileContent();"><br>
<input type="submit">
</form>
<img src="" alt="">
<script>
//即时预览处理：
function getFileContent(){
//首先创建文件读取对象
let reader = new FileReader();
/*
读取文件，获取DataURL (readAsDataURL)
没有任何返回值void，但读取完文件后，他会将读取点后的结果存储在文件读取对象的result中
不要传递一个参数binary large object：文件（图片或者其他可以嵌入到文档的类型）
上传的文件存储在file表单元素的files属性中，他是一个数组
*/
let file = document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]);
/*
获取数据（FileReader提供了一个完整的事件类型，用来捕获读取文件的状态）：
onabort: 读取文件中断时触发
onerror：读取错误时触发
onload：读取文件成功完成时触发
onloadend：无论成功失败，读取结束时均触发
onloadstart：开始读取是触发
onprogress: 读取文件过程中持续触发
*/
reader.onload = function () {
//进行预览
// console.log(reader.result);
document.querySelector("img").src = reader.result;
}
}
</script>
-
拖拽接口
在实现拖拽效果的效果的时候，往往会从两个角度入手: 被拖拽的元素 + 目标元素
应用于被拖拽元素的事件：ondrag ：整个拖拽过程中都会调用 ondragstart ：当开始拖拽时调用 ondragend ：当拖拽结束时调用 ondragleave ：当鼠标离开拖拽元素时调用应用于目标元素的事件：
ondragenter ：当拖拽元素进入时调用 ondragover ：当停留在目标元素上时调用 ondrop ：当在目标元素上松开时调用 ondragleave ：当鼠标离开目标元素时调用
注意事项：
1.在选择拖拽元素与目标元素时，为了考虑到实现任意元素间的拖拽效果，需要将事件绑定给 document ，并通过事件捕获的形式来确定具体的元素（e.target）；
2.浏览器默认是阻止元素间的拖拽，因此需要在 ondragover 事件上，取消默认事件；
3.此外还需要注意：为了安全起见，尽量不要使用 全局变量，容易造成内存泄漏；
4. 通过dataTransfer来实现数据的存储与获。
5. 为了能够使得元素被拖动，我们需要给其设置属性：draggable=“true”;
<div class="box box1">
<p class="p1" id="p1" draggable="true">我是拖拽元素</p>
<p class="p1" id="p2" draggable="true">我是拖拽元素222</p>
</div>
<div class="box box2"></div>
<div class="box box3"></div>
<script>
//******拖拽事件：被拖拽元素 + 目标元素******
let obj = null; //一般情况下不推荐使用全局变量，容易造成内存泄漏，不安全
//应用与被拖拽元素的事件
document.ondragstart = function (e) {
let id = e.target.id;
obj = document.querySelector("#"+id);
// e.target.parentNode.style.borderWidth = '5px';
/*
通过dataTransfer来实现数据的存储于获取
setData(format,data);
format: 数据的类型， text/html text/uri-list
data: 数据，一般来说是字符串值
*/
e.dataTransfer.setData("text/html",e.target.id);
}
document.ondragend = function (e) {
// console.log("ondragend");
}
document.ondrag = function () {
// console.log("ondrag");
}
document.ondragleave = function () {
// console.log("ondragleave");
}
//应用与目标元素的事件
document.ondragenter = function (e) {
// console.log(e.target)
}
document.ondragover = function (event) {
//要想执行ondrop事件，需要在此处阻止浏览器默认事件
event.preventDefault();
}
//注意：浏览器会默认阻止ondrop事件，即默认阻止拖拽事件
//解决：必须在ondragover中阻止浏览器的默认事件
document.ondrop = function (e) {
// e.target.appendChild(obj);
//通过 e.dataTransfer.getData() 存储的数据，只能在drop事件中获取
var id = e.dataTransfer.getData("text/html");
console.log(e.target)
e.target.appendChild(document.getElementById(id));
}
document.ondragleave = function () {
// console.log("离开了目标元素")
}
</script>
- 地理定位接口
HTML5 Geolocation API 用于获得用户的地理位置。
<script>
<!--HTML5 Geolocation API 用于获得用户的地理位置-->
var x=document.getElementById("demo");
function getLocation(){
//能力测试
if (navigator.geolocation){
/*
navigator.geolocation.getCurrentPosition(success,error,option);
分别是获取地理信息成功之后的回调，失败之后的回调，调整获取当前地理信息的方式
option: 可以设置获取数据的方式
enableHighAccuracy:true/false: 是否使用高精度
timeout：设置超时时间，单位：ms
maximumAge：可以设置浏览器重新获取地理信息的时间间隔 ms
*/
navigator.geolocation.getCurrentPosition(showPosition,showError,{
enableHighAccuracy:true,
timeout:3000
});
}else{
// x.innerHTML="该浏览器不支持获取地理位置。";
x.innerHTML = "Geolocation is not supported by this.browser.";
}
}
/*
成功后的回调，如果获取地理信息成功，会将获取的地理信息传递给成功之后的回调
position.coords.latitude 纬度
position.coords.longitude 经度
position.coords.accuracy 精度
position.coords.altitude 海拔高度
*/
function showPosition(position){
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
/* 获取地理位置失败之后的回调 */
function showError(error) {
switch(error.code){
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERR:
x.innerHTML = "An unknown error occurred.";
break;
}
}
</script>
提示：在实际开发中，为了能够准确的获取到地理位置，往往会采用第三方接口。http://lbsyun.baidu.com/index.php?title=jspopular3.0
- web存储（sessionStorage，localStorage）
二者的主要区别：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。存储容量大约 5mb；
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。存储容量大约 5mb；
常用方法：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage存储的数据的生命周期是打开的当前的页面。
cookie：存储容量大约是 4KB；
- 应用缓存
H5通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本，缓存自己想要缓存的文件。
优势：
- 离线浏览 - 用户可在应用离线时使用它们；
- 速度 - 已缓存资源加载得更快；
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<!--创建方式：manifest = "应用缓存清单文件路径，建议该文件的扩展名为appcache，本质是一个文本文件"-->
<html manifest="demo.appcache">
文件格式 demo.appcache
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句
# “#”号后面是注释
#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表，例如：
../images/test.jpg
# "*"号代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/test2.jpg
#配置如果文件无法获取则使用指定的文件进行代替
FALLBACK:
../images/test3.jpg ../images/temp.jgp
# "/"代表所有文件
注意：manifest 文件需要正确的配置 MIME-type，即 “text/cache-manifest”。需要在web服务器上进行配置。
- 待续…
