HTML5 （0106）
1、文档声明
<!DOCTYPE html>
2、字符编码设置
<meta charset="UTF-8">
3、验证 (http://validator.w3.org/)
HTML5新增的语义化标签
1、语义化标签：说明页面内容，便于搜索引擎寻找该内容；
优点：根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码，
同时让浏览器的搜索引擎更好的解析和收录。
<article></article> 定义文章
<header></header> 头部
<nav></nav> 导航
<main></main> 主要区域
<section></section> 文档中的段落，某一区块
<aside></aside> 和section类似
<footer></footer> 底部，页脚
tips:section和aside可以归属为main的子标签
<mark></mark> 标记（很少用）
<progress></progress> 进度条（很少用）
该标签具有属性：max,min,value；
<figure> 表示单元（没见过，很少用）
<figcaption></figcaption> 表示单元的标题
</figure>
2、ie8以下的浏览器不识别H5标签
解决方法：引入一个js插件，放在head标签中；
<!--[if It IE 8]-->
<script src="html5shiv.js"></script>
<!--[endif]-->
tips:该段代码这样设置只有在IE8内才会识别，其余版本会解析成注释；
表单输入类型
1、效果如下图所示
<fieldset>
<legend>标题</legend>
//下面写表单元素input等
</fieldset>
2、input系列新属性
<input type="email"> 邮箱输入框，会对输入的内容进行自动验证；
type="url" 网址输入框，需要加http或https协议名；
type="search" 输入框，带有清空内容的按钮；
type="tel" 电话号码，在移动端将会自动弹出数字键盘；
type="number" 很少用，表示数字，有加减按钮，有max，min，value，step属性；
type="range" 很少用，表示滑块，有min，max，step；
type="time" 时间，显示时与分，有上下按钮，如下图；
type="datetime-local" 本地时间，可以调整年月日时分；
type="date" 带有年月日，带有日历选择框，value：xxxx-xx-xx；
type="color" value="#666666"，必须是六位十六进制；
type="file" 上传文件，加入了multiple属性则可以多文件上传；
3、datalist数据列表
<input type="text" list="course">
<datalist id="course">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</datalist>
tips:input中用list，datalist用id，二者名称相同即进行关联；
option中存放了关联字，当在input中输入数据时，将会显示关联字；
4、input属性
placeholder=""，作为初始显示值；
autofocus 自动获取焦点，没有值；
autocomplete="on" 自动完成，值为on或off，默认为on；
pattern="[a-z]{3}" 指定了输入框的验证方式，其值为正则表达式；
required 拥有该属性的input内容不能为空，否则无法提交；
5、新事件
oninput 用户输入内容时触发
oninvalid 验证不通过时触发
6、新方法
this.setCustomValidity 修改验证提示；
多媒体
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="xxx.mp3">
<source src="xxx.ogg">
<source src="xxx.wmv">
</audio>
tips:在source中提供多种格式的资源，多种资源便于兼容不同浏览器。
<video></video>标签与之类似。
DOM新增属性
获取元素：
document.querySelector();
document.querySelectorAll();
类名操作：
node.classList.add();
node.classList.remove();
node.classList.contains();
node.classList.toggle()
自定义属性
data-*；
data-*-*;
node.dataset.*;
eg:document.querySelector("a").dataset.cont="world";
tips:data-*的属性形式在一些插件使用较多，例如bootstrap；
Review_正则表达式
1、元字符
. 除以\n之外的所有单个字符；
\ 转义字符；
| 左右表达式出现一次即true，为了避免歧义需要加()；
eg：1a||b32，写成1(a||b)32;
() 优先级，分组
2、量词
？ 某个字符出现0-1次；
+ 一次或多次；
* 0-n次；
{n} n为正整数，出现n次；
{n, }
{n,m}
3、范围
[0-9]
[a-z]
[A-Z] (支持连写)
\d 数字，digital;
\D 非数字;
\s 空白字符，space;
\S 非空白字符;
\w 单词，word;
\W 非单词；
^ 开头;
$ 结尾;
汉字编码 [\u4e00-\u9fa5];
HTML5_JS新方法 （0112）
网络状态监测
window.online 用户连接时触发该事件；
window.offline 用户断开连接时触发该事件；
文件读取
FileReader对象
<body>
//页面结构很简单，一个img用于显示图片，一个file用于上传图片，一个button用来点击；
<input type="file">
<button>显示图片</button>
<img src="" alt="">
<script>
//获取元素
var file=document.querySelector('input');
var button=document.querySelector('button');
var img=document.querySelector('img');
//点击按钮后触发事件
button.onclick=function(){
var reader=new FileReader(); //创建一个fileReader对象；
reader.readAsDataURL(file.files[0]); //获取元素中上传的文件，
//file.files是一个数组，包含了上传的文件的全部信息；
reader.onload=function(){ //文件读取完成之后触发事件；
console.log(reader.result);
img.src=reader.result; //读取的内容保存在了reader.result属性里，赋值给img.src；
}
}
</script>
</body>
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc
视频API
方法： load() 加载；
play() 播放；
pause() 暂停；
属性： currentTime 视频播放的当前进度；
duration:视频的总时间；
事件：
oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发；
ontimeupdate: 通过该事件来报告当前的播放进度，视频播放时不断的触发；
onended: 播放完时触发；
全屏： video.webkitRequestFullScreen();
拖拽事件
分为两种，
第一种是拖拽元素，在元素中添加属性draggable="true"，即可成为拖拽元素；
第二种是目标元素；
1、对于拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用；
ondragstart 应用于拖拽元素，当拖拽开始时调用；
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用；
ondragend 应用于拖拽元素，当拖拽结束时调用；
2、对于目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用；
ondragover 应用于目标元素，当停留在目标元素上时调用；
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用；
ondragleave 应用于目标元素，当鼠标离开目标元素时调用；
Web存储
大致分为三种：cookie、sessionStorage、localStorage;
1、cookie存储；
缺点：存储量较小，仅4K，存储数据时进行了加密，解析复杂；
2、sessionStorage，会话存储，打开一个URL——→关闭页面 ——→即为一个会话；
生命周期：从打开浏览器开始到关闭浏览器结束；
主要存放一些小容量的临时数据，同一窗口下数据共享；
容量：5M；
3、localStorage，本地存储；
永久存在，除非手动删除；
可以多个窗口共享数据；
容量：20M；
方法：
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
eg: window.sessionStorage.setItem('name','张飞');
window.sessionStorage.clear();
缓存清单CACHE
离线存储，HTML5中我们可以轻松的构建一个离线（无网络状态）应用，
只需要创建一个cache manifest文件。
manifest格式：新建文件，名称为demo.appcache，以下为格式；
CACHE MANIFEST
CACHE:
img1.jpg
#指定我们需要缓存的静态资源，如.css、image、js等
NETWORK:
*
#指定需要在线访问的资源，可使用通配符
FALLBACK:
one.css two.css
#当前页面无法访问时退回的页面(回退;后退)，
#在这里，找不到one.css将会使用two.css取代；
优势：
1、可配置需要缓存的资源；
2、网络无连接时应用仍然可用；
3、本地读取缓存资源，提升访问速度，增强用户体验；
4、减少请求，缓解服务器负担；
tips:chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
地理定位
window.navigator.geolocation
navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息；
获取成功时调用的函数，失败时的函数，用options可调整位置信息数据收集方式；
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息；
position.coords.latitude纬度；
position.coords.longitude经度；
speedNaN 速度；
accuracy 精度，98；
关于视频音频的属性和方法
http://blog.poetries.top/2016/12/30/video-audio/
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
