首页 > 代码库 > H5总结
H5总结
1.新增的语义化标签：
<nav>: 导航
<header>： 页眉
<footer>： 页脚
<section>：区块
<article>： 文章
<aside>： 侧边栏
<progress>： 进度条
2.兼容处理
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName‘)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName‘)来创建一遍，这样IE低版本也能正常解析HTML5新标签了，但在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题，这个库文件会帮自动通过document.createElement(‘tagName‘)创建所有HTML5的新标签。
3.微数据
微数据是在如 span、div 的标签内添加属性，让机器（如搜索引擎）识别其含义，某些特定类型的信息，例如评论、人物信息或事件都有相应的属性，用来描述其含义，可以理解成新语义标签的一种补充。
4.WAI-ARIA
WAI-ARIA[1] , 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，让残障人士能无障碍地访问网页上的动态内容。
5.输入类型
<input type="email">：输入邮箱格式 <input type="tel">:输入手机号码格式
<input type="url">:输入url格式 <input type="number">: 数字格式
<input type="search">: 搜索框 <input type="range">: 自由拖动滑块
<input type="color">:拾色器 <input type="time">:
<input type="date">: <input type="datetime">:
<input type="month">: <input type="week">:
6.表单
1.表单元素：
<datalist>： 数据列表 <keygen>： 生成加密字符串
<output>：输出结果 <meter>：度量器
2.表单属性：
1.<input type="text" placeholder="请输入用户名">： 占位符
2.<input type="text" autofocus> ：自动获得焦点
3.<input type="file" multiple>： 多文件上传
4.<input type="text" autocomplete="off"> 自动完成
5.<input type="text" form="某表单ID">
6.<form novalidate></form>： 关闭验证
7.<input type="text" required>： 必填项
8.<input type="text" pattern="\d">：自定义验证
7.【多媒体】以前用flash，现在有H5新标签：
1.音频 <audio>
可以通过附加属性可以更友好控制音频的播放，如：
autoplay ：自动播放
controls ：是否显不默认播放控件
loop ：循环播放
<audio controls autoplay loop="3">
<!-- 通过source标签指定多格式音频文件-->
<source src="http://www.mamicode.com/music/See You Again.mp3">
<source src="http://www.mamicode.com/music/See You Again.wav">
<source src="http://www.mamicode.com/music/See You Again.ogg">
</audio>
2.视频 <video>
autoplay ：自动播放
controls ：是否显示默认播放控件
loop ：循环播放
width ：设置播放窗口宽度
height ：设置播放窗口的高度
8.DOM扩展
1.获取元素
1、document.getElementsByClassName (‘class‘) 通过类名获取元素，以伪数组形式存在。
2、document.querySelector(‘selector‘) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll(‘selector‘) 通过CSS选择器获取元素，以伪数组形式存在。
2.类名操作
1、Node.classList.add(‘class‘) 添加一个class类名
2、Node.classList.remove(‘class‘) 移除一个class类名
3、Node.classList.toggle(‘class‘) 切换class，有则移除，无则添加
4、Node.classList.contains(‘class‘) 检测是否存在一个class类名
Node指一个有效的DOM节点，是一个通称。
3.自定义属性
格式：data-*=""；
例如：data-info="我是自定义属性"，通过Node.dataset[‘info‘] 我们可获取到自定义的属性值。
特点：自定义属性全部必须是以data-开头的，只要是符合这种格式就是自定义属性。
Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。
假设某元素 <div id="demo" data-name="itcast" data-age="10">
var demo = document.querySelector(‘#demo‘);
1、读取 demo.dataset[‘name‘] 或者 demo.dataset[‘age‘]
2、设置demo.dataset[‘name‘] = ‘web developer‘
注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
<div data-my-name="lining"> 这样获取Node.dataset[‘myName‘]
总结：
1.获取一个DOM节点，并且这个DOM节点定义了一些自定义属性
2.通过Node.dataset,管理/读取/设置自定义属性
3.Node.dataset.属性
4.Node.dataset.属性 = “属性值”
9.新增API
1.网络状态
我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值。
window.online用户网络连接时被调用
window.offline用户网络断开时被调用
2.全屏
HTML5规范允许用户自定义网页上任一元素全屏显示。
1、Node.requestFullScreen() ：开启全屏显示
2、Node.cancelFullScreen() ：关闭全屏显示
由于其兼容性原因，不同浏览器需要添加前缀如：
webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
3、document.fullScreen：检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
全屏伪类选择器
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
3.文件读取
通过FileReader对象可以读取本地存储的文件，使用 File 对象来指定所要读取的文件或数据。
File对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer。
4.FileList对象
由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个FileList对象（伪数组形式）。
<input type="file" multiple class="file">
// 获取file表单元素
var file = document.querySelector(‘.file‘);
file.onchange = function () {
console.log(file.files); //FileList {0: File, length: 1}
}
5.FileReader对象
HTML5新增内建对象，可以读取本地文件内容。
var reader = new FileReader; 可以实例化一个对象
实例方法
1、readAsDataURL() 以DataURL形式读取文件
事件监听
onload 当文读取完成时调用
属性
result 文件读取结果
<script>
// 获取file表单元素
var file = document.querySelector(‘.file‘);
file.onchange = function () {
// 获取第一个文件信息
var f = this.files[0];
// 实例化一个读取器
var reader = new FileReader();
console.log(reader);
// 读取文件
reader.readAsDataURL(f);
// reader.readAsBinaryString(f);
// reader.readAsText(f);
// 当文件过大，不能立即读完
// 通过事件监听进度
reader.onload = function () {
console.log(this.result);
document.querySelector(‘img‘).src = this.result;
}
}
</script>
10.拖拽
1.拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
设置了draggable="true"属性的元素，可以被拖拽了；其中<img>、<a>标签默认是可以被拖拽的;
2.目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
页面中任何一个元素都可以成为目标元素
3.事件监听
根据元素类型不同，需要设置不同的事件监听
11.地理定位
1.获取地理信息
通过IP地址、三维坐标、GPS、Wi-Fi、手机信息等多种方式获取地址信息，如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
2.隐私
HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
3.API详解
1、获取当前地理信息
navigator. geolocation.getCurrentPosition(successCallback, errorCallback, options) ;
2、重复获取当前地理信息
navigator. geolocation.watchPosition(successCallback, errorCallback, options);
当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
当获取地理信息失败后，会调用errorCallback，并返回错误信息error
可选参数 options 对象可以调整位置信息数据收集方式
a) enableHighAccuracy 高精度模式 true/false
b) timeout 超时设置，单位为ms
c) maximumAge表示浏览器重新获取位置信息的时间间隔，单位为ms
navgator.geoloation.getcurrentPosition(success,error,{
enableHighAccuracy: true;
timeout : 3000
maximumAge: 1000
});
12.应用
在现实开发中，把获得到的客户的具体信息当做参数通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>
// 提供了一个对象 navigator.geolocation
// 此对象下有一个方法 getCurrentPosition(); 是用来获取用户当前位置
// 成功的回调
function success(position) {
// alert(1);
console.log(position);
}
// 失败的回调
function error(err) {
console.log(‘error‘);
console.log(err);
}
// 获得用户当前信息
// navigator.geolocation.getCurrentPosition(success, error, {
// // enableHighAccuracy: true,
// // timeout: 3000,
// // maximumAge: 1000
// });
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude; // 纬度
var longitude = position.coords.longitude; // 经度
// 查看地理信息
console.log(position);
/********************/
// 这些都是写死
var map = new BMap.Map("container"); // container表示主到哪个容器
// 把经度纬度传给百度
var point = new BMap.Point(longitude, latitude);
// 调用方法
map.centerAndZoom(point, 15);
/****************************/
// 只写上面三行就可出现地图了，并且会定位
// 定义好了一个图片标记
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
// 创建标注
var marker = new BMap.Marker(point, {icon: myIcon});
// 调用方法
map.addOverlay(marker);
});
</script>
</body>
13.历史管理
提供window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
1.旧版本
history.back() 回退
history.forward() 前进
history.go(n) 前进/后退n步
history.length历史记录条数
2.新增方法
1、pushState(data, title, url) 追加一条历史记录
data用于存储自定义数据，通常设为null
title网页标题，基本上没有被支持，一般设为空
url 以当前域为基础增加一条历史记录，不可跨域设置
2、replaceState(data, title, url)
与pushState()基本相同，不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
14.事件监听
onpopstate事件，当前进或后退时则触发，通过事件对象ev.state可以读取到存储的数据。
15.Web存储
传统:document.cookie来存储:
缺点：存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便；
H5新增：
1.window.sessionStorage：
特性：
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
2.window.localStorage：
特性：
1、永久生效，除非手动删除
2、可以多窗口共享
以上两者的特性：
1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储
16.方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
17.其它
WebSQL、IndexDB
18.应用缓存
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
1.优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担
2.缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。
3.manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源
CACHE MANIFEST
#version 1.0.0
#缓存一些资料，在离线时使用
CACHE:
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg
#当处于网络连接时可以更新
NETWORK:
./css/main.css
FALLBACK:
./online.html ./offline.html
./css/online.css ./css/offline.css
CACHE:
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg
19.其它
1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
20.多媒体
方法：load()、play()、pause()
属性：currentSrc、currentTime、duration
事件：ontimeupdate，onended等
21.应用
1、自定义视频播放器
H5总结