H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

HTML5新增标签以及HTML5新增的api

1.H5并不是新的语言，而是html语言的第五次重大修改--版本

2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.

一.新增标签：

1.语义化：header nav aside article main footer

a.在支持语义化标签的浏览器，这些标签会被解析为div

b.如果不支持，则不会进行解析，如果需要使用则需要使用兼容处理

1.IE8及以下：完全不支持，兼容处理

2.在IE8以上，部分支持，但是一些语义化标签会被解析为行级元素，造成高度失效

3.将行级元素设置为块级元素的方式：

a.display:block

b.float:left|right

c.position:absolute

4.兼容处理：

a.可以通过document.crateElement动态的创建元素，但是创建好的元素在ie9以下会被当成行级元素，所以需要手动的设置为块级元素，不然高度属性会失效

b.建议直接引入一个第三方插件实现 IE9以下的html5窔兼容处理

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         header{

             width: 100%;

             height: 80px;

             background-color: red;

         }

         nav{

             width: 100%;

             height: 36px;

             background-color: green;

         }

         main{

             width: 100%;

             height: 400px;

             /*在ie8以上，main会被解析为行级元素，因为它不支持main这个语义化标签，所以手动设置成块级元素*/

             display: block;

             background-color: #ccc;

         }

         aside{

             width: 20%;

             height: 100%;

             float: left;

             background-color: #68c8ff;

         }

         article{

             width: 80%;

             height: 100%;

             float: left;

             background-color: #ff70f6;

         }

         footer{

             width: 100%;

             height: 80px;

             background-color: #ffb839;

         }

     </style>

 </head>

 <body>

 <script>

     /**

      * 方法一:

      * 通过js的createElement方法创建的浏览器不支持的元素默认都是行级元素

      */

     document.createElement("header");

 </script>

 <!-- 方法二:-->

 <!-- 进行IE8兼容处理一般引入一个js文件-->

 <!--[if lt ie 9]>

      <script  src="../js/html5shiv.min.js"></script>

 <![endif]-->

  <header class="header">header</header>

 <nav class="nav">nav</nav>

 <main class="main">

     <aside class="aside">aside</aside>

     <article class="article">article</article>

 </main>

 <footer class="footer">footer</footer>

 </body>

 </html>

二.新增表单标签和表单属性：

input type="email | tel | phone | number | search"

email:可以提供自动的格式验证，如果不通过则无法进行提交

tel:在px端没有任何作用，它的作用是在移动端通过叫出数字键盘

number:数字输入框

placeholder:占位提示文本

autofocus：自动获取焦点

autoComplete:自动完成：设置了自动完成同时这个表单元素的数据曾经成功的提交过,要求当前元素元素必须有name属性

required:要求必须填写

novalidate：它是表单属性，添加之后，表单元素的默认的验证会失效

pattern:确定正则验证

form:指定当前元素的依附的表单

meter:度量器：min max low high

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <form action="">

     用户名: <input type="text" name="userName"> <br>

     密码: <input type="password" name="userPwd"> <br>

     邮箱: <input type="email" name="userEmail"> <br>

     电话: <input type="tel" name="userPhone"> <br>

     出生日期: <input type="detetime-local"> <br>

     颜色: <input type="color"> <br>

     范围: <input type="range" min="0" max="1000" value="50"> <br>

     搜索: <input type="search" name="userKey"> <br>

     <input type="submit">

 </form>

 <script>

     <!--oninput 当当前元素的值发生改变的时候会持续的触发-->

     document.querySelector("[type=range]").oninput = function () {

             console.log(this.value);

     }

     document.querySelector("[type=tel]").oninput = function () {

         console.log(this.value);

     }

 </script>

 </body>

 </html>

设置提示信息

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <form action="" id="mother" >

     用户名: <input type="text" placeholder="请输入用户名" autofocus autocomplete="on" name="userName"> <br>

     邮箱: <input type="email" multiple name="myEmail"> <br>

     手机号码: <input type="text" required pattern="^(d{3,4})?1[35874]\d{9}$" name="myPhone"> <br>

     手机号码: <input type="tel" required pattern="^(\+86-)?1[35874]\d{9}$"> <br>

     文件选择: <input type="file" name="myFile" multiple> <br>

     <input type="submit">

 </form>

 <input type="text" name="myAdd" form="mother" >

 <script>

     /*oninput 只要值发生变化就会触发*/

     document.querySelector('[type=email]').oninvalid = function () {

         this.setCustomValidity('请输入正确的email');

     }

     document.querySelector('[type=tel]').oninvalid = function () {

             this.setCustomValidity('请输入11位手机号码');

     }

 </script>

 </body>

 </html>

H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

度量器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         input,meter{

             width: 100%;

             height: 30px;

             line-height:30px;

             margin-top:5px;

         }

     </style>

 </head>

 <body>

 <input type="number" min="0" max="100" value="0">

 <meter min="0" max="100" value="0" low="60" high="90"></meter>

 <script>

     document.querySelector('[type="number"]').oninput = function (e) {

             document.querySelector("meter").value = this.value;

     }

 </script>

 </body>

 </html>

H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

三.自定义属性及其例子

自定义属性

a.定义：以data-开头，后面接自定义名称，如果名称由多个单词组成，使用-进行分隔

b.获取值

js方式：dom元素.dataset['名称']。注意名称只需要data-后面的内容，如果名称由多个单词组成，则使用pascal命名法进行连接例如: data-user-name 取值是user-name和userName都可以

jq方式：jq对象.data("名称")

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!-- 自定义属性：我们经常需要存储的一些程序中需要使用到的数据

  数据的来源只有两种：

  1.如果能够获取到，则先进行获取

  2.如果不能获取到，则先存储再获取--自定义属性就是用来存储程序中需要使用的数据的

 -->

 <!--定义自定义属性

 格式: data- + 名称

 如果名称由多个单词构成，那么多个单词之间使用-连接

 -->

 <a href="javascript:void(0); " data-id="1" data-user-name="jack" data-age="20">编辑</a>

 <script>

     // 原生获取

     var  a = document.querySelector("a");

     var aId = a.dataset['id'];

     var aUserName = a.dataset['userName'];

     var aAge = a.dataset['age'];

     console.log(aId + ":" + aUserName + ":" + aAge);

 </script>

 <script src="../js/jquery.min.js"></script>

 <script>

     // JQ获取

     var id = $('a').data('id');

 //    var userName = $('a').data('user-name');  // 也可以获取值

 //    var userName = $('a').data('userName');  // 也可以获取值

     var userName = $('a').data().userName;  // 也可以获取值

     var age = $('a').data('age');

     console.log(id + ":" + userName + ":" + age);

 </script>

 </body>

 </html>

配合css的tab栏切换:

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         ul {

             list-style: none;

         }

         .wrapper {

             width: 1000px;

             height: 475px;

             margin: 0 auto;

             margin-top: 100px;

         }

         .tab {

             border: 1px solid #ddd;

             border-bottom: 0;

             height: 36px;

             width: 320px;

         }

         .tab li {

             position: relative;

             float: left;

             width: 80px;

             height: 34px;

             line-height: 34px;

             text-align: center;

             cursor: pointer;

             border-top: 4px solid #fff;

         }

         .tab span {

             position: absolute;

             right: 0;

             top: 10px;

             background: #ddd;

             width: 1px;

             height: 14px;

             overflow: hidden;

         }

         .products {

             width: 1002px;

             border: 1px solid #ddd;

             height: 476px;

         }

         .products .main {

             float: left;

             display: none;

         }

         .products .main.selected {

             display: block;

         }

         .tab li.active {

             border-color: red;

             border-bottom: 0;

         }

     </style>

 </head>

 <body>

 <div class="wrapper">

     <ul class="tab">

         <li class="tab-item" data-id="0">国际大牌<span>◆</span></li>

         <li class="tab-item" data-id="1">国妆名牌<span>◆</span></li>

         <li class="tab-item" data-id="2">清洁用品<span>◆</span></li>

         <li class="tab-item" data-id="3">男士精品</li>

     </ul>

     <div class="products">

         <div class="main">

             <a href="###"><img src="../images/guojidapai.jpg" alt=""/></a>

         </div>

         <div class="main">

             <a href="###"><img src="../images/guozhuangmingpin.jpg" alt=""/></a>

         </div>

         <div class="main">

             <a href="###"><img src="../images/qingjieyongpin.jpg" alt=""/></a>

         </div>

         <div class="main">

             <a href="###"><img src="../images/nanshijingpin.jpg" alt=""/></a>

         </div>

     </div>

 </div>

 <script src="../js/jquery.min.js"></script>

 <script>

     (function init(index) {

         var tab = document.querySelector('.tab');

         var items = tab.querySelectorAll('li');

         var products = document.querySelector('.products');

         var proImgs = products.querySelectorAll('.main');

         // 设置默认样式

         items[index].classList.add('active') ;

         proImgs[index].classList.add('selected');

         // for循环设置样式

         for (var i = 0; i < items.length; i++) {

             items[i].onclick = function () {

                 //排除重复点击

                 if(this.classList.contains('active')){

                   return ;

                 }

                 // 排他

                 tab.querySelector('.active').classList.remove('active');

                 products.querySelector('.selected').classList.remove('selected');

                 // 设置当前样式

                 this.classList.add('active');

                 proImgs[this.dataset['id']].classList.add('selected');

             }

         }

     })(1);

 </script>

 </body>

 </html>

H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

四.dataList

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <select name="" id="">

     <option value="1">java</option>

     <option value="2">php</option>

     <option value="3">mysql</option>

     <option value="4">linux</option>

 </select>

 <br><br>

 <!--datalist仅仅是数据列表，它必须依附于一个文本框才能看到效果-->

 <datalist id="subject">

     <option value="java">java说明</option>

     <option value="php">php说明</option>

     <option value="mysql">mysql说明</option>

     <option value="linux">linux说明</option>

 </datalist>

 <input type="text" placeholder="请输入学科名称" list="subject"><br><br>

 <!--特例!-->

 <!--如果datalist关联的文本框类型是url，那么datalsit的option的value的值必须包含http://-->

 <datalist id="urls">

     <option value="http://baidu.com">百度</option>

     <option value="http://souhu.com">搜狐</option>

     <option value="http://sina">新浪</option>

 </datalist>

 <input type="text" list="urls">

 </body>

 </html>

五.新增api：应用程序接口

（1）网络监听：可以监听网络是否连通

新增的网络监听api可以用来监听当前设备的网络是否断开还是连接

ononline:网络连接时触发

onoffline:网络断开时触发

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--新增的网络监听api可以用来监听当前设备的网络是断开还是在连接状态

 ononline: 网络连接时触发

 onoffline: 网络断开时触发

 -->

 <script>

     window.addEventListener('online',function () {

         console.log("网络连接了");

     });

     window.addEventListener('offline',function () {

         console.log("网络断开了");

     });

 </script>

 </body>

 </html>

(2)文件读取--图片预览

**文件读取：FileReader:文件读取对象。可以使用它进行文件的预览

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--

 从服务器上请求图片资源(对服务器增加压力)

 1.请求资源

 2.解析并渲染：从服务器返回的值都是字符串，意味着你如果想得到图片结果，还得对这个字符串进行解码操作-->

 <!--<img src="../images/l1.jpg" alt="">-->

 <img src="" alt="" width="300" height="150">

 <input type="file" name="myPhoto">

 <input type="submit">

 <script>

     var myfile = document.querySelector("[type='file']");

     var img = document.querySelector('img');

     myfile.onchange = function () {

         /*对于 file 类型的表单元素， 用户所选择的图片对象存储在file表单元素的files属性中，这个files属性的本质是一个列表数组，所以可以通过索引方式获取图片对象*/

         //console.log(myfile.files);

         var currentFile = myfile.files[0];

         console.log(currentFile);

         /*FileReader:

       * 1.创建

       * 2.读取：读取方法需要关注的两个地方：1.参数，需要文件对象  2.方法没有返回值，在读取完毕之后，会将读取结果存储在读取对象的result属性中

       *   readAsText():将指定的文件资源读取返回字符串，意味着它只能读取文本文件。返回的字符串的编码格式由参数2决定,如果没有设置，则使用默认编码。

       *   readAsBinaryString():读取文件数据，返回二进制数据。这个方法一般不会用来做文件的读取展示，一般用来做文件读取的传输

       *   readAsDataUrl():DataUrl它的本质就是一个base64编码的字符串，以data开头。它里面直接包含了数据。它可以加快文件的解析速度。

       *   blob:binary large object:二进制的大文件。所有的数据存储的本质都是二进制，说白了，这个参数需要一个文件对象

       *3.接收结果：读取器对象有一系列的方法事件，用来监听读取状态

       * onabort:读取中断触发

       * onload:读取成功后会触发

       * onloadend:无论读取成功还是失败都会触发

       * onprogress:读取过程中持续触发

       * onerror:读取出现错误时触发

       * onloadstart:开始读取时触发*/

         // 1.创建对象

         var reader = new FileReader();

         // 2.读取

         reader.readAsDataURL(currentFile);

         // 3.接收结果

         reader.onload = function () {

             console.log(reader.result);

             img.src = reader.result;

         }

     }

 </script>

 </body>

 </html>

readAsDataUrl():DataUrl它的本质就是一个base64编码的字符串，以data开头。它里面直接包含了数据。它可以加快文件的解析速度。

readAsDataURL(currentFile).result的内容是如下所示：

H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

六.全屏接口的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>

    <img src="../images/l1.jpg" id="img" alt="">

    <input type="button" id="full" value="全屏">

    <input type="button" id="cancelfull" value="退出全屏">

    <input type="button" id="isFull" value="是否否屏">

</div>

<script>

    var img = document.querySelector('div');

    /*全屏实现：requestFullScreen:但是它的兼容性，在不同的浏览器中需要对方法添加不同的前缀

      * chrome:webkit

      * firefox:moz

      * opera:o

      * ie:ms*/

    //        myIMg.requestFullScreen();

    //        myIMg.webkitRequestFullScreen();

    /*添加能力测试：测试下浏览器是否支持某种操作 --if*/

    document.querySelector('#full').onclick = function () {

        if(img.requestFullScreen){

            img.requestFullScreen();

        }else if(img.webkitRequestFullScreen){

            img.webkitRequestFullScreen();

        }else if(img.mozRequestFullScreen) {

            img.mozRequestFullScreen();

        }else if(img.oRequestFullScreen) {

            img.oRequestFullScreen();

        }else if(img.msRequestFullscreen) {

            img.msRequestFullscreen();

        }

    }

    /*退出全屏：cancelFullScreen：退出全屏是当前整个屏幕的行为，并不是某个dom元素的行为。所以调用退出全屏方法的时候，应该使用document

       * IE的退出全屏的方法中exitFullScreen*/

    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.oCancelFullScreen) {

            document.oCancelFullScreen();

        }else if(document.msExitFullscreen) {

            document.msExitFullscreen();

        }

    }

    /*判断是否全屏：fullScreenElement

       * 如果方法返回true,则说明是全屏状态，否则非全屏状态*/

    document.querySelector('#isFull').onclick = function () {

        if(document.fullScreenElement|| document.webkitFullscreenElement || document.mozFullScreenElement || document.oFullScreenElement || document.msFullscreenElement){

            alert('是全屏');

        }else{

            alert('不是全屏');

        }

    }

</script>

</body>

</html>

H5C3--语义标签以及语义标签IE8兼容，表单元素新属性，度量器，自定义属性，dataList,网络监听，文件读取

HTML5新增标签以及HTML5新增的api

一.新增标签：

1.语义化：header nav aside article main footer

二.新增表单标签和表单属性：

设置提示信息

度量器

三.自定义属性及其例子

四.dataList

五.新增api：应用程序接口

（1） 网络监听：可以监听网络是否连通

(2)文件读取--图片预览

readAsDataUrl():DataUrl它的本质就是一个base64编码的字符串，以data开头。它里面直接包含了数据。它可以加快文件的解析速度。

六.全屏接口的使用

（1）网络监听：可以监听网络是否连通