一、HTML5应用程序标签
1、datalist需要数据载体 input list属性指向数据源
2、progress进度条
-webkit-appearance: none; /*如果要改默认样式 要先取消默认样式 */
.my-progress::-moz-progress-bar { /*选中背景元素*/ /*兼容火狐浏览器*/
yellow;
yellow;
}
.my-progress::-webkit-progress-bar { /*拿到progress的-webkit-progress-bar位置*/
yellow;
}
.my-progress::-webkit-progress-value {
blue;
}
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> <!--optimum 这是最大值 value是当前值-->
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打开的项目。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>应用程序标签</title> 6 <style> 7 .my-progress{ 8 -webkit-appearance: none; 9 } 10 .content::after{/*伪类 在div 后面继续添加内容*/ 11 content:'bbbbb'; 12 color:#f40; 13 } 14 .my-progress::-webkit-progress-bar{ 15 background-color: #fff; 16 } 17 </style> 18 </head> 19 <!--Sublime Server 不要stop直接退出--> 20 <body> 21 <div class="content">aaaaaa</div> 22 <!--数据列表--> 23 <input type="text" list="input_list"> 24 <datalist id="input_list"><!--数据列表呈现需要载体--> 25 <opion value="laoma"></opion> 26 <option value="list"></option> 27 </datalist> 28 29 <!--状态指示器--> 30 <progress></progress> 31 <!--进度条默认最大值是1--> 32 <progress value="10" max="100" class="my-progress"></progress> 33 </body> 34 </html>
运行效果：
二、自定义属性
1、关键字：（‘data-id’，key）；
this是当前点击对象 ，他有一个dataset属性， dataset是去掉data-之后的值
当网页超链接多了之后 ，将分组标签写data属性 ，指向分组列表每一项的超链接数据源。
var data = {
小米note2：小米note2的超链接，
小米note：小米note的超链接，
小米5：小米5的超链接，
小米5s：小米5s的超链接，
}
data-links
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>data属性</title> 6 </head> 7 <body> 8 <ul id="list"> 9 <!--<li data-age="18">zhangsan</li>--> 10 <!--通过DOM存储与DOM对象强相关的数据--> 11 <li data-id="1" data-age="18" data-gender="true">zhangsan</li> 12 <li data-id="2" data-age="18" data-gender="false">zhangsan</li> 13 <li data-id="3" data-age="18" data-gender="true">zhangsan</li> 14 </ul> 15 <div id="info"></div> 16 </body> 17 </html> 18 <script> 19 var data={01:{name:"张安",age:18}, 20 02:{name:"张安",age:18}, 21 03:{name:"张安",age:19}, 22 04:{name:"张安",age:20}, 23 05:{name:"张安",age:21}, 24 06:{name:"张安",age:22}, 25 07:{name:"张安",age:23}, 26 08:{name:"张安",age:24}, 27 09:{name:"张安",age:25}, 28 10:{name:"张安",age:26}}; 29 //jQuery操作一定要做变量本地化 30 var list=document.getElementById('li'); 31 for(var id in data){ 32 var item=data[id]; 33 var liElement=document.createElement("li"); 34 //liElement.innerHTML=item.name; 35 liElement.appendChild(document.createTextNode(item.name)); 36 liElement.setAttribute('data-age',item.age); 37 liElement.setAttribute('data-id',item.id); 38 list.appendChild(liElement);//变量本地化 39 40 liElement.addEventListener('click',function(){ 41 //alert(this.name); 42 //alert(this.innerHTML); 43 alert(this.getAttribute('data-age')); 44 console.log(this.dataset['age']); 45 }); 46 } 47 </script>
三、连接关系
<!--控制翻页 比如看小说的网站有上一页下一页翻页的按钮 如果是左箭头← 右箭头→ 网页阅读设备就可能识别不出来 在rel里面加上prev属性说明 这个链接链接到的是上一页-->
（1）<a href="" rel="prev">上一页</a> <a href="">下一页</a>
<a href="" rel="next">→</a>
（2）<link rel="stylesheet" href="style.css"><!--stylesheet 文档的外部样式表-->
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"> <!--alternate 文档的可选版本（例如打印页、翻译页或镜像）-->
<link rel="shortcut icon " href="favicon.ico">
<link rel="pingback" href="http://myblog.com/xmlrpc.php">
<link rel="prefetch" href="http://myblog.com/main.php">
<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> <!--licence 一般用于文献，表示许可证的含义-->
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a> <!--nofollow 用于指定 Google 搜索引擎不要跟踪链接-->
<a rel="tag" href="http://myblog.com/category/games">games posts</a> <!--tag 标签集合-->
《-----------------------其他--------------------------------》
<!--start 集合中的第一个文档-->
<!--next 集合中的下一个文档-->
<!--prev 集合中的前一个文档-->
<!--contents 文档目录-->
<!--index 文档索引-->
<!--glossary 文档中所用字词的术语表或解释-->
<!--copyright 包含版权信息的文档-->
<!--chapter 文档的章-->
<!--section 文档的节-->
<!--subsection 文档的子段-->
<!--appendix 文档附录-->
<!--help 帮助文档-->
<!--bookmark 相关文档-->
<!--friend 友情链接-->
四、结构数据标记（方便网络爬虫解析）
<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" >
<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';
da.style.backgroundColor = 'yellow';
});
六、before after（伪元素）
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .hezi::before { 6 content: '我是p标签之前的内容'; 7 } 8 .hezi::after { 9 content: '我是p标签之后的内容'; 10 } 11 </style> 12 </head> 13 <body> 14 <div class="hezi"> 15 16 <p>我是p1标签</p> 17 <p>我是p2标签</p> 18 19 </div>
七、数组字典
1 // 数组 2 var array = ["张三","李四","王五"]; 3 // 数组通过下标取元素 4 var first = array[0]; 5 // 取数组中所有元素用for循环 6 for (var i = 0;i < array.length;i++){ 7 // i是从 0 到 array.length 8 console.log(array[i]); 9 } 10 for (var id in array){ 11 // 在数组中id是数组的下标 12 console.log(array[id]); 13 } 14 for (var id in array){ 15 // 在数组中id是数组的下标 16 console.log(array[id]); 17 } 18 // 字典 key:value 19 // var dict = {101:"张1",102:"张2",103:"张3"}; 20 var dict = {101:array,102:"张2",103:"张3"}; 21 //取值用字典[key值] 22 // console.log(dict[101]); 23 //这个key就是dict的每一个key值 24 for (var key in dict){ 25 console.log(key); 26 // item就是key对应的值 27 var item = dict[key]; 28 console.log(item); 29 }
八、智能表单
1 <!--text password radio checkbox select --> 2 <form action=""> 3 <!--required 必填项 不填的话提示需要填写--> 4 <input type="text" required> 5 <!--邮箱--> 6 <input type="email" value="some@email.com"> 7 <!--日期选择器 --> 8 <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"> 9 <!--范围选择 step是移动一下value变化的数值--> 10 <input type="range" min="0" max="50" value="10" step="10"> 11 <input type="search" results="10" placeholder="Search..."> 12 <!--正则表达式--> 13 <input type="tel" placeholder="(555) 555-5555" 14 pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$"> 15 <input type="color" placeholder="e.g. #bbbbbb"> 16 <input type="number" step="1" min="-5" max="10" value="0"> 17 <input type="submit"> 18 </form>
九、音乐
（1）<!--controls显示因音乐播放器的控制台 autoplay自动播放-->
1 <audio id="player" src="olddriver.mp3" controls autoplay></audio> 2 <button id="play">播放</button> 3 <button id="pause">暂停</button> 4 <script>
十、视频
（1）
<!--<video src="movie.mp4" autoplay controls></video>-->
<!--source 标签播放数据源 当浏览器不识别格式的时候自动找下一个source-->
<!--poster 视频播放器海报-->
<!-- 属性介绍：autoplay:自动播放； controls:显示播放控件； loop:循环播放； preload:预加载；-->
1 <!--以下仅作了解！！！！--> 2 <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"> 3 <param name="allowFullScreen" value="true"> 4 <param name="allowscriptaccess" value="always"> 5 <param name="allowFullScreenInteractive" value="true"> 6 <param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&ShowId=0&category=85&Cp=0&ev=1&Light=on&THX=off&unCookie=0&frame=0&pvid=1439005764768c9QpaT&uepflag=1&Tid=0&isAutoPlay=true&Version=/v1.0.1080&show_ce=0&winType=interior&Type=Folder&Fid=25977506&Pt=0&Ob=1&plchid=z&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&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&pageStartTime=1439005764766"> 7 <param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf"> 8 <div class="player_html5"> 9 <div class="picture" style="height:100%"> 10 <div style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></div> 11 </div> 12 </div> 13 </object>
十一、字幕
<!--track标签是字幕-->
1 <video src="movie.mp4" controls> 2 <track src="zimu.vtt" srclang="cn" kind="subtitles" label="Chinese"> 3 </video>
十二、svg
1 <!--这三种显示方式缺点:不可控--> 2 <!--第一种方式--> 3 <embed src="famoustiger.svg" type=""> 4 <!--第二种方式--> 5 <object data="famoustiger.svg" type=""></object> 6 <!--第三种方式--> 7 <iframe src="famoustiger.svg" frameborder="0"></iframe>