HTML5 API – by gxj 2017-08-18
1.html5新增标签
1.1 语义化标签
1.2 新增的标签.
1.3 智能表单,增加表单的type值,增加了相应的验证,比如required…,还可以实现行内正则的验证,不推荐。注意：智能表单一般用于移动端,主要弹出不同类型的软键盘
<img src="img/html5form.png" alt="">
1.4 网页多媒体
1.41 音频 audio
“`
```
1.42 视频 [video](vidio.html)
<video controls="controls" poster="toy.png" autoplay="autoplay">
<source src="**.ogg" type="video/ogg">
<source src="**.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf" width="100%" height="100%" id="movie_player">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="allowFullScreenInteractive" value="true">
<param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&ShowId=0&category=85&Cp=0&ev=1&Light=on&THX=off&unCookie=0&frame=0&pvid=1439005764768c9QpaT&uepflag=1&Tid=0&isAutoPlay=true&Version=/v1.0.1080&show_ce=0&winType=interior&Type=Folder&Fid=25977506&Pt=0&Ob=1&plchid=z&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&pageStartTime=1439005764766">
<param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf">
<div class="player_html5">
<div class="picture" style="height:100%">
<div style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></div>
</div>
</div>
</object>
</video>
视频设置相关属性
<img src="img/video.png" alt="">
2.html5新增的JavaScript API
2.1 新增的选择器API
JS多了一个原始支持，类似jqueryDOM选择器
document.getElementById() 需要给DOM元素设置ID
document.querySelector(selector)选中一组当中的第一个元素 可以通过CSS选择器的语法找到DOM元素
document.getElementsByTagName()
document.querySelectorAll('.item')选中所有类名为item的元素
1. document.querySelector(selector);
2. 返回第一个满足选择器条件的元素 一个dom对象
3. document.querySelectorAll('.item');
4. 返回所有满足该条件的元素 一个元素类型是dom类型的数组
5. $('.item')
6. 返回一个jQuery对象（dom元素的数组）
7. 本质上jquery方式和qs方式都是获取DOM数组， 只不过jquery会多一些其他成员
8. DOM数组的每一个成员注册事件不能像jquery一样直接注册， 必须分别给每个元素注册
9. h5就是将我们经常需要的操作又包装一层
字符串方法
1. length
2. charAt(index)
3. charCodeAt(index)
4. indexOf(字符):查找字符，如果找到返回该字符第一次出现的位置，否则返回-1
5. lastIndexOf(字符):
6. substring(start,end)
7. substr(start,length)
8. slice(start,end)
9. split()字符串转成数组
10. String.formCharCode()把ascII转成字符
数组方法
* length
* push()
* pop()
* unshift()
* shift()
* slice(start,end)
* splice()
* join()
* cancat()
* reverse()
* sort()
2.2 元素.classList
1. 新H5中DOM对象多了一个classList属性，是一个数组
2. add 添加一个新的类名
3. remove 删除一个的类名
4. contains 判断是否包含一个指定的类名
5. toggle 切换一个class element.toggle('class-name',[add_or_remove])
6. toggle函数的第二个参数true为添加 false删除
2.3 新增Data API
data-*有两种设置方式，可以直接在HTML元素标签上书写
<div id="test" data-age="24">
Click Here
</div>
其中的data-age就是一种自定义属性，当然我们也可以通过JavaScript来对其进行操作，HTML5中元素都会有一个dataset的属性
var test = document.getElementById('test');
test.dataset.my = 'Byron';
原生js操纵自定义属性
添加:dom对象.index=1;
dom对象.setAttribute(property,value)
读取：dom对象.index/dom对象.getAttribute(property)
删除:dom对象.removeAttribute(property)
**注意:
1. 我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-my = ‘Byron’;的形式。
2. 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式
3. IE11+支持**
2.4 访问历史 API
界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态
在HTML5中可以通过window.history操作访问历史状态，让一个页面可以有多个历史状态
- window.history.forward();
- window.history.back();
- window.history.go();
- 通过JS可以加入一个访问状态
- history.pushState(data,title,url);
//其中第一个参数data是给state的值；第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；第三个参数url是你想要去的链接；
5.HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState) 替换当前历史记录点replaceState) 监听历史记录点popstate。
2.5 全屏 API
JavaScript中可以通过调用requestFullScreen()方式实现指定元素或者窗口的全屏显示
var element = document.querySelector(‘…’);
element.requestFullScreen();
2.6 网页存储localstorage
1. 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同
2. localStorage的优势
localStorage拓展了cookie的4K限制
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
3. localStorage的局限
1) 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2) 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3) localStorage在浏览器的隐私模式下面是不可读取的
4) localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5) localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
浏览器支持情况
<img src="img/localstorage.jpg" alt="">
localStorage用法
1. 设置 localStorage[key]=val localStorage.setItem(key,value) localStorage.key=value.
2. 读取 localStorage[key] localStorage.getItem(key);
3. 删除 localStorage.removeItem(key) 删除指定的
localStorage.clear() 清空所有的localStorage。
json格式相互转化
var storage=window.localStorage;
storage.clear();
var data={
name:'lore',
option:'scholl',
hobby:'study'
};
//json的类型转换成字符串类型
var d=JSON.stringify(data);
console.log(d);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
2.7 离线存储 Application cache 可在本地web服务器下测试
据说是要被废弃
1. <html lang="en" manifest="cache.manifest">
2.新建一个后缀为manifest的文件，内容如下
CACHE MANIFEST
# version 1.0.1 //版本
CACHE: //离线缓存
index.html
script.js
style.css
NETWORK:
*
2.8 文件系统
* file API *
document.forms[0].filename.files[index]
name:文件名称
lastModified:最后修改时间
lastModifiedDate:修改的日期
size:文件大小
type:文件类型。FileReader
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以
及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
属性
FileReader.onload 读取完成
FileReader.result 读取结果
FileReader.error 读取错误
FileReader.readyState 当前文档的状态方法
FileReader.abort() 中断读取-无参数
FileReader.readAsArrayBuffer(file)
将文件读取为ArrayBuffer 对象 参数:文件
FileReader.readAsBinaryString(file)
将文件读取为二进制码 - 参数:文件
FileReader.readAsDataURL(file)
将文件读取为DataURL 参数:文件FileReader.readAsText(file)
将文件读取为文本 参数:文件
<img src="img/filereader.png" alt="">
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，
将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL
是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与
html 等格式的文件。处理事件
<img src="img/cl.png" alt="">
2.9 拖放操作 API
被拖拽的元素
拖拽元素的时候，被拖拽元素会触发以下事件
dragstart
drag
dragend
当鼠标点中元素并且开始移动时，就会触发dragstart事件（类比mousedown）拖拽过程中会持续不断地触发drag事件（类比mousemove）
松开鼠标取消拖拽时就会触发dragend事件（类比mouseup）
目标元素
当拖拽的元素拖到一个目标元素上时，目标元素会触发以下事件
dragenter
dragover
dragleave
drop
拖拽元素到目标上，就会触发dragenter事件（类比mouseover）,当拖动元素在目标元素中，就会持续触发dragover事件
离开目标元素，触发dragleave事件（类比mouseout）若拖放元素到了目标元素中（在目标元素中松开鼠标）， 就会触发drop事件而不会触发dragleave事件
DataTransfer从拖拽对象向投放区传递数据。DataTransfer有下面的属性和方法：types：返回数据的格式；getData()：返回指定格式数据；setData(, )：设置指定格式数据；clearData()：移除指定格式数据；files：返回已经投放的文件数组。
注意:一定要在目标元素的dragover事件中取消默认事件
document.body.contentEditable=true; 编辑网页
sublime插件安装
ctr+shift+p
搜索你要安装的插件,单击自动安装
sublime server/autofilename/markdown preview