专栏首页前端知识分享第86天:HTML5应用程序标签和智能表单

第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> <!--optimum 这是最大值 value是当前值-->

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

<1Firefox: -moz-

<2Safari: -webkit-

<3Opera: -o-

<4IE: -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" >

</label>

五、添加监听

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

书写格式:

xiao.addEventListener('click',function () {     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==&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">
 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第176天:页面优化

    从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽...

    半指温柔乐
  • 第143天:渐进增强和优雅降级之间的不同

    第一个例子的写法叫做渐进增强(progressive enhancement),第二个例子的写法叫做优雅降级(graceful degradation)。(关于...

    半指温柔乐
  • React---高阶函数和函数柯里化的理解

    1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。

    半指温柔乐
  • 实例化php类时传参的方法分析

    当我把son对象赋予sin2之后,改变了son2的name参数,此时发现son的name参数也响应的跟着改变,由此可见:在php5中,把对象赋值给变量,是按引用...

    砸漏
  • 就是让你懂Spring中Mybatis的花样配置

    Mybatis作为一个优秀的存储过程和高级映射的持久层框架,目前在项目实践中运用的比较广泛,最近做项目时候发现了一种之前没见过的配置方式,这里总结下常用的配置方...

    加多
  • 微信小程序入门教程之三:脚本编程

    今天,接着往下讲,教大家为小程序加入 JavaScript 脚本,做出动态效果,以及如何跟用户互动。学会了脚本,就能做出复杂的页面了。

    ruanyf
  • 基于puppeteer模拟登录抓取页面

    在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine)

    Jerremy
  • 前端-如何精确统计页面停留时长

    页面停留时间(Time on Page)简称 Tp,是网站分析中很常见的一个指标,用于反映用户在某些页面上停留时间的长短,传统的Tp统计方法会存在一定的统计盲区...

    grain先森
  • 用 python 做一个疫情地图

    图表的数据来自于百度的疫情实时大数据报告,通过用爬虫的方法爬取到从疫情开始到最新一天的数据,数据爬取回来保存到一个 json 文件中,作为上课的素材。

    叶子陪你玩
  • python模拟选课系统

    py3study

扫码关注云+社区

领取腾讯云代金券