第86天：HTML5应用程序标签和智能表单

一、HTML5应用程序标签

1、datalist需要数据载体 input list属性指向数据源

2、progress进度条

-webkit-appearance: none; /*如果要改默认样式要先取消默认样式 */

.my-progress::-moz-progress-bar { /*选中背景元素*/ /*兼容火狐浏览器*/
yellow;

}

.my-progress::-webkit-progress-bar { /*拿到progress的-webkit-progress-bar位置*/
yellow;
}
.my-progress::-webkit-progress-value {
blue;
}

<progress class="my-progress" value="40" max="100"></progress>

<meter max="100" low="40" high="90" optimum="100" value="90"></meter>

3、解决CSS3各个浏览器兼容问题需要添加私有前缀

<1> Firefox: -moz-

<2> Safari: -webkit-

<3> Opera: -o-

<4> IE: -ms-

4、网页 css、 js 存储在网络服务器上 http服务器

www.baidu.com 先去dns服务器查百度的IP地址，找到ip之后直接去访问这个ip ，这时候这些文件传到你电脑上，就能显示网页。

sublimeserver 就是在本机中开启了一个http服务器，局域网都能访问sublime打开的项目。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>应用程序标签</title>
     <style>
         .my-progress{
             -webkit-appearance: none;
         }
         .content::after{/*伪类 在div 后面继续添加内容*/
             content:'bbbbb';
             color:#f40;
         }
         .my-progress::-webkit-progress-bar{
             background-color: #fff;
         }
     </style>
 </head>
 <!--Sublime Server  不要stop直接退出-->
 <body>
     <div class="content">aaaaaa</div>
     <!--数据列表-->
     <input type="text" list="input_list">
     <datalist id="input_list"><!--数据列表呈现需要载体-->
         <opion value="laoma"></opion>
         <option value="list"></option>
     </datalist>
 
     <!--状态指示器-->
     <progress></progress>
     <!--进度条默认最大值是1-->
     <progress value="10" max="100" class="my-progress"></progress>
 </body>
 </html>
 
运行效果：

二、自定义属性

1、关键字：（‘data-id’，key）；

this是当前点击对象，他有一个dataset属性， dataset是去掉data-之后的值

当网页超链接多了之后，将分组标签写data属性，指向分组列表每一项的超链接数据源。

var data = {

小米note2：小米note2的超链接，

小米note：小米note的超链接，

小米5：小米5的超链接，

小米5s：小米5s的超链接，

}

data-links

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>data属性</title>
 </head>
 <body>
     <ul id="list">
         <!--<li data-age="18">zhangsan</li>-->
         <!--通过DOM存储与DOM对象强相关的数据-->
         <li data-id="1" data-age="18" data-gender="true">zhangsan</li>
         <li data-id="2" data-age="18" data-gender="false">zhangsan</li>
         <li data-id="3" data-age="18" data-gender="true">zhangsan</li>
     </ul>
     <div id="info"></div>
 </body>
 </html>
 <script>
     var data={01:{name:"张安",age:18},
         02:{name:"张安",age:18},
         03:{name:"张安",age:19},
         04:{name:"张安",age:20},
         05:{name:"张安",age:21},
         06:{name:"张安",age:22},
         07:{name:"张安",age:23},
         08:{name:"张安",age:24},
         09:{name:"张安",age:25},
         10:{name:"张安",age:26}};
     //jQuery操作一定要做变量本地化
     var list=document.getElementById('li');
     for(var id in data){
         var item=data[id];
         var liElement=document.createElement("li");
         //liElement.innerHTML=item.name;
         liElement.appendChild(document.createTextNode(item.name));
         liElement.setAttribute('data-age',item.age);
         liElement.setAttribute('data-id',item.id);
         list.appendChild(liElement);//变量本地化
 
         liElement.addEventListener('click',function(){
             //alert(this.name);
             //alert(this.innerHTML);
             alert(this.getAttribute('data-age'));
             console.log(this.dataset['age']);
         });
     }
 </script>

三、连接关系

（1）<a href="" rel="prev">上一页</a> <a href="">下一页</a>

（2）<link rel="stylesheet" href="style.css">

<a rel="archives" href="http://myblog.com/archives">old posts</a>

<a rel="external" href="http://notmysite.com">tutorial</a>

<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>

<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a> <!--nofollow 用于指定 Google 搜索引擎不要跟踪链接-->

<a rel="tag" href="http://myblog.com/category/games">games posts</a>

《-----------------------其他--------------------------------》

四、结构数据标记（方便网络爬虫解析）

<div itemscope itemtype="http://example.com/hello">
<p>我叫<span itemprop="主人">老王</span>。</p>
<p>
我养了一条叫
<span itemprop="狗名">旺财</span>的
<span itemprop="品种">金毛</span>犬。
</p> </div>
<label for="text">请输入：<input id="text" type="text" ></label>
<label>请输入： <input type="text" >

</label>

五、添加监听

关键字：addEventListener(防止方法之间的覆盖)

书写格式：

xiao.addEventListener('click',function () {
da.style.backgroundColor = 'yellow';

});

六、before after（伪元素）

 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .hezi::before {
             content: '我是p标签之前的内容';
         }
         .hezi::after {
             content: '我是p标签之后的内容';
         }
     </style>
 </head>
 <body>
 <div class="hezi">
 
     <p>我是p1标签</p>
     <p>我是p2标签</p>
 
 </div>

七、数组字典

 //    数组
     var array = ["张三","李四","王五"];
 //    数组通过下标取元素
     var first = array[0];
 //    取数组中所有元素用for循环
     for (var i = 0;i < array.length;i++){
 //        i是从 0 到 array.length
         console.log(array[i]);
     }
     for (var id in array){
 //        在数组中id是数组的下标
         console.log(array[id]);
     }
   for (var id in array){
 //        在数组中id是数组的下标
         console.log(array[id]);
     }
 //    字典 key:value
 //    var dict = {101:"张1",102:"张2",103:"张3"};
     var dict = {101:array,102:"张2",103:"张3"};
 //取值用字典[key值]
 //    console.log(dict[101]);
 //这个key就是dict的每一个key值
     for (var key in dict){
         console.log(key);
 //        item就是key对应的值
         var item = dict[key];
         console.log(item);
     }

八、智能表单

 <!--text password radio checkbox select -->
 <form action="">
     <!--required 必填项 不填的话提示需要填写-->
 <input type="text" required>
     <!--邮箱-->
 <input type="email" value="some@email.com">
     <!--日期选择器 -->
 <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
 <!--范围选择 step是移动一下value变化的数值-->
 <input type="range" min="0" max="50" value="10" step="10">
 <input type="search" results="10" placeholder="Search...">
     <!--正则表达式-->
 <input type="tel" placeholder="(555) 555-5555"
       pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
 <input type="color" placeholder="e.g. #bbbbbb">
 <input type="number" step="1" min="-5" max="10" value="0">
     <input type="submit">
 </form>

九、音乐

（1）

 <audio id="player" src="olddriver.mp3" controls autoplay></audio>
 <button id="play">播放</button>
 <button id="pause">暂停</button>
 <script>

十、视频

（1）

<!--<video src="movie.mp4" autoplay controls></video>-->

 <!--以下仅作了解！！！！-->
 <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==&amp;ShowId=0&amp;category=85&amp;Cp=0&amp;ev=1&amp;Light=on&amp;THX=off&amp;unCookie=0&amp;frame=0&amp;pvid=1439005764768c9QpaT&amp;uepflag=1&amp;Tid=0&amp;isAutoPlay=true&amp;Version=/v1.0.1080&amp;show_ce=0&amp;winType=interior&amp;Type=Folder&amp;Fid=25977506&amp;Pt=0&amp;Ob=1&amp;plchid=z&amp;openScanCode=1&amp;scanCodeText=&quot;限时&quot; 扫码免广告&amp;embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&amp;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&amp;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 src="movie.mp4" controls>
     <track src="zimu.vtt" srclang="cn" kind="subtitles" label="Chinese">
 </video>

十二、svg

 <!--这三种显示方式缺点:不可控-->
     <!--第一种方式-->
     <embed src="famoustiger.svg" type="">
     <!--第二种方式-->
         <object data="famoustiger.svg" type=""></object>
     <!--第三种方式-->
         <iframe src="famoustiger.svg" frameborder="0"></iframe>