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