最近学习了一下高德地图web版的使用,总结了一下高德基础控件的应用,高德地图是开源可编辑的,方法不是很难,有兴趣的朋友可以试一试自己编辑一下.之前想自己做一个旅游导航的项目，在网上一搜发现了高德地图开放平台，发现原来高德可以很简单的就应用到自己的项目里面，当即我就申请了一个key来学一学，仔细研究了一下，感觉还挺难的，网上找了找案例什么的，经过这几天，小编把高德的一些基础控件差不多弄了一下，效果图如下图所示：下面是js代码：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3c5ca12a5778fde874e9959c7fbdf516">//引入高德地图API</script> <script language="javascript">var mapObj;var scale;var mapType;var toolBar;var overView;var circleEditor;var circle;var polygonEditor;var polygon;var homeControl;var controlUI;var ruler;var mousetool;//刷新页面function reload(){    location.reload();} function mapInit(){ mapObj = new AMap.Map("iCenter",{        center:new AMap.LngLat(116.397728,39.90423), //地图中心点        level:13, //地图显示的比例尺级别    });    mapObj.plugin(["AMap.ToolBar"],function(){ //在地图中添加ToolBar插件 toolBar = new AMap.ToolBar(); mapObj.addControl(toolBar); }); mapObj.plugin(["AMap.Scale"],function(){ //加载比例尺插件 scale = new AMap.Scale(); mapObj.addControl(scale);        scale.show(); });    mapObj.plugin(["AMap.OverView"],function(){ //在地图中添加鹰眼插件 //加载鹰眼 overView = new AMap.OverView({ visible:true //初始化显示鹰眼 }); mapObj.addControl(overView);        overView.open(); //展开鹰眼 });    mapObj.plugin(["AMap.RangingTool"],function(){         ruler = new AMap.RangingTool(mapObj);         AMap.event.addListener(ruler,"end",function(e){  ruler.turnOff();  });            });     mapObj.plugin(["AMap.MouseTool"],function(){     //鼠标工具插件        mousetool = new AMap.MouseTool(mapObj);              });}function Coordinate(){    AMap.event.addListener(mapObj,'click',getLnglat); //点击事件}  function toolBarShow(){    toolBar.show();    toolBar.showRuler();    toolBar.showDirection();}function toolBarDirection(){    toolBar.show();    toolBar.showDirection();    toolBar.hideRuler();}function toolBarLong(){    toolBar.show();    toolBar.hideDirection();    toolBar.showRuler();}function toolBarShot(){    toolBar.show();    toolBar.hideRuler();    toolBar.hideDirection();}function iMapType(){    mapObj.plugin(["AMap.MapType"],function(){ //添加地图类型切换插件 //地图类型切换 mapType= new AMap.MapType({defaultType:1,showRoad:true}); mapObj.addControl(mapType); });}function removeMapType(){    mapObj.removeControl(mapType);}function iCircleEditor(){ //圆形编辑器    circle = new AMap.Circle({ //圆形编辑器的样式        map: mapObj,        center:new AMap.LngLat("116.40332221984863","39.90025505675715"),        radius:1000,        strokeColor: "#F33",        strokeOpacity: 1,        strokeWeight: 3,        fillColor: "ee2200",        fillOpacity: 0.35    });    mapObj.plugin(["AMap.CircleEditor"],function(){        circleEditor = new AMap.CircleEditor(mapObj,circle); //创建圆形编辑器对象        circleEditor.open(); //打开圆形编辑器    });}function removeCicleEditor(){ //关闭圆形编辑器，隐藏圆形    circleEditor.close();    circle.hide();} function iPloygonEditor(){ //编辑多边形 var arr=new Array();//经纬度坐标数组 arr.push(new AMap.LngLat("116.403322","39.920255")); arr.push(new AMap.LngLat("116.410703","39.897555")); arr.push(new AMap.LngLat("116.402292","39.892353")); arr.push(new AMap.LngLat("116.389846","39.891365")); polygon = new AMap.Polygon({ path:arr, //设置多边形轮廓的节点数组 strokeColor:"#0000ff", strokeOpacity:0.2, strokeWeight:3, fillColor: "#f5deb3", fillOpacity: 0.35 }); //地图上添加多边形 mapObj.addOverlays(polygon); //构造多边形编辑对象，并开启多边形的编辑状态 mapObj.plugin(["AMap.PolyEditor"],function(){ polygonEditor = new AMap.PolyEditor(mapObj,polygon); polygonEditor.open(); });}function removePloygonEditor(){    polygonEditor.close();    polygon.hide();}AMap.homeControlp = function(){}AMap.homeControlp.prototype = { addTo: function(map, dom){ dom.appendChild(this._getHtmlDom(map)); }, _getHtmlDom:function(map){ this.map=map; // 创建一个能承载控件的<p>容器 controlUI = document.createElement("p"); controlUI.style.width='80px'; //设置控件容器的宽度 controlUI.style.height='20px'; //设置控件容器的高度 controlUI.style.backgroundColor='white'; controlUI.style.borderStyle='solid'; controlUI.style.borderWidth='2px'; controlUI.style.cursor='pointer'; controlUI.style.textAlign='center';  // 设置控件的位置 controlUI.style.position='absolute'; controlUI.style.left='120px'; //设置控件离地图的左边界的偏移量 controlUI.style.top='5px'; //设置控件离地图上边界的偏移量 controlUI.style.zIndex='300'; //设置控件在地图上显示  // 设置控件字体样式 controlUI.style.fontFamily='Arial,sens-serif'; controlUI.style.fontSize='12px'; controlUI.style.paddingLeft='4px'; controlUI.style.paddingRight='4px'; controlUI.innerHTML="换中心点";  // 设置控件响应点击onclick事件 controlUI.onclick = function(){ map.setCenter(new AMap.LngLat(116.234404, 39.12915)); } return controlUI; }}AMap.event.trigger(homeControlp,"hide");AMap.event.addListener(homeControlp,"hide",function(){    controlUI.style.display = 'none';}) function myControl(){    homeControl = new AMap.homeControlp(mapObj); //新建自定义插件对象    mapObj.addControl(homeControl); //地图上添加插件}function removeMyControl(){    homeControl.hide();    //controlUI.style.display='none';}function iRangingTool(){    ruler.turnOn();}function removeRangingTool(){    ruler.turnOff();    mapObj.clearMap();    //ruler.hide();    //ruler.setMap(null);       //mapObj.removeControl(ruler);}function iMarker(){    mousetool.marker(); //使用鼠标工具，在地图上画标记点}function iMeasureArea(){    mousetool.measureArea();}function iRectZoomIn(){    mousetool.rectZoomIn();}function iRectZoomOut(){    mousetool.rectZoomOut();}function iPolyline(){    mousetool.polyline();}function iPolygon(){    mousetool.polygon();}function iCircle(){    mousetool.circle();}function iRectangle(){    mousetool.rectangle();}function iRule(){    mousetool.rule();}function removeMouseTool(){    mousetool.close(true);} function geocoder() { var MGeocoder; //加载地理编码插件 mapObj.plugin(["AMap.Geocoder"], function() {  MGeocoder = new AMap.Geocoder({  radius: 1000, extensions: "all" }); //返回地理编码结果  AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);  //逆地理编码 MGeocoder.getAddress(lnglatXY);  }); //加点 var marker = new AMap.Marker({ map:mapObj, icon: new AMap.Icon({ image: "http://api.amap.com/Public/images/js/mark.png", size:new AMap.Size(58,30), imageOffset: new AMap.Pixel(-32, -0) }), position: lnglatXY, offset: new AMap.Pixel(-5,-30) }); // mapObj.setFitView();}//回调函数function geocoder_CallBack(data) { var address; //返回地址描述 address = data.regeocode.formattedAddress; //返回结果拼接输出 document.getElementById("iAddress").innerHTML = address;} //鼠标点击，获取经纬度坐标 function getLnglat(e){     mapObj.clearMap();    var x = e.lnglat.getLng();    var y = e.lnglat.getLat();     document.getElementById("lnglat").innerHTML = x + "," + y;         lnglatXY = new AMap.LngLat(x,y);    geocoder();}</script>下面是HTML代码：123456789101112131415161718192021222324252627<body onLoad="mapInit()"> <p id="iCenter"></p> <p id="iControlbox">        <ul>            <li><button onclick="javascript:toolBarShow();">显示完整鱼骨</button><button onclick="javascript:toolBar.hide();">隐藏鱼骨</button><button onclick="javascript:toolBarDirection();">方向盘</button><button onclick="javascript:toolBarLong();">长标尺</button><button onclick="javascript:toolBarShot();">短标尺</button></li>            <li><button onclick="javascript:scale.show();">显示比例尺</button><button onclick="javascript:scale.hide();">隐藏比例尺</button></li>            <li><button onclick="javascript:overView.show();">显示鹰眼</button><button onclick="javascript:overView.hide();">隐藏鹰眼</button></li>            <li><button onclick="javascript:iMapType();">添加地图类型切换</button><button onclick="javascript:removeMapType();">移除地图类型切换</button></li>            <li><button onclick="javascript:iCircleEditor();">添加圆形编辑器</button><button onclick="javascript:removeCicleEditor();">删除圆形编辑器</button></li>            <li><button onclick="javascript:iPloygonEditor();">添加多边形编辑器</button><button onclick="javascript:removePloygonEditor();">删除多边形编辑器</button></li>                      <li><button onclick="javascript:iMarker();">鼠标打点工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>                 <li><button onclick="javascript:iPolyline();">鼠标画折线工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>              <li><button onclick="javascript:iPolygon();">鼠标画多边形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>            <li><button onclick="javascript:iCircle();">鼠标画圆形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>            <li><button onclick="javascript:iRectangle();">鼠标画矩形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>            <li><button onclick="javascript:iRule();">鼠标测距工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>            <li><button onclick="javascript:iMeasureArea();">鼠标测面积</button><button onclick="javascript:removeMouseTool();">移除</button></li>            <li><button onclick="javascript:iRectZoomIn();">鼠标框选缩小</button><button onclick="javascript:iRectZoomOut();">鼠标框选放大</button><button onclick="javascript:removeRangingTool();">关闭鼠标放大缩小</button></li>            <li><button onclick="javascript:iRangingTool();">测距插件</button><button onclick="javascript:removeRangingTool();">隐藏测距</button></li>            <li><button onclick="javascript:myControl();">添加自定义控件</button><button onclick="javascript:removeMyControl();">移除自定义控件</button></li>            <li><p class="detail"><p><span id="lnglat"> </span></p><p><span id="iAddress"> </span></p></p></li>            <li><button onclick="javascript:Coordinate();">坐标拾取控件</button><button onclick="javascript:reload();">取消坐标拾取</button></li>                      </ul>    </p></body>总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。相关推荐：php HTML无刷新提交表单的方法及实例HTML文档内嵌入JS方法汇总jQuery实现HTML页面文本框模糊匹配查询（附代码）以上就是高德地图WEB版的使用的详细内容

本片文章主要介绍angular的增删改查以及验证，感兴趣的朋友参考下。代码如下：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134<!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8">          <title>增删改查</title>          <script src="js/angular.min.js"></script>          <script>              var app = angular.module("anan", []);              app.controller("enen", function($scope) {                  $scope.user = [{                      ck:false,                      id: 1,                      name: '李1',                      pwd: 123456,                      level: 3                  }, {                      ck:false,                      id: 2,                      name: '李2',                      pwd: 123456,                      level: 1                  }, {                      ck:false,                      id: 3,                      name: '李3',                      pwd: 123456,                      level: 3                  }, {                      ck:false,                      id: 4,                      name: '李4',                      pwd: 123456,                      level: 1                  }, {                      ck:false,                      id: 5,                      name: '李5',                      pwd: 123456,                      level: 2                  }, {ck:false,                         id: 6,                      name: '李6',                      pwd: 123456,                      level: 3                  }, {                      ck:false,                      id: 7,                      name: '李7',                      pwd: 123456,                      level: 2                  }, {                      ck:false,                      id: 8,                      name: '李8',                      pwd: 123456,                      level: 1                  }, {                      ck:false,                      id: 9,                      name: '李9',                      pwd: 123456,                      level: 2                  }, {                      ck:false,                      id: 10,                      name: '李10',                      pwd: 123456,                      level: 1                  }];                                     $scope.ckAll=function(){                      for(var i=0;i<$scope.user.length;i++){                          $scope.user[i].ck=$scope.flag;                      }                  }                  $scope.delso=function(){                      var shu=0;                      for(var i=0;i<$scope.user.length;i++){                          if($scope.user[i].ck){                              $scope.user.splice(i,1);                              shu++;                              i--;                          }                      }                  }                  $scope.insert=function(m){                      var good={ck:false,id:$scope.tid,name:$scope.tname,pwd:$scope.tpwd,level:$scope.tlevel};                      $scope.user.push(good);                  }              })          </script>          <style type="text/css">              #cll:nth-child(even){                  background-color: lightseagreen;              }              #cll:nth-child(odd){                  background-color:#C9C994;              }          </style>      </head>      <body ng-app="anan" ng-controller="enen">          <div style="margin: 0 auto; height:800px;  width: 1000px;  border: 1px solid greenyellow; ">              <input placeholder="用户名搜索" ng-model="souname"/>              <select ng-model="jb"><option value="">选择级别</option ><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>              　　　　　　　　　　　排序<select ng-model="px"><option>排序</option>    <option value="id">id</option><option value="level">级别</option></select><br/>              <button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用户</button><button style="color: #FFFFFF; background-color: crimson;margin: 6px;" ng-click="delso()">批量删除</button>              <div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m">                  　id:<input type="number" ng-model="tid"/>　用户名:<input ng-model="tname"/>　密码:<input ng-model="tpwd"/>　级别:<input type="number" ng-model="tlevel"/>　<button  ng-click="insert(m=false)">添加</button>              </div>              <table style="width: 1000px;" border="1px">                  <tr style="background-color: cadetblue;">                      <td><input type="checkbox" ng-click="ckAll()" ng-model="flag"/></td>                      <td>id</td>                      <td>用户名</td>                      <td>密码</td>                      <td>级别</td>                      <td>操作</td>                  </tr>                  <tr id="cll" ng-repeat="e in user|orderBy:px:false|filter:{name:souname}|filter:{level:jb}">                      <td><input type="checkbox" ng-model="e.ck"/></td>                      <td>{{e.id}}</td>                      <td>{{e.name}}</td>                      <td><span> {{e.pwd}}</span>                          <span  ng-show="f">                             <input  ng-model="e.pwd" /> <button  ng-click="f=false">保存</button>                         </span></td>                      <td>{{e.level}}</td>                      <td><button ng-click="f=true">修改密码</button></td>                  </tr>              </table>          </div>      </body>  </html>相关推荐：Angular如何进行服务端渲染开发Angular4中router使用技巧angular4共享多个组件数据通信案例详解以上就是angular 增删改查和验证 的详细内容

这篇文章主要为大家介绍了HTML5移动端手机网站开发流程，想要进行移动端手机网站开发的朋友可以参考一下最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的PC网站都会做，难道连一个小小的手机网站难道都搞不定吗？其实手机网站就是一个微缩版的PC网站罢了！至于为什么觉得难、觉得无从下手。觉得有以下几点：一、没有完整的思路和流程就像做网站的流程一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。二、把html5这门技术想的高深莫测好像觉得学会用html5+css3做手机网站，就相当于学会了顶尖的绝世武功。其实你错了！不要把html5这玩意想的太高深，其实做手机网站，真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言：你的手机网站是用HTML5+CSS3做的啊，简直牛逼呀！能用上目前互联网上最新最前沿的技术。其实明眼人一看，就知道是用什么技术做的。俗话说的好："外行看热闹，内行看门道")好了扯了这么多，下面就说说怎么来开发移动手机网站吧！基本上开发手机网站，可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。一、框架开发手机网站一般用现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..当然可能还有一些移动端开发的框架，这些我就没具体去研究过。为什么说BootStrap是目前前端最火热的开发框架呢？因为bootstrap自带响应式布局（栅格系统），而且能做到移动设备优先的原则。运用bootstrap来开发网站有什么好处呢？1.不懂设计也可以做网站就算不懂设计，你的网页在Bootstrap的帮助下，也能拥有超高颜值。它强大的内置样式库让你的作品变成尤物。主要体现在：字体文件和bootstrap自带的UI样式。（为广大不会UI设计的程序员，提供了福音）2.上手快你可以专心解决问题，冗繁的细节都丢给Bootstrap操心。可以做到一次开发，就可适配所有终端，并且能迅速上手并建出网站原型。还提供很多丰富的插件，就算你不会JS，基本能看懂常见的API，网站上的效果，基本能解决。缺点：1.不遵循最佳实践我们在使用Bootstrap时遇到的最大问题之一是你的DOM元素上将拥挤大量的类。这打破了良好的web设计基本规则之一，HTML不再有语义，而且内容和表示不再分离。前端纯粹主义者会觉得这相当令人讨厌，以为它使可扩展性、重用性和维护性遇到了更大的挑战。2. Bootstrap 太重直接点说：就是CSS和JS有点点大。CSS压缩后115k,JS压缩后35k如果你想要使用Bootstrap的所有功能，你应该好好考虑资源的加载时间。当然，对于一些地方这可能不是问题，但是在新西兰互联网不得不横跨太平洋，这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。相信任何框架都有它的优点，同时也是有它的缺点的。没有一个产品是很完美的，所以根据自身实际情况进行选择。至于一些其它框架暂时不做过多的解释了，相信只要你肯愿意百度一下，就可以找到你想要的答案。移动手机端开发流程二、手写手机网站一般我们自己手动开发手机网站的话，基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现（网页指html5的格式来开发）。另一类是通过CSS3的Media标签（媒介查询）来实现。不了解媒介查询的朋友，可以看看这篇文章：响应式布局。在这里我们详细讲解下,利用添加meta标签来做手机网站。基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。1、添加viewport标签1<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />详细属性：width ---- viewport的宽度（width=device-width意思是：宽度等于设备宽度）height ------ viewport的高度（height=device-height意思是：高度等于设备宽度）initial-scale ----- 初始的缩放比例minimum-scale ----- 允许用户缩放到的最小比例maximum-scale ----- 允许用户缩放到的最大比例user-scalable ----- 用户是否可以手动缩放关于viewport的详细原理和知识点，各位就百度吧！在这里我就不做详细的讲解了。2、禁止将数字变为电话号码<meta name="format-detection" content="telephone=no" />一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！3、iphone设备中的safari私有meta标签<meta name="apple-mobile-web-app-capable" content="yes" />它表示：允许全屏模式浏览，隐藏浏览器导航栏4、iphone的私有标签<meta name="apple-mobile-web-app-status-bar-style" content="black">它指定的iphone中safari顶端的状态条的样式默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：<link rel="apple-touch-icon-precomposed" href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。手机网站基本框架代码：XML/HTML Code复制内容到剪贴板1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!doctype html>     <html>     <head>     <meta charset="utf-8">     <title>手机网站</title>     <meta name="keywords" content="" />     <meta name="description" content="" />     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />     <meta name="format-detection" content="telephone=no" />     <meta name="apple-mobile-web-app-capable" content="yes" />     <meta name="apple-mobile-web-app-status-bar-style" content="black">     <meta name="author" content="duanliang, duanliang920.com" />     <style>         body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}          .viewport{ max-width:640px; min-width:300px; margin:0 auto;}      </style>      </head>             <body>         <div>             大家好！我是段亮，这是我的第一个手机网页哦！          </div>     </body>     </html>下面是我做的基于微信二次开发的手机页面案例：其实在移动端的开发让我纠结的是在字体单位上的选择。随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。关于手机网站的调试问题一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。比如：（Android类手机，iPhone5、5s、6、6Plus...）而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。如下图：手机测试效果图或者用火狐的测试工具：按shift+ctrl+M进行查看。写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。相关推荐：HTML5触摸事件实现移动端简易进度条的实现方法以上就是HTML5移动端手机网站开发流程的详细内容

这篇文章主要介绍了关于HTML5中的autofocus（自动聚焦）属性介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下HTML5给我们带来了一大堆神奇的东西。以前需要用JavaScript和Flash完成的任务，例如表单校验，INPUT placeholders , 客户端重命名下载文件和音频/视频，这些都可以使用基本的HTML完成这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上；这个动作用autofocus属性完成。HTML代码非常简单：复制代码代码如下:1234<!-- These all work! --><input autofocus="autofocus" /><button autofocus="autofocus">Hi!</button><textarea autofocus="autofocus"></textarea>当有了autofocus属性，这些 INPUT, TEXTAREA, 或 BUTTON元素都能在页面加载是被选中。但如果使用纯显示元素，例如H1标记，autofocus属性并不好用。这个属性在某些情况下非常有用。例如谷歌的首页，人们99%的时间都是用它来搜索，所以页面一旦加载，光标必然定位在输入框里。以前需要使用JavaScript才能完成，现在完全不需要了，html自己就能完成。以上就是HTML5中的autofocus（自动聚焦）属性介绍的详细内容

在我们做h5页面或者推广小程序的时候，特别是在微信里，为了让用户更好的分享给朋友，往往需要将动态生成的html生成一个图片，然后让用户长按保存发给朋友或者朋友圈。1，在html里新建canvas画布1234567891011/**要生成图片的html*/<p class="con_1">    <p class="con_1_5">        <span class="title_des2">思路惊奇</span>        <span class="title_des3">思路惊奇</span>    </p>    <img class="con_1_1" src="style/ActiveCDN/bonus/page7_1.png" alt="">    <img class="con_1_2" src="style/ActiveCDN/bonus/page7_1.png" alt=""></p>/*生成的canvas和最终生成的图片*/<p class="shareImg">    <canvas id="canvas" width="750" height="1206"></canvas>    <img src="" alt=""></p>1234567891011//设置canva画布大小，这里会把画布大小设置为2倍，为了解决生成图片不清晰的问题，需要注意接下来所有的函数都是在html2canvas这个对象里定义的var html2canvas={    canvas:document.getElementById("canvas"),    ctx:canvas.getContext("2d"),    saveImage:function(){          this.canvas.width=windowPro.innerWidth*2;          this.canvas.height=windowPro.innerHeight*2-4.8*bastFontSize;          this.ctx.fillStyle="#0c3e78";          this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);    }}2，将要生成的图片的dom元素载入canvas中a， 获取要加载到canvas的图片123456789domArray:[$(".con_1_1"),$(".con_1_2")],//要加载的图片元素列表 imgArrayLoad:function(){        var that=this,domArray=this.domArray;        for(var i=0,len=domArray.length;i<len;i++){            (function(){            //循环出所有图片元素，一个个图片添加                that.addImgToCanvas(domArray[i],that.imgAllLoad);            }())        }    },b，获取每个图片元素的在页面上大小，距离顶部地步距离，然后绘制到canvas相应的位置1234567891011121314addImgToCanvas:function(obj,fn){      var width=obj.width()*2,//图片在网页宽度        height=obj.height()*2,//图片在网页高度        x=obj[0].x*2,//图片距离网页最顶部距离        y=obj[0].y*2,//图片距离网页最右边距离        img=new Image(),        that=this,        src=obj.attr("src");        img.src=src;        img.onload=function(){           //把图片绘制到canvas上            that.ctx.drawImage(obj[0],x,y,width,height);上            that.loadImgNum++;              if(fn && typeof fn === "function")fn(that.loadImgNum);               /**位置1**/         }},3，将要生成的文字的dom元素载入canvas中a， 获取要加载文字元素12345678textObj:[$(".title_des2"),$(".title_des3")],textArratLoad:function(){       var that=this;        for(var m=0,len=that.textObj.length;m<len;m++){           (function(){               that.writeTextOnCanvas(domArray[m],parseInt(28)+"px 微软雅黑","#d0b150")           })()       }   },b，获取每个文字元素距离网页距离，同样的，距离距离长度必须喂2倍，把文字添加到canvas上12345678910111213141516writeTextOnCanvas:function(obj,fontsize,color){//添加文字到canvas       var width=obj.width()*2,         height=obj.height()*2,          x=obj.offset().left*2,          y=obj.offset().top*2;         var that=this;         var text=obj.html().replace(/^\s+|\s+$/, "");//去掉文字里的空格         that.ctx.fillStyle =color; //设置文字颜色         that.ctx.font = fontsize;//设置文字大小         that.ctx.textAlign="left";//设置文字对其方向         textBaseline = "middle";         //因为canvas里的文字不会换行，所以我们需要想办法让长段文字换行       for(var i = 1; that.getTrueLength(text) > 0; i++){           var tl = that.cutString(text, 30);           that.ctx.fillText(text.substr(0, tl), x,  y+36*i);// 把文字添加到canvas上           text = text.substr(tl);       }   },c，文字绘制到canvas时，自动换行。。因为canvas绘制文字的时候只能设置最大宽度和距离顶部左边距离。所以我们需要自行处理下。12345678910111213141516171819202122getTrueLength:function(str){//获取字符串的真实长度（字节长度）            var len = str.length, truelen = 0;            for(var x = 0; x < len; x++){                if(str.charCodeAt(x) > 128){                    truelen += 2;                }else{                    truelen += 1;                }            }            return truelen;        },    cutString:function(str, leng){//按字节长度截取字符串，返回substr截取位置            var len = str.length, tlen = len, nlen = 0;            for(var x = 0; x < len; x++){                if(str.charCodeAt(x) > 128){                    if(nlen + 2 < leng){                        nlen += 2;                    }else{                        tlen = x;                        break;                    }                }else{                    if(nlen + 1 < leng){                        nlen += 1;                    }else{                        tlen = x;                        break;                    }                }            }            return tlen;        }4，最后把canvas转为图片，需要注意的是必须等所有图片都载入完成才能进行图片的生成，要不然会造成生成的图片不全。文字载入可以不考虑。12345  imgAllLoad:function(nexi){     var length=this.domArray.length;     if(nexi>=length){         var dataURL = canvas.toDataURL();        $(".shareImg img").attr("src",dataURL);//canvas转为图片    }}总结：1.获取图片和文字位置，通过canvas的ctx.drawImage(IMG,left,top,width,height)绘制图片，通过.ctx.fillText(text, left,top)绘制文字，通过canvas.toDataURL();生成图片。 2.需要注意为了生成图片不失真，canvas大小是2倍，图片文字都是2倍。 3.为了文字换行， getTrueLength 。4.必须等到图片都绘制完成，再生成图片，这个很重要。相关推荐：html5 - html图片点击事件找不到javascript - html图片热区如自适应 map标签关于html图片的问题？以上就是如何将html转化为图片的详细内容

本篇文章适用与刚学html和css，练习一个比较简单的百度首页，因为百度的主页比较简单，大概分为三个部分：右上角的标签、Logo和表单、下面的版权信息。对于刚开始想要检测学习成果是一个不错的好方法，熟练后再去尝试写一些复杂的html网页。下面是html制作百度首页的源码12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<!DOCTYPE html><html><head><meta charset="UTF-8"><title>百度一下，你就知道</title></head><body><p align="right"><font color="blue" size="2"><a href="http://www.baidu.com/gaoji/preferences.html">搜索设置</a>|<a href="http://passport.baidu.com">登陆</a>|<a href="https://passport.baidu.com">注册</a></font></p><p align="center"><img alt="百度" src="../images/baidu.gif" height="60px;" width="120px;"/></p><p align="center"><font color="blue" size="2"><a href="http://news.baidu.com">新闻</a><font color="black"><b>网页</b></font><a href="http://tieba.baidu.com">贴吧</a><a href="http://zhidao.baidu.com">知道</a><a href="http://mp3.baidu.com">MP3</a><a href="http://image.baidu.com">图片</a><a href="http://video.baidu.com">视频</a><a href="http://map.baidu.com">地图</a></font></p><p align="center"><form action=""><input type="text" name="wd" size="50" height="20px;" width="50px;"><input type="submit" value="百度一下"></form></p><p align="center"><font color="blue" size="2"><a href="http://hi.baidu.com">空间</a><a href="http://baike.baidu.com">百科</a><a href="http://www.hao123.com">hao123</a><a href="/more/">更多&gt;&gt;</a></font></p><br/><br/><br/><br/><br/><br/><p align="center">  <font color="blue" size="2"><p><a href="http://utility.baidu.com">把百度设为主页</a>   <a href="">把百度加为收藏夹</a></p><p><a href="http://top.baidu.com">搜索风云榜</a>   <a href="http://home.baidu.com">关于百度</a>   <a href="http://ir.baidu.com">About Baidu</a></p><p>&copy;2017年10月21日 百度 <a href="/duty">使用百度前必读</a>   <a href="http://www.niibeian.gov.cn">北京ICP证030173号</a>   <img src="http://gimg.baidu.com/img/gs.gif"></p>  </font></p></body></html>总结：看似简单，当我们写起来的时候就感觉跟我学起来的完全不一样呢！多加练习有助于我们更快学习。相关推荐：站点首页是404Not Found用360能打开首页，用谷歌就打不开！模板首页出不来以上就是如何用html制作百度首页的详细内容

通常对于无刷新提交表单，我们都是运用ajax实现的。前段时间了解到另一种无刷新提交表单的方法。现在整理出来分享给大家。html页面：12345678910111213141516171819202122232425262728293031<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <title>无刷新提交表单</title>    <style type="text/css">        ul{ list-style-type:none;}    </style></head><body>    <iframe name="formsubmit" style="display:none;">    </iframe>     <!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->    <form action="form.php" method="POST" name="formphp" target="formsubmit">       <ul>            <li>                <label for="uname">用户名：</label>                <input type="text" name="uname" id="uname" />            </li>            <li>                <label for="pwd">密  码：</label>                <input type="password" name="pwd" id="pwd" />            </li>            <li>                <input type="submit" value="登录" />            </li>       </ul>    </form></body></html>php页面：1234567891011121314151617<?php  //非空验证  if(empty($_POST['uname']) || empty($_POST['pwd']))  {    echo '<script type="text/javascript">alert("用户名或密码为空!");</script>';    exit;  }   //验证密码  if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')  {    echo '<script type="text/javascript">alert("用户名或密码不正确!");</script>';    exit;  } else {    echo '<script type="text/javascript">alert("登录成功!");</script>';    exit;  }相关推荐：thinkphp表单上传文件并将文件路径保存到数据库中Vue.js实现可配置登录表单步骤详解Vue.js操作表单控件步骤详解以上就是php无刷新提交表单另一种方法的详细内容

这篇文章主要介绍了关于通过display或visibility来实现HTML元素的显示与隐藏，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，感兴趣的朋友可以了解下本文有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： 复制代码代码如下:12345678910111213141516171819202122232425262728293031323334<html> <head> <title>HTML元素的显示与隐藏控制</title> <script type="text/javascript"> function showAndHidden1(){ var p1=document.getElementById("p1"); var p2=document.getElementById("p2"); if(p1.style.display=='block') p1.style.display='none'; else p1.style.display='block'; if(p2.style.display=='block') p2.style.display='none'; else p2.style.display='block'; } function showAndHidden2(){ var p3=document.getElementById("p3"); var p4=document.getElementById("p4"); if(p3.style.visibility=='visible') p3.style.visibility='hidden'; else p3.style.visibility='visible'; if(p4.style.visibility=='visible') p4.style.visibility='hidden'; else p4.style.visibility='visible'; } </script> </head> <body> <p>display：元素的位置不被占用</p> <p id="p1" style="display:block;">p 1</p> <p id="p2" style="display:none;">p 2</p> <input type="button" onclick="showAndHidden1();" value="p切换" /> <hr> <p>visibility：元素的位置仍被占用</p> <p id="p3" style="visibility:visible;">p 3</p> <p id="p4" style="visibility:hidden;">p 4</p> <input type="button" onclick="showAndHidden2();" value="p切换" /> </body> </html>以上就是通过display或visibility来实现HTML元素的显示与隐藏的详细内容

这篇文章主要介绍了关于html中用href 实现点击链接弹出文件下载对话框，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下用href 实现文件下载，之前不知道，今天有学会了一招实现点击链接弹出文件下载对话框，感兴趣的朋友可以了解下今天又学了一招，以前不知道，就是做过的东西太少了…… 目标：实现点击链接弹出文件下载对话框 代码： 复制代码代码如下:1234567<html> <head>代码下载</head> <title>代码下载</title> <body> <a href="Web.rar" >download</a> </body> </html>浏览器支持能够打开的格式，他都会默认直接在线打开（比如word或图片），不支持的格式，他就会弹出下载提示。最好是做成.rar格式的文件相关推荐：html 空链接 href="#"与href="javascript:void(0)"的区别以上就是html中用href 实现点击链接弹出文件下载对话框的详细内容

这次给大家带来CSS实现大型下拉菜单步骤详解，CSS实现大型下拉菜单的注意事项有哪些，下面就是实战案例，一起来看一下。这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作，没有任何js代码，不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。HTML结构该大型菜单的HTML结构如下：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<nav>  <ul class="container ul-reset">    <li><a href='#'>Home</a></li>    <li class='droppable'>      <a href='#'>Category One</a>      <p class='mega-menu'>        <p class="container cf">          <ul class="ul-reset">            <h3>Heading 1</h3>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>          </ul><!-- .ul-reset -->          <ul class="ul-reset">            <h3>Heading 2</h3>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>          </ul><!-- .ul-reset -->          <ul class="ul-reset">            <h3>Heading 3</h3>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>            <li><a href='#'>Category One Sublink</a></li>          </ul><!-- .ul-reset -->          <ul class="ul-reset">            <h3>Heading 4</h3>            <li><img src="http://placehold.it/205x172"></li>          </ul>        </p><!-- .container -->      </p><!-- .mega-menu -->    </li><!-- .droppable -->    <li class='droppable'>      <a href='#'>Category Two</a>      <p class='mega-menu'>        <p class="container cf">          <ul class="ul-reset">            <h3>Heading 1</h3>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>          </ul><!-- .ul-reset -->          <ul class="ul-reset">            <h3>Heading 2</h3>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>          </ul><!-- .ul-reset -->          <ul class="ul-reset">            <h3>Heading 3</h3>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>          </ul><!-- .ul-reset -->          <ul class="ul-reset">            <h3>Heading 4</h3>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>            <li><a href='#'>Category Two Sublink</a></li>          </ul><!-- .ul-reset -->        </p><!-- .container -->      </p><!-- .mega-menu-->    </li><!-- .droppable -->    <li><a href='#'>Category Three</a></li>    <li><a href='#'>Category Four</a></li>    <li><a href='#'>Category Five</a></li>    <li><a href='#'>Category Six</a></li>  </ul><!-- .container .ul-reset --></nav>CSS为该大型菜单添加下面的CSS样式：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110/* #Resets–––––––––––––––––––––––––––––––––––––––––––––––––– */html {box-sizing: border-box;}*, *:before, *:after {box-sizing: inherit;  }/* #Universal and Default Styles–––––––––––––––––––––––––––––––––––––––––––––––––– */body {    background: url(../img/black-wood-small.jpg);    color: #ddd;    font-family: "Open Sans", sans-serif;    font-size: 14px;  line-height: 1;  margin: 0;  padding: 0;  text-align: center;}a {text-decoration: none;}h1 {  font-size: 40px;    font-weight: 700;  margin-bottom: 20px;    margin-top: 20px;}h2 {  font-size: 15px;    font-weight: 600;  margin-bottom: 30px;    margin-top: 10px;}.container {  margin: auto;  width: 940px;}.ul-reset {  padding-left: 0;   margin-top: 0;   margin-bottom: 0;  list-style: none;}/* #Navigation Styles–––––––––––––––––––––––––––––––––––––––––––––––––– */nav {  background: #424242;  font-size: 0;  position: relative;}nav > ul > li {  display: inline-block;    font-size: 14px;    padding: 0 15px;    position: relative;}nav > ul > li:first-child {padding-left: 0;}nav > ul > li:last-child {padding-right: 0;}nav > ul > li > a {  color: #fff;    display: block;    position: relative;    padding: 20px 0;    border-bottom: 3px solid transparent;}nav > ul > li:hover > a {  color: #69aae0;     border-bottom: 3px solid #69aae0;}/* #Mega Menu Styles–––––––––––––––––––––––––––––––––––––––––––––––––– */.mega-menu {  background: #f0f0f0;    display: none;    left: 0;    position: absolute;    text-align: left;    width: 100%;}.mega-menu h3 {color: #444;}.mega-menu ul {  float: left;    margin-bottom: 20px;    margin-right: 40px;    width: 205px;}.mega-menu ul:last-child {margin-right: 0;}.mega-menu a {  border-bottom: 1px solid #ddd;    color: #4ea3d8;    display: block;    padding: 10px 0;}.mega-menu a:hover {color: #2d6a91;}/* #Droppable Class Styles–––––––––––––––––––––––––––––––––––––––––––––––––– */.droppable {position: static;}.droppable > a:after {  content: "\f107";    font-family: FontAwesome;    font-size: 12px;    padding-left: 6px;    position: relative;    top: -1px;}.droppable:hover .mega-menu {display: block;}/* #Browser Clearfix–––––––––––––––––––––––––––––––––––––––––––––––––– */.cf:before,.cf:after {  content: " "; /* 1 */   display: table; /* 2 */}.cf:after {clear: both;}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读：Vue.js开发mpvue框架步骤详解jquery fullpage插件添加头部与尾部版权相关以上就是CSS实现大型下拉菜单步骤详解的详细内容，更多请关注php中文网其它相关文章！

这次给大家带来CSS3二级导航菜单制作步骤详解，CSS3二级导航菜单制作的注意事项有哪些，下面就是实战案例，一起来看一下。如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动态显示与隐藏。1 结构一般导航的主体我们主要是使用ul li标签12345678910111213141516171819202122232425262728293031323334<body>    <header>        <!-- 一级导航开始 -->        <nav>            <ul class="menu">                <li>                    <a href="#">首页</a>                </li>                <li>                    <a href="#">产品</a>                    <!-- 二级导航开始 -->                    <ul class="submenu">                        <li><a href="#">小程序</a></li>                        <li><a href="#">微信</a></li>                        <li><a href="#">企业站</a></li>                    </ul>                    <!-- 二级导航结束 -->                </li>                <li>                    <a href="#">服务</a>                    <!-- 二级导航开始 -->                    <ul class="submenu">                        <li><a href="#">技术支持</a></li>                        <li><a href="#">产品外包</a></li>                    </ul>                    <!-- 二级导航结束 -->                </li>                <li><a href="#">关于我们</a></li>                <li><a href="#">人才招聘</a></li>            </ul>        </nav>        <!-- 一级导航结束 -->    </header></body>2 布局导航的布局，由于子元素要随着父元素，所以对二级菜单选取定位布局。要想让多个li在一行中显示，那么就需要让li进行浮动。12345678910111213141516171819202122232425262728293031323334353637body{margin: 0; font-size: 14px; color: #666}    ul,ol{margin: 0;padding: 0; list-style: none;}    a {text-decoration: none; color: #666;}    /*一级导航*/    /*背景色*/    ul.menu,ul.submenu {        background-color: #ededed;    }    /*一级导航浮动*/    ul.menu::after {        content: '';        display: block;        clear: both;    }    ul.menu > li {        float: left;        width: 120px;        line-height: 3em;        height: 3em;        text-align: center;        cursor:pointer;    }     /*二级导航项分割线*/    ul.submenu {        /*默认隐藏*/        display: none;    }    ul.submenu > li {        border-bottom: 1px solid #fff;    }         /*内容区*/    .content {        min-height: 800px;        background-color: #fff;    }3. 二级菜单显示特效光标放到导航上，当前元素背景色变深，字体颜色变淡。如果有二级菜单，显示二级菜单为了实现上述两个特效，我们可以利用伪类选择器（:hover）来捕捉光标悬浮的操作。并且使用伪类选择器（:hover）来选择到当前菜单对应的二级菜单利用如下CSS可以快速实现该特效。12345678910/*选中特效*/ul.menu > li:hover {    background-color: #666;}ul.menu > li:hover > a {    color: #fff;}ul.menu > li:hover > ul.submenu {    display: block;}4. 动画上述代码中二级菜单的显示是瞬间的。能否提供一个缓慢动画过渡的效果，当然也是没问题。这里需要使用animation来进行动画的配置，那么动画帧可以自己写或者是寻求第三方代码库（animate.css）的支持。这里我将使用透明度来实现这个淡入效果123456789101112131415161718/*动画帧*/@keyframes fade {    from {        opacity: 0;    }    to {        opacity: 1;    }}/*基础动画样式*/.animated {    animation-duration: 1s;    animation-fill-mode: both;}.fadeIn {    animation-name: fade;    animation-direction: normal;}动画定义好后，可以直接将动画样式引用到ul.submenu上，注意，如果使用的是animate.css，那么上述步骤将省略，直接用其提供好的动画样式即可。1234567<!-- 二级导航开始 --><ul class="submenu animated fadeIn">    <li><a href="#">小程序</a></li>    <li><a href="#">微信</a></li>    <li><a href="#">企业站</a></li></ul><!-- 二级导航结束 -->相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读：H5+WebWorkers多线程开发使用详解CSS与媒体查询实现网页导航功能（附代码）以上就是CSS3二级导航菜单制作步骤详解的详细内容，更多请关注php中文网其它相关文章！

这篇文章主要介绍了HTML5离线应用与客户端存储的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧支持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用，就是在设备不能上网的情况下仍然可以运行的应用。开发离线Web 应用需要几个步骤。首先是确保应用知道设备是否能上网，以便下一步执行正确的操作。然后，应用还必须能访问一定的资源（图像、Javascript、CSS等），只有这样才能正常工作。最好，必须有一块本地空间用户保存数据，无论能否上网都不妨碍读写。HTML5 及其相关的 API让开发离线应用成为现实。离线检测要知道设备是否在线还是离线，HTML5 定义了一个 navigator.onLine 属性，这个属性值为 true 表示设备能上网，值为 false 表示设备离线。12345if (navigator.onLine) {    // 正常工作} else {    // 执行离线状态时的任务}由于 navigator.onLine 存在一定的兼容性问题，因此除了 navigator.onLine 属性之外，为了更好地确定网络是否可用，HTML5 还定义了两个事件 online 和 offline。当网络在离线和在线之间切换时在 window 对象上触发这两个事件：1234567window.addEventListener('online', function() {    // 正常工作}); window.addEventListener('offline', function() {    // 执行离线状态时的任务});在实际应用中，最好在页面加载后，最好先通过 navigator.onLine 取得初始的状态。然后通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时，navigator.onLine 属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化。应用缓存HTML5 的应用缓存（application cache），或者简称为 appcache，是专门为开发离线 Web 应用而设计的。Appcache 就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。描述文件示例：12345CACHE MANIFEST# Comment file.jsfile.css然后在 html 中引用：1<html manifest="./xxx.manifest">xxx.manifest 文件的 MIME 类型必须是 text/cache-manifest。该 API 的核心是 applicationCache 对象，这个对象有一个 status 属性，属性的值是常量，表示应用缓存的如下当前状态：0： 无缓存，即没有与页面相关的应用缓存1： 闲置，即应用缓存未得到更新2： 检查中，即正在下载描述文件并检查更新3： 下载中，即应用缓存正在下载描述文件中指定的资源4： 更新完成，即应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过 swapCache() 来使用了5： 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存相关事件：checking： 在浏览器为应用缓存查找更新时触发error： 在检查更新或者下载资源期间发生错误时触发noupdate： 在检查描述文件发现文件无变化时触发downloading： 在开始下载应用缓存资源时触发progress： 在文件下载应用缓存的过程中持续不断地触发updateready： 在页面新的应用缓存下载完毕且可以通过 swapCache() 使用时触发cached： 在应用缓存完整可用时触发一般来讲，这些事件会随着页面加载按上述顺序依次触发。也可以通过调用 update() 方法手动触发上述事件。数据存储CookieHTTP Cookie，通常直接叫做 cookie，是在客户端用于存储会话信息的。该标准要求服务器对任意 HTTP 请求发送 Set-Cookie HTTP 头信息作为响应的一部分，其中包含会话信息。服务器响应头示例：HTTP/1.1 200 OKContent-type: text/htmlSet-Cookie: name=valueOther-header: other-header-value然后浏览器 Set-Cookie 的会话信息，之后为每个请求添加 Cookie HTTP 头将信息发送回服务器，如下所示：GET /index.html HTTP/1.1Cookie: name=valueOther-header: other-header-value发送回服务器的额外信息可以用于唯一验证客户来自于发送的哪个请求。完整的 cookie 包括：名称： 一个唯一确定 cookie 的名称。必须被 URL 编码。值： 存储在 cookie 中的字符串值。必须被 URL 编码。域： cookie 对于哪个域是有效的。路径： 对于指定域中的那个路径，应该向服务器发送 cookie。失效时间： 表示 cookie 何时应该被删除的时间戳。安全标志： 指定后，cookie 只有在使用 SSL 连接的时候才发送到服务器。复制代码代码如下:1Set-Cookie：name=value; domain=www.laixiangran.cn; path=/; expires=Mon, 29 Oct 2018 03:53:10 GMT; secure;基本用法在 JavaScript 中操作 cookie 有些复杂，这是因为 document.cookie 属性在不同的使用方式中表现出不同的行为。当用来获取属性值时，document.cookie 返回当前页面可用的所有 cookie 字符串，一系列由分号隔开的键值对，如下所示：12document.cookie// name1=value1;name2=value2;name3=value3;当用来设置值时，document.cookie 属性会设置一个新的 cookie 字符串添加到现有的 cookie 集合中，并不会像普通对象设置属性一样覆盖原 cookie 的值，除非设置的 cookie 的名称已经存在，如下所示：1234567// cookie 的名称不存在document.cookie = 'name4=value4'// name1=value1;name2=value2;name3=value3;name4=value4;// 而不是 name4=value4;// cookie 的名称存在document.cookie = 'name3=value4'// name1=value1;name2=value2;name3=value4;从上面的代码我们可以看出，我们要读取或者修改或者删除指定 cookie 的值都不是很直观方便，因此我们可以封装一些方法，方便我们对 cookie 的操作：123456789101112131415161718192021222324252627282930313233343536373839404142434445var CookieUtil = {     get: function (name) {        var cookieName = encodeURIComponent(name) + "=",            cookieStart = document.cookie.indexOf(cookieName),            cookieValue = null,            cookieEnd;         if (cookieStart > -1) {            cookieEnd = document.cookie.indexOf(";", cookieStart);            if (cookieEnd == -1) {                cookieEnd = document.cookie.length;            }            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));        }         return cookieValue;    },     set: function (name, value, expires, path, domain, secure) {        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);         if (expires instanceof Date) {            cookieText += "; expires=" + expires.toGMTString();        }         if (path) {            cookieText += "; path=" + path;        }         if (domain) {            cookieText += "; domain=" + domain;        }         if (secure) {            cookieText += "; secure";        }         document.cookie = cookieText;    },     unset: function (name, path, domain, secure) {        this.set(name, "", new Date(0), path, domain, secure);    }};使用方法：1234567891011121314// 设置 cookieCookieUtil.set('name', 'lai');CookieUtil.set('sex', 'man'); // 读取 cookieCookieUtil.get('name'); // 'lai'CookieUtil.get('sex'); // 'man' // 删除 cookieCookieUtil.unset('name');CookieUtil.unset('sex'); // 设置 cookie，包括它的路径、域、失效日期CookieUtil.set('name', 'lai', '/', 'www.laixiangran.cn', new Date());大小限制每个域的 cookie 总数是有限，不同浏览器之间所有不同，IE6 以下是最多 20 个，IE7 以上最多 50 个，Firefox最多 50 个，Opera 最多 30 个，Safari 和 Chrome 不限制。cookie 的尺寸也有限制，大多数浏览器有大约 4096B。Web StorageWeb Storage 的目的是克服由 cookie 带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage 的两个主要目标是：提供一种在 cookie 之外存储会话数据的路径。提供一种存储大量可以跨会话存在的数据的机制。Web Storage 主要定义了两种对象：sessionStorage 和 localStorage，是 Storage 对象的实例，这两个对象区别如下：sessionStorage： 存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。存储数据大小大多数限制在 2.5M，少数浏览器限制在 5M 或者不限制。localStorage： 数据保存到通过 JavaScript 删除或者是用户清除浏览器缓存。存储数据大小大多数限制在 5M，少数浏览器限制在 2.5M 或者不限制。Storage 类型有如下方法：clear()： 删除所有值。getItem(name)： 根据指定的名字 name 获取对应的值。key(index)： 获取 index 位置处的值的名字。removeItem(name)： 删除由 name 指定的键值对。setItem(name, value)： 为指定的 name 设置一个对应的值，值为字符串。对 sessionStorage 和 localStorage 进行操作都会触发 storage 事件，该事件对象有以下属性：domain： 发生变化的存储空间的域名。key： 设置或者删除的键名。newValue： 如果是设置值，则是新值；如果是删除键，则是null。oldValue： 键被更改之前的值。IndexedDBIndexed Database API，简称为 IndexedDB，是在浏览器中保存结构化数据的一种数据库。其思想是创建一套 API，方便保存和读取 JavaScript 对象，同时还支持查询和搜索。IndexedDB 设计的操作完全是异步进行的。因此，大多数操作会以请求方式进行。基本用法123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB, // 获取 indexedDB    request,    store,    database,    users = [        {            username: "007",            firstName: "James",            lastName: "Bond",            password: "foo"        },        {            username: "ace",            firstName: "John",            lastName: "Smith",            password: "bar"        }    ]; // 打开数据库request = indexedDB.open("example"); // 注册 onerror 及 onsuccess 事件request.onerror = function (event) {    alert("Something bad happened while trying to open: " + event.target.errorCode);};request.onsuccess = function (event) {    database = event.target.result;         // 操作数据库    initializeDatabase();}; function initializeDatabase() {    if (database.version != "1.0") {             // 设置数据库版本号        request = database.setVersion("1.0");        request.onerror = function (event) {            alert("Something bad happened while trying to set version: " + event.target.errorCode);        };        request.onsuccess = function (event) {                     // 使用 users 创建对象存储空间            store = database.createObjectStore("users", {keyPath: "username"});            var i = 0,                len = users.length;             while (i < len) {                             // 插入新值                store.add(users[i++]);            }             alert("Database initialized for first time. Database name: " + database.name + ", Version: " + database.version);        };    } else {        alert("Database already initialized. Database name: " + database.name + ", Version: " + database.version);                 // transaction() 创建事务，objectStore() 将存储空间传入事务        request = database.transaction("users").objectStore("users").get("007");        request.onsuccess = function (event) {            alert(event.target.result.firstName);        };    }}限制和 Web Storage类似，只能由同源（相同协议、域名和端口）页面操作，因此不能跨域共享信息。Firefox 大小上限为 50M，移动端的 Firefox 大小上限为 5M，不允许本地文件访问。Chrome 大小上限为 5M，允许本地文件访问。以上就是HTML5离线应用与客户端存储的实现的详细内容，更多请关注php中文网其它相关文章！

这篇文章主要介绍了关于让IE支持HTML5的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下越来越多的站点开始使用 HTML5 标签，但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问，解决方案有下面两个 越来越多的站点开始使用 HTML5 标签，但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问，解决方案有下面两个： 1.为网站创建多套模板，通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面，例如：优酷网。 2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。 针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。 html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可： 复制代码代码如下:1<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >下面是一些补充：当然包括本人BLOG在内。关于HTML5不得不提IE，在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时，微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5，以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。 以下是在的IE 8显示的例子,未作处理前：让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE在对象中创建对应的节点。 复制代码代码如下:123456789<!--[if IE]> <script> document.createElement("header"); document.createElement("footer"); document.createElement("nav"); document.createElement("article"); document.createElement("section"); </script> <![endif]-->添加以上代码后，在IE8中显示的效果如下： sitepoint例子中创建节点的JavaScript代码似乎过于臃肿，在smashingmagazine提供的代码似乎更简洁。 演示如下提示：您可以先修改部分代码再运行复制代码代码如下:12345<!--[if IE]> <script> (function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})() </script> <![endif]-->HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素，如下例： 复制代码代码如下:123header, footer, nav, section, article { display:block; }以上就是让IE支持HTML5的方法的详细内容，更多请关注php中文网其它相关文章！

这次给大家带来CSS3做出多样边框特效，CSS3做出多样边框特效的注意事项有哪些，下面就是实战案例，一起来看一下。半透明边框实现效果：实现代码：1234567891011121314<p>你能看到半透明的边框吗？</p>p {    /* 关键代码 */    border: 10px solid rgba(255,255,255,.5);    background: white;    background-clip: padding-box;    /* 其它样式 */    max-width: 20em;    padding: 2em;    margin: 2em auto 0;    font: 100%/1.5 sans-serif;}实现要点：设置边框为半透明，这是还看不到半透明边框，因为默认情况下，背景会延伸到边框所在的区域下层，也就是背景是被边框的外沿框裁切掉。通过设置 background-clip: padding-box （初始值是 border-box） 让背景不要延伸到边框所在的区域下层，也就是让内边距的外沿来裁切背景。多重边框实现效果：实现代码：12345678910111213141516171819202122232425<p></p>/* box-shadow 实现方案 */p {    /* 关键代码 */    box-shadow: 0 0 0 10px #655,            0 0 0 15px deeppink,            0 2px 5px 15px rgba(0,0,0,.6);    /* 其它样式 */    width: 100px;    height: 60px;    margin: 25px;    background: yellowgreen;}/* border/outline 实现方案 */p {    /* 关键代码 */    border: 10px solid #655;    outline: 5px solid deeppink;         /* 其它样式 */    width: 100px;    height: 60px;    margin: 25px;    background: yellowgreen;}实现要点：box-shadow 实现方案使用的是 box-shadow 的第四个参数（扩张半径）。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。而借助 box-shadow 支持逗号分割语法，可创建任意数量的投影，因此我们就可实现多重边框效果。border/outline 实现方案是使用 border 设置一层边框，再使用outline 设置一层边框。这个方案可实现虚线边框，但它只能实现两层边框。边框内圆角实现效果：实现代码：1234567891011<p>我有一个漂亮的内圆角</p>p {    outline: .6em solid #655;    box-shadow: 0 0 0 .4em #655; /* 关键代码 */    max-width: 10em;    border-radius: .8em;    padding: 1em;    margin: 1em;    background: tan;    font: 100%/1.5 sans-serif;}实现要点：outline 不会跟着元素的圆角走（因而显示出直角），但 box-shadow 确实会的，因此，将两者叠加到一起，box-shadow（其扩张值大概等于 border-radius 值的一半） 会刚好填补 outline 和容器圆角之间的空隙，因此可达到我们想要的效果。相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读：Vue.js开发mpvue框架步骤详解jquery fullpage插件添加头部与尾部版权相关以上就是CSS3做出多样边框特效的详细内容，更多请关注php中文网其它相关文章！

将 HTML 元素按功能进行分组。先简单会汇总下，熟悉的放前面。123456789101112根元素:<html> 文档元数据:<link>、<meta>、<style>、<style>内容分区:<header>、<nav>、 <section>、<aside> 、<footer> 、<h1>~<h6> 、<article> 、<address>、<hgroup> 文本内容:<main>、<p>、<p>、<pre>、<ol>、 <ul>、<li>、<dl> 、<dt>、<dd>、<figure> 、<figcaption>、<blockquote> 、<hr>内联文本语义:<span>、<a>、<strong>、<em>、<q>、<br>、<mark>、<code>、<abbr>、<b>、<bdi>、<bdo>、<sub>、<sup>、<time>、<i>、<u>、<cite>、<data>、<kbd>、<nobr>、<s>、<samp>、<tt>、<var>、<wbr>、<rp>、<rt>、<rtc>、<ruby>图片和多媒体:<img><audio> <video><track><map><area>内嵌内容:<iframe>、<embed>、<object> 、<param>、<picture>、<source>脚本:<canvas>、<noscript>、<script>编辑标识:<del>、<ins> 表格内容:<table>、<caption>、<thead>、<tbody>、<tfoot>、<tr>、、<col><colgroup>、<th>、<td>表单:<form> 、<input>、<textarea> 、<label>、<button>、<datalist>、<fieldset>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select>交互元素<details>、<summary>、<dialog>、<menu>Web 组件:<slot>、<template>过时的和弃用的元素:<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>1. 根元素1<html>  HTML文档的根2. 文档元数据元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件 (如搜索引擎， 浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。123<link> 链接<meta> 元数据信息，(<base>, <link>, <script>, <style> 或 <title>不能表示的元数据信息) <style> 样式信息<style> 文档标题3. 内容分区内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。12345678<header> 表示一组引导性的帮助<nav>  导航<section> 表示文档中的一个区域（或节），通过是否含一个标题作为子节点来辨识<section><aside> 表示与其余页面无关的内容部分<footer> 表示最近一个章节内容或者根节点元素的页脚<h1>~<h6> 标题<article> 表示文档、页面、应用或网站中的独立结构<address> 地址信息<hgroup> 代表一个段的标题4. 文本内容使用 HTML 文本内容元素来组织在开标签 和闭标签 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。1234567891011121314<main> 文档<body>或应用的主体部分<div> 文档分区元素， 通用型流内容容器<p> 段落<pre> 预定义格式文本<ol> 有序列表<ul> 无序列表<li> 列表条目元素<dl> 描述列表元素<dt>术语定义元素<dd> 描述元素，描述列表  (<dl>) 的子元素，<dd>与 <dt> 一起用。<figure> 代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用<figcaption>图片说明/标题，于描述其父节点 <figure> 元素里的其他数据<blockquote> HTML 块级引用元素<hr>表示段落级元素之间的主题转换，视觉上看是水平线5. 内联文本语义使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字。12345678910111213141516171819202122232425262728<kbd> 表示用户输入<span> 通用行内容器<a> 超链接<strong> 粗体显示<em> 标记出需要用户着重阅读的内容，可通过嵌套加深着重程度<q> 短的引用文本<br> 换行<mark> 代表突出显示的文字，可以用来显示搜索引擎搜索后关键词。<code> 呈现一段计算机代码<abbr> 缩写，并可选择提供一个完整的描述<b>提醒注意，样式和粗体类似（不要用于显示粗体，用css font-weight来创建粗体）<bdi> 双向隔离元素<bdo> 双向覆盖元素<sub> 排低文本<sup> 排高文本<time> 时间<i> 区分普通文本的一系列文本，内容通常以斜体显示<u> 使文本在其内容的基线下的一行呈现下划线<cite> 表示一个作品的引用<data> 将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的，一定要使用 <time>。<dfn> 表示术语的一个定义<kbd> 表示用户输入<nobr> 阻止文本自动拆分成新行，不应该使用，应该使用css属性<s> 删除线，提倡使用 <del> 和 <ins> 元素<samp> 标识计算机程序输出<tt> 电报文本元素<var> 表示变量的名称，或者由用户提供的值<wbr> 一个文本中的位置，其中浏览器可以选择来换行<rp><rt><rtc><ruby>6. 图片和多媒体123456789HTML 支持各种多媒体资源，例如图像，音频和视频。<img> 图片<audio> 音频内容<video> 视频内容<track> 被当作媒体元素—<audio> 和 <video>的子元素来使用。它允许指定计时字幕（或者基于事件的数据），例如自动处理字幕。<map> 与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).<area> 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。7. 内嵌内容除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互。1234<iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。<embed> 将外部内容嵌入文档中的指定位置<object> 表示引入一个外部资源<param>  定义了 <object>的参数<picture> 容器，用来为其内部特定的 <img> 元素提供多样的 <source> 元素。<source> 资源8. 脚本为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。某些元素支持此功能。1<canvas> 通过脚本（通常是JavaScript）绘制图形<noscript> 替代未执行脚本<script> 用于嵌入或引用可执行脚本9. 编辑标识这些元素能标示出某个文本被更改过的部分。1<del>  表示一些被从文档中删除的文字内容<ins>  定义已经被插入文档中的文本10. 表格内容这里的元素用于创建和处理表格数据。元素在一个 元素中可以出现一个或者更多。1234567<table> 表格<caption> 表格的标题，通常作为 <table> 的第一个子元素出现<thead> 表格页眉<tbody> 表格主体<tfoot> 表格页脚<tr> 行<col> 列， 通常位于<colgroup>元素内<colgroup> 表格列组<th> 表头<td> 表格单元11. 表单HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。123456789101112<form> 表单<input> 输入域<textarea> 多行文本域<label> 标题<button> 按钮<datalist> 包含了一组<option>元素,这些元素表示其它表单控件可选值<fieldset> 一组相关的表单元素，并使用外框包含起<legend> 表示它的父元素<fieldset>的内容的标题<meter> 显示已知范围的标量值或者分数值<optgroup> 一个 <select> 元素中的一组选项<option>  用于定义在<select>,  <optgroup> 或<datalist> 元素中包含的项<output> 表示计算或用户操作的结果<progress> 进度条<select> 选项菜单12. 交互元素HTML 提供了一系列有助于创建交互式用户界面对象的元素。1<details><summary> 用作 一个<details>元素的一个内容的摘要，标题或图例。<dialog> 对话框<menu> 菜单13. Web 组件Web 组件是种近似 HTML（HTML-related） 的技术，这使得它能够，从本质上讲，创建和使用自定义元素，就好像它是普通的 HTML。此外，你甚至可以创建自定义版本的标准 HTML 元素。（注意：规范还没有确定）1<slot> web组件技术的一部分，slot是web组件的一个占位符<template> 用于保存客户端内容的机制14. 过时的和弃用的元素1<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>15. 参考链接https://developer.mozilla.org/zh-CN/docs/Web/HTML/Elementphp中文网在线手册 http://www.php.cn/course/27.html以上就是html标签分类的详细内容，更多请关注php中文网其它相关文章！

这篇文章介绍的内容是关于HTML基础之选择器 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下选择器的作用可以在样式表里更加方便快捷的对html的各种样式以及属性进行操作分类1、标签类型选择器：对标签设置样式123a{  text-decoration: none;}2、包含选择符123span[class=demo]{    color:red;}3、内部包含选择符12345p a{    text-decoration: underline;    font-size: 30px;    color:#ff00ff;}4、子对象选择符123body>p{    font-size:34px;}5、id选择器123#content{    border-style: solid;}6、类选择器123456.note{    font-size: 34px;}span.note1{    font-size: 54px;}7、分组选择器123td,p,a{                 }以上就是HTML基础之选择器 的详细内容，更多请关注php中文网其它相关文章！

这篇文章主要介绍了关于Html实现歌曲歌词同步，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>歌词同步</title>    <style>        body {            background:url("Img/起风了.jpg") center no-repeat ;            background-size:60% 100%;        }        * {            margin:0 auto;            padding:0;        }        .play {            color: #01e5ff;            font-size: 24px;        }         .overPlay {            font-size: inherit;            color: #fff;        }         #p_lrc {            position: absolute;            padding-top: 0px;            left: 28%;            top: 300px;            width:50%;            transition: top .5s;            margin: 0 auto;                     }         .p_DisLrc {            overflow: hidden;            color:#b1abab;            width: 70%;            height: 600px;              position: relative;            margin: 0 auto;                     }         #audio {            width: 100%;        }         .p_audio {            width: 50%;            margin: 0 auto;        }         .p_but {            position: absolute;            font-size: 26px;            font-weight: 900;            top: 40%;            right: 0%;        }             .p_but p {                cursor: pointer;            }    </style>    <link href="CSS/iconfont.css" rel="stylesheet" /></head>   <body>    <p id="p_1" style="display: none;">    </p>    <!-- 歌词显示界面 -->    <p class="p_DisLrc">        <p id="p_lrc">            <p id="lrc_row1"></p>        </p>        <!-- 用于调整歌词位置 -->        <p class="p_but">            <p onmousedown="time = setInterval(btn_down,0)" onmouseup="clearInterval (time)"><i class="iconfont icon-top"></i></p>            <p onmousedown="time = setInterval(btn_top,0)" onmouseup="clearInterval (time)"><i class="iconfont icon-down"></i></p>        </p>    </p>    <!-- 播放器控件 -->    <p class="p_audio">        <audio id="audio" controls="controls" autoplay="autoplay">            <source src="audio/起风了.mp3" type="audio/mpeg">        </audio>    </p>       <script src="JavaScript/jquery-3.3.1.js"></script>    <script>        var audio = document.getElementById("audio");        var play = $("#lrc_row1");        //将歌词添加到p中        $(document).ready(function () {            //加载歌词            $('#p_1').load("LRC/qifengle.lrc");            //获取所有歌词            setTimeout(function () {                var lrcArr = $("#p_1").text().split('\n');                for (var i = 4; i < lrcArr.length; i++) {                    var p = document.createElement("p");                    //空白歌词不进行加载                    if (lrcArr[i].substring(10) != "") {                        p.innerText = lrcArr[i].substring(10);                        $("#p_lrc").append(p);                    }                }            }, 200)        })         function lrcDisplay() {            //获取播放进度(转换的格式为: 00:00)            var minute = parseInt(audio.currentTime / 60);//分钟            minute = minute == 0 ? "00" : (minute + "").length < 2 ? "0" + minute : minute;            //获取秒数            var second = (parseInt(audio.currentTime)) % 60;            second = second == 0 ? "00" : (second + "").length < 2 ? "0" + second : second;            //正则表达匹配歌词            var regex = new RegExp('\\[' + (minute + ":" + second) + '.+\\].+\n');            var text = regex.exec($("#p_1").text());            if (text != null) {                var str1 = new String($(play).next().text());                var str2 = new String(text[0].substring(10));                if (str1.trim() == str2.trim()) {                    //歌词颜色变色                    $(play).attr("class", "overPlay");                    play = $(play).next();                    $(play).attr("class", "play");                    //歌词滚动(自动)                    var top = parseInt($("#p_lrc").css("top"));                    $("#p_lrc").css("top", -1 * ((-1 * top) + 22) + "px");                }            }        }        setInterval(lrcDisplay, 500);        //歌词滚动(手动)        var time = null;        function btn_top() {            var top = parseInt($("#p_lrc").css("top"));            $("#p_lrc").css("top", -1 * ((-1 * top) + 100) + "px");        }        function btn_down() {            var top = parseInt($("#p_lrc").css("top"));            if (top <= 0)                $("#p_lrc").css("top", -1 * ((-1 * top) - 100) + "px");        }         //调整歌词位置的函数        function btn_top() {            var top = parseInt($("#p_lrc").css("top"));            $("#p_lrc").css("top", -1 * ((-1 * top) + 30) + "px");        }        /*            1.歌词文件不能是默认编码(记事本文件和lrc文件默认为ANSI编码) 只需要改为 UTF-8或 者GB2312,否则乱码            2.歌曲因为没有算毫秒差距,可能出现细微误差            3.因为网页同源策略的原因,外部直接打开html文件只能用firefox访问,               不能进行跨域访问,如果不使用文件读取可以在任意地方打开.            4.因为ajax识别原因,会把空格当做分割内容,即歌词文件名不能有空格            5.因为js对文件操作以及ajax请求存在诸多默认限制,若以类似方法在winfrom asp等中很 多问题都会得到解决.            6.setTimeout()和setInterval()，在浏览器窗口非激活的状态下会停止工作或者以极慢的 速度工作。目前我已知就IE不会有这种问题。        */    </script></body></html>相关推荐：HTML实现美化上传文件样式HTML实现抢票功能(设定时间打开抢票的页面)以上就是Html实现歌曲歌词同步的详细内容，更多请关注php中文网其它相关文章！

这篇文章主要介绍了关于HTML5表单相关元素和属性，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下<form>:可以指定id、style、class等核心属性，还可以指定onclick事件属性。除此之外，还可以指定如下几个属性。action：指定表单提交的URL或URI。method：指定请求方式，一般为get或post。enctype：指定表单内容进行编码所使用的字符集。name：指定表单的唯一名称，一般与id的属性值一致。target：指定使用哪种方式打开目标URL。enctype属性用于指定表单数据的编码方式，该属性有三个属性值：application/x-www-form-urlencoded：这是默认的编码方式，它只处理表单控件里面的value属性值，采用这种编码方式的表单会将表单控件的值处理成URL编码方式。multipart/form-data：这种编码方式会以二进制的方式处理表单数据，这种编码方式会将文件域指定文件的内容封装到请求参数里。text/plain：当表单的action属性值为mailto:URL的形式时使用这种编码方式适用于直接通过表单发送邮件的方式。关于表单控件转换成请求参数的规则如下：每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数。如果多个表单控件有相同的name属性，则多个表单控件只生成一个请求参数，只是该参数有多个值。表单控件的name属性指定请求参数名，而value属性指定请求参数值。如果某个表单控件设置了disabled或disabled="disabled"属性，则该表单控件不再生成请求参数。<input>：单行文本框：指定<input/>元素的type属性为text。密码文本框：指定<input/>元素的type属性为password。隐藏域：指定<input/>元素的type属性为hidden。单选框：指定<input/>元素的type属性为radio。复选框：指定<input/>元素的type属性为checkbox。图像域：指定<input/>元素的type属性为image。文件上传域：指定<input/>元素的type属性为file。提交、重置、无动作按钮：分别指定<input/>元素的type属性为submit、reset或button即可。<input/>元素可以指定id，style，class等核心属性，也可以指定onclick等事件属性，还可以指定onfocus、onblur等焦点事件属性。除此之外还可以指定如下属性：checked：设置单选框，复选框默认是否选中。disabled：表示该元素被禁用，当type="hidden"时不能指定该属性。maxlength：指定输入框允许输入的最大字符数。readonly：指定文本框的内容不允许修改。size：指定该元素的宽度，当type="hidden"时不能指定该属性。src：指定图像域所显示图像的URL，只有当type="image"时才可以指定该属性。12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>    <title>getForm</title></head><body>    <form action="http://www.crazyit.org" method="get">        单行文本框：<input id="username" name="username" type="text" readonly="readonly"/><br/>        密码框：<input id="password" name="password" type="password"/><br/>        隐藏域：<input id="hidden" name="hidden" type="hidden"/><br/>        第一组单选框：<br/>        <input id="color" name="color" type="radio" value="red"/>        <input id="color2" name="color" type="radio" value="green"/>        <input id="color3" name="color" type="radio" value="blue"/><br/>        第二个单选框：<br/>        <input id="gender" name="gender" type="radio" value="male"/>        <input id="gender2" name="gender" type="radio" value="female"><br/>        两个复选框：<br/>        <input id="website" name="website" type="checkbox" value="leegang.org"/>        <input id="website2" name="website" type="checkbox" value="crazyit.org"/><br/>        文件上传域：<input id="file" name="file" type="file"/><br/>        图像域：<input type="image" src="img/wjc.gif" alt="疯狂Java联盟"/><br/>        下面是四个按钮：<br/>        <input id="ok" name="ok" type="submit" value="提交"/>        <input id="dis" name="dis" type="submit" value="提交" disabled="disabled"/>        <input id="cancle" name="cancle" type="reset" value="重填"/>        <input id="no" name="no" type="button" value="无动作"/>    </form></body></html><label/>:让标签和表单控件关联有两种方式：隐式使用for属性：for属性为所关联表单控件的id属性值。（推荐使用）显示关联：将普通文本、表单控件一起放在<label/>元素内部即可。123456<form action="http://www.crazyit.org" method="get">        <label for="username">单行文本框：</label>        <input id="username" name="username" type="text"/><br/>        <label>密码框：<input id="password" name="password" type="password"/></label><br/>        <input id="ok" type="submit" value="登录疯狂Java联盟"/>    </form><button/>:内部可以包含普通文本、文本格式化标签、图像等内容，功能比input按钮更丰富。<button/>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外还可以指定如下属性：disabled：是否禁用按钮。name：指定按钮唯一的名称。type：指定该按钮属于哪种按钮，属性值只能为button、reset或submit。value：指定该按钮的初始值。1234<form action="http://www.crazyit.org" method="get">        <button type="button"><b>提交</b></button><br/>        <button type="submit"><img src="images/wjc.gif" alt="crazyit.org"/></button><br/>    </form><select/>:可以指定id、style、class等核心属性，该元素仅可以指定onchange事件属性。除此之外还可以指定如下属性：disabled：设置禁用该列表框和下拉菜单。multiple：设置多选。size：指定该列表框可以同时显示多个列表项。<select/>元素里，只能包含如下两种元素：<option/>：用来定义列表项和菜单项。<optgroup/>：用来定义列表项和菜单项组，该元素只能包含<option/>子元素。<textarea/>:<textarea/>元素可以指定id、style、class等核心属性，还可以指定onclick、onselect、onchange事件属性。除此之外，该元素也可以指定如下几个属性：cols：指定文本域的宽度。rows：指定文本域的高度。disabled：禁用该文本域。readonly：指定文本只读。相关推荐：HTML表单相关知识点介绍HTML5表单属性教程实例以上就是HTML5表单相关元素和属性的详细内容

这篇文章主要介绍了HTML5 video视频字幕的使用和制作,HTML5允许我们使用元素为视频指定字幕，需要的朋友可以参考下HTML5允许我们使用 元素为视频指定字幕。这个元素的各种属性允许我们指定这样的东西，比如我们添加的内容的类型，它所在的语言，当然还有对包含实际字幕信息的文本文件的引用。123456<video id="video"  controls>    <source src="./step.mp4" type="video/mp4">    <track label="中文字幕" kind="subtitles" chapters metadata srclang="zh" src="./caption.vtt" default>    <track label="ABC" kind="subtitles" srclang="de" src="./caption1.vtt">    <track label="Number" kind="subtitles" srclang="es" src="./caption2.vtt"> </video>track的属性介绍：kind被赋予一个值subtitles，表示文件包含的内容的类型label被赋予一个值，指示该字幕集所用的语言 - 例如English或Deutsch- 这些标签将出现在用户界面中，以允许用户容易地选择他们想要看到的字幕语言。src 在每种情况下都会分配一个指向相关WebVTT字幕文件的有效URL。srclang 指示每个字幕文件的内容所在的语言。该default属性在英语 元素上设置，向浏览器表明这是默认的字幕文件定义，当字幕打开并且用户没有做出特定选择时使用。WebVTT 字幕文件包含实际字幕数据的文件是遵循指定格式的简单文本文件，在这种情况下是Web视频文本轨道（WebVTT）格式。该==WebVTT插入规范仍在开发中==，但它的==主要部分是稳定的==，所以我们今天可以使用它。视频提供商（如Blender Foundation）以其视频的文本格式提供字幕和副标题，但通常采用SubRip Text（SRT）格式。可以使用在线转换器（如srt2vtt）将这些转换为WebVTT。文件格式规范：文件的后缀名为 ==.vtt====.vtt==文件的MIME type是text/vtt在Chrome和Firefox浏览器下，.vtt字幕是可以无障碍加载显示的，但是对于IE10+浏览器，虽然也支持.vtt字幕，但是却需要定义MIME type，否则会无视WebVTT格式。比较简单方式就是在字幕所在文件夹下面添加个.htaccess文件，里面写上AddType text/vtt .vtt。//文件开头下必须先声明 ==WEBVTT==WEBVTT// 起始时间 --> 结束时间，单位为毫秒00:00:00.001 --> 00:00:03.000// 对应上面的时间显示字幕，可以单独设置样式，aa类似class类名<v aa>九幽阴灵1111</v>00:00:03.001 --> 00:00:06.000<v bb>诸天神魔2222</v>00:00:06.001 --> 00:00:09.000以我血躯333300:00:09.001 --> 00:00:12.000奉为牺牲444400:00:12.001 --> 00:00:15.000三生七世5555字幕css样式设置::cue伪元件的关键是靶向个别文本轨道线索用于定型的，因为它的任何限定球杆匹配。只有少数CSS属性可以应用于文本提示：coloropacityvisibilitytext-decorationtext-shadowbackground 速记性能outline 速记性能font 速记属性line-heightwhite-space==注意：:: cue的线索样式目前适用于Chrome，Opera和Safari，但尚未在Firefox上使用。==WebVTT还支持一些HTML标签进行样式控制，常见的有声音 ==v== 标签，颜色 ==c== 标签，加粗==b==标签，倾斜==i==标签，下划线==u==标签，还有==ruby==和==lang==标签等。1234567891011121314//设置字幕的样式video::cue{    background-color:transparent;    color:white;    font-size:20px;    line-height: 100px;}// 设置单行字幕的样式 video::cue(v[voice=aa]){    color:green;}video::cue(v[voice=bb]){    color:rgb(0, 26, 128);}浏览器兼容IE默认情况下，Internet Explorer 10+字幕是启用的，并且默认控件包含一个按钮和一个菜单，该菜单提供与我们刚刚构建的菜单相同的功能。该default属性也受支持。==注意：除非您定义MIME类型，否则IE将完全忽略WebVTT文件。这可以通过将.htaccess文件添加到包含的相应目录轻松完成AddType text/vtt .vtt==苹果浏览器Safari 6.1+对Internet Explorer 10+具有类似支持，显示带有不同可用选项的菜单，并增加了一个“自动”选项，允许浏览器进行选择。Chrome和Opera这些浏览器也有类似的实现：默认情况下，字幕是启用的，默认控制集包含一个'cc'按钮，可以打开和关闭字幕。Chrome和Opera忽略元素default上的属性， 而是尝试将浏览器的语言与字幕的语言相匹配以上就是HTML5 video视频字幕的使用和制作方法的详细内容

这篇文章主要介绍了HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下这是分享按钮：123456<button onclick="call()">通用分享</button><button onclick="call('wechatFriend')">微信好友</button><button onclick="call('wechatTimeline')">朋友圈</button><button onclick="call('qqFriend')">QQ</button><button onclick="call('qZone')">QQ空间</button><button onclick="call('weibo')">微博</button>这是js调用代码：12345678910111213141516171819202122232425262728<script type="text/javascript" src="NativeShare.js"></script><script type="text/javascript">    var nativeShare = new NativeShare()    var shareData = {        title: '分享标题',        desc: '',        // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。        link: 'https://www.baidu.com',        icon: 'https://www.baidu.com',        // 不要过于依赖以下两个回调，很多浏览器是不支持的        success: function() {            console.log("success")        },        fail: function() {            console.log("fail")        }    }    nativeShare.setShareData(shareData)    function call(command) {        try {            nativeShare.call(command)        } catch (err) {            // 如果不支持，你可以在这里做降级处理            alert(err.message)            // console.log("err.message")        }    }</script>这个就是分享js文件NativeShare.js：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["NativeShare.js"]=t():e["NativeShare.js"]=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function r(){}function o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:r,n=document.getElementsByTagName("script")[0],o=document.createElement("script");o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),o.onload=t}function i(e,t){if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(var n=Object(e),r=1;r<arguments.length;r++){var o=arguments[r];if(null!=o)for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(n[i]=o[i])}return n}function a(e){if(se)location.href=e;else{var t=document.createElement("iframe");t.style.display="none",t.src=e,document.body.appendChild(t),setTimeout(function(){t&&t.parentNode&&t.parentNode.removeChild(t)},2e3)}}function c(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=[];for(var r in e)t?n.push(r+"="+encodeURIComponent(e[r])):n.push(r+"="+e[r]);return n.join("&")}function u(e){var t=document.createElement("a");return t.href=e,t.hostname}function l(e){Oe?Oe.content=e:document.head.insertAdjacentHTML("beforeend",'<meta name="description" content="'+e+'">')}function f(e){je?je.href=e:document.head.insertAdjacentHTML("beforeend",'<link rel="shortcut icon" href="'+e+'">')}function s(e){document.title=e}function p(e){return c({share_id:924053302,url:_e.encode(e.link),title:_e.encode(e.title),description:_e.encode(e.desc),previewimageUrl:_e.encode(e.icon),image_url:_e.encode(e.icon)})}function h(){a((se?"mqqapi://share/to_fri?src_type=web&version=1&file_type=news":"mqqapi://share/to_fri?src_type=isqqBrowser&version=1&file_type=news")+"&"+p(Se))}function b(){a((se?"mqqapi://share/to_fri?file_type=news&src_type=web&version=1&generalpastboard=1&shareType=1&cflag=1&objectlocation=pasteboard&callback_type=scheme&callback_name=QQ41AF4B2A":"mqqapi://share/to_qzone?src_type=isqqBrowser&version=1&file_type=news&req_type=1")+"&"+p(Se))}function y(){var e={url:Se.link,title:Se.title,pic:Se.icon,desc:Se.desc};location.href=" function d(){var e={url:Se.link,title:Se.title,pic:Se.icon};location.href=" function w(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function m(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function O(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function j(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function S(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function k(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function P(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function C(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function q(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function T(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function E(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function D(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function x(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function Q(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function M(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function N(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function A(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function U(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function B(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function R(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function W(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function I(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function z(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function F(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function L(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function Z(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function J(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function H(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function X(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function G(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function K(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function V(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Y(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function $(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function ee(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function te(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function ne(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function re(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function oe(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function ie(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var ae,ce=navigator.userAgent,ue=/(iPad).*OS\s([\d_]+)/.test(ce),le=/(iPod)(.*OS\s([\d_]+))?/.test(ce),fe=!ue&&/(iPhone\sOS)\s([\d_]+)/.test(ce),se=ue||le||fe,pe=/(Android);?[\s\/]+([\d.]+)?/.test(ce),he=/micromessenger/i.test(ce),be=/QQ\/([\d\.]+)/.test(ce),ye=/Qzone\//.test(ce),de=/MQQBrowser/i.test(ce)&&!he&&!be,we=/UCBrowser/i.test(ce),ve=/mobile.*baidubrowser/i.test(ce),ge=/SogouMobileBrowser/i.test(ce),me=/baiduboxapp/i.test(ce),_e={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t,n,r,o,i,a,c,u="",l=0;for(e=_e._utf8_encode(e);l<e.length;)t=e.charCodeAt(l++),n=e.charCodeAt(l++),r=e.charCodeAt(l++),o=t>>2,i=(3&t)<<4|n>>4,a=(15&n)<<2|r>>6,c=63&r,isNaN(n)?a=c=64:isNaN(r)&&(c=64),u=u+this._keyStr.charAt(o)+this._keyStr.charAt(i)+this._keyStr.charAt(a)+this._keyStr.charAt(c);return u},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");for(var t="",n=0;n<e.length;n++){var r=e.charCodeAt(n);r<128?t+=String.fromCharCode(r):r>127&&r<2048?(t+=String.fromCharCode(r>>6|192),t+=String.fromCharCode(63&r|128)):(t+=String.fromCharCode(r>>12|224),t+=String.fromCharCode(r>>6&63|128),t+=String.fromCharCode(63&r|128))}return t}},Oe=document.querySelector("meta[name=description]"),je=document.querySelector("link[rel*=icon]"),Se={link:location.href,title:function(){return document.title}(),desc:function(){return Object(Oe).content||""}(),icon:function(){return Object(je).href||location.protocol+"//"+location.hostname+"/favicon.ico"}(),from:"",success:r,fail:r,trigger:r},ke=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),Pe=function(){function e(t){w(this,e),this._shareData=Se,this._config={syncDescToTag:!1,syncIconToTag:!1,syncTitleToTag:!1},this.setConfig(t)}return ke(e,[{key:"getShareData",value:function(){return i({},this._shareData)}},{key:"setShareData",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this._shareData,e),this._config.syncDescToTag&&l(this._shareData.desc),this._config.syncIconToTag&&f(this._shareData.icon),this._config.syncTitleToTag&&s(this._shareData.title)}},{key:"setConfig",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this._config,e)}},{key:"getConfig",value:function(){return i({},this._config)}}]),e}(),Ce=Pe,qe=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),Te=function(e){function t(e){g(this,t);var n=m(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o(" return _(t,e),qe(t,[{key:"call",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default",t=arguments[1];this.setShareData(t);var n=this.getShareData(),r=this.constructor.commamdMap[String(e).toLowerCase()];browser.app.share({title:n.title,description:n.desc,url:n.link,img_url:n.icon,from:n.from,to_app:r})}}]),t}(Ce);Te.commamdMap=(ae={},v(ae,"wechattimeline",8),v(ae,"wechatfriend",1),v(ae,"qqfriend",4),v(ae,"qzone",3),v(ae,"weibo",11),v(ae,"copyurl",10),v(ae,"more",5),v(ae,"generateqrcode",7),v(ae,"default",void 0),ae);var Ee,De=Te,xe=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),Qe=function(e){function t(e){return j(this,t),S(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return k(t,e),xe(t,[{key:"call",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default",t=arguments[1];this.setShareData(t);var n=this.getShareData(),r=this.constructor.commamdMap[String(e).toLowerCase()];ucbrowser.web_shareEX?ucbrowser.web_shareEX(JSON.stringify({title:n.title,content:n.desc,sourceUrl:n.link,imageUrl:n.icon,source:n.from,target:r})):ucbrowser.web_share(title,desc,link,r,"",from,"")}}]),t}(Ce);Qe.commamdMap=(Ee={},O(Ee,"wechattimeline","kWeixinFriend"),O(Ee,"wechatfriend","kWeixin"),O(Ee,"qqfriend","kQQ"),O(Ee,"qzone","kQZone"),O(Ee,"weibo","kSinaWeibo"),O(Ee,"default",void 0),Ee);var Me,Ne=Qe,Ae=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),Ue=function(e){function t(e){return C(this,t),q(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return T(t,e),Ae(t,[{key:"call",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default",t=arguments[1];this.setShareData(t);var n=this.getShareData(),r=this.constructor.commamdMap[String(e).toLowerCase()];ucweb.startRequest("shell.page_share",[n.title,n.desc,n.link,r,"",n.from,n.icon])}}]),t}(Ce);Ue.commamdMap=(Me={},P(Me,"wechattimeline","WechatTimeline"),P(Me,"wechatfriend","WechatFriends"),P(Me,"qqfriend","QQ"),P(Me,"qzone","Qzone"),P(Me,"weibo","SinaWeibo"),P(Me,"default",""),Me);var Be=Ue,Re=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),We=function(e){function t(e){return E(this,t),D(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return x(t,e),Re(t,[{key:"call",value:function(e,t){this.setShareData(t);var n=this.getShareData();_flyflowNative.exec("bd_utils","shareWebPage",JSON.stringify({title:n.title,content:n.desc,landurl:n.link,imageurl:n.icon,shareSource:n.from}),"")}}]),t}(Ce),Ie=We,ze=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),Fe=function(e){function t(e){return Q(this,t),M(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return N(t,e),ze(t,[{key:"call",value:function(e,t){this.setShareData(t);var n=this.getShareData();location.href="baidubrowserapp://bd_utils?action=shareWebPage&params="+encodeURIComponent(JSON.stringify({title:n.title,content:n.desc,imageurl:n.icon,landurl:n.link,mediaType:0,share_type:"webpage"}))}}]),t}(Ce),Le=Fe,Ze=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),Je=function(e){function t(e){return A(this,t),U(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return B(t,e),Ze(t,[{key:"call",value:function(e,t){this.setShareData(t);var n=this.getShareData();SogouMse.Utility.shareWithInfo({shareTitle:n.title,shareContent:n.desc,shareImageUrl:n.icon,shareUrl:n.link})}}]),t}(Ce),He=Je,Xe=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),Ge=function e(t,n,r){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,n);if(void 0===o){var i=Object.getPrototypeOf(t);return null===i?void 0:e(i,n,r)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(r)},Ke=function(e){function t(e){R(this,t);var n=W(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.setConfig(e),n}return I(t,e),Xe(t,[{key:"call",value:function(e,t){this.setShareData(t)}},{key:"setConfig",value:function(e){Ge(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"setConfig",this).call(this,e),this.init(this.getConfig().wechatConfig)}},{key:"init",value:function(e){var t=this;e&&o(" var n=t._shareData,r={};Object.defineProperty(r,"trigger",{get:function(){returnfunction(){i(r,{title:n.title,desc:n.desc,link:n.link,imgUrl:n.icon,type:n.type,dataUrl:n.dataUrl,success:n.success,fail:n.fail,cancel:n.fail}),n.trigger.apply(n,arguments)}},set:function(e){n.trigger=e},enumerable:!0}),wx.ready(function(){wx.onMenuShareAppMessage(r),wx.onMenuShareQQ(r),wx.onMenuShareQZone(r),wx.onMenuShareWeibo(r),wx.onMenuShareTimeline(r)})})}}]),t}(Ce),Ve=Ke,Ye=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),$e=function(e){function t(e){return z(this,t),F(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return L(t,e),Ye(t,[{key:"call",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default",t=arguments[1];if(this.setShareData(t),"weibo"!==(e=String(e).toLowerCase()))throw"qqfriend"===e?h():"qzone"===e&&b(),new Error("the browser may not support command "+e+"!");d()}}]),t}(Ce),et=$e,tt=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),nt=function(e){function t(e){Z(this,t);var n=J(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.init(),n}return H(t,e),tt(t,[{key:"call",value:function(){var e=(arguments.length>0&&void 0!==arguments[0]&&arguments[0],arguments[1]);this.setShareData(e),mqq.ui.showShareMenu()}},{key:"init",value:function(){var e=this;o(" function(){var t=e._shareData;mqq.ui.setOnShareHandler(function(e){mqq.ui.shareMessage({back:!0,share_type:e,title:t.title,desc:t.desc,share_url:t.link,image_url:t.icon,sourceName:t.from},function(e){0===e.retCode?t.success(e):t.fail(e)})})})}}]),t}(Ce),rt=nt,ot=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),it=function e(t,n,r){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,n);if(void 0===o){var i=Object.getPrototypeOf(t);return null===i?void 0:e(i,n,r)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(r)},at=function(e){function t(e){X(this,t);var n=G(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.init(),n}return K(t,e),ot(t,[{key:"setShareData",value:function(e){it(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"setShareData",this).call(this,e);var n=this.getShareData();u(n.link)!==location.hostname&&(n.link=location.href,console.warn("安卓的QQ自带浏览器分享url必须跟页面url同一个域名，已自动为你设置为当前页面的url"));try{mqq.data.setShareInfo({share_url:n.link,title:n.title,desc:n.desc,image_url:n.icon},function(e){!0!==e&&console.warn(e)})}catch(e){}}},{key:"call",value:function(){var e=(arguments.length>0&&void 0!==arguments[0]&&arguments[0],arguments[1]);this.setShareData(e),mqq.ui.showShareMenu()}},{key:"init",value:function(){var e=this;o(" function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}returnfunction(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),lt=function(e){function t(e){V(this,t);var n=Y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.init(),n}return $(t,e),ut(t,[{key:"call",value:function(){var e=this,t=(arguments.length>0&&void 0!==arguments[0]&&arguments[0],arguments[1]);this.setShareData(t);for(var n=this.getShareData(),r=[],o=[],i=[],a=[],c=0;c<5;c++)r.push(n.icon),a.push(n.link),o.push(n.title),i.push(n.desc);QZAppExternal.setShare(function(t){0!=t.code&&(e.hasSomethingWrong=!0)},{type:"share",image:r,title:o,summary:i,shareURL:a})}},{key:"setShareData",value:function(e){try{this.call("default",e)}catch(e){}}},{key:"init",value:function(){var e=this;o(" function(){e.call("default")})}}]),t}(Ce),ft=lt,st=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),pt=function(e){function t(e){return ee(this,t),te(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return ne(t,e),st(t,[{key:"call",value:function(e,t){this.setShareData(t);var n=this.getShareData();window.NativeShareFailCallback=n.fail,window.NativeShareSuccessCallback=n.success,location.href="baiduboxapp://callShare?"+["options="+encodeURIComponent(JSON.stringify({title:n.title,imageUrl:"",mediaType:"all",content:n.desc,linkUrl:n.link,iconUrl:n.icon})),"errorcallback=window.NativeShareFailCallback","successcallback=window.NativeShareSuccessCallback"].join("&")}}]),t}(Ce),ht=pt,bt=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),yt=function(e){function t(e){return re(this,t),oe(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return ie(t,e),bt(t,[{key:"call",value:function(e,t){this.setShareData(t);var n=this.getShareData();window.NativeShareFailCallback=n.fail,window.NativeShareSuccessCallback=n.success,prompt("BdboxApp:"+JSON.stringify({obj:"Bdbox_android_utils",func:"callShare",args:['{\n                            imageUrl: "",\n                            mediaType: "all",\n                           title: "'+n.title+'",\n                            content: "'+n.desc+'",\n                            linkUrl: "'+n.link+'",\n                            iconUrl: "'+n.icon+'"\n                        }',"window.NativeShareSuccessCallback","window.NativeShareFailCallback"]}))}}]),t}(Ce),dt=yt;n.d(t,"Share",function(){return Ce}),n.d(t,"QQMobileBrowser",function(){return De}),n.d(t,"UCIosBrowser",function(){return Ne}),n.d(t,"UCAndroidBrowser",function(){return Be}),n.d(t,"BaiduAndroidBrowser",function(){return Ie}),n.d(t,"BaiduIosBrowser",function(){return Le}),n.d(t,"SogouIosBrowser",function(){return He}),n.d(t,"BaiduIos",function(){return ht}),n.d(t,"BaiduAndroid",function(){return dt}),n.d(t,"Wechat",function(){return Ve}),n.d(t,"Others",function(){return et}),n.d(t,"QQIos",function(){return rt}),n.d(t,"QQAndroid",function(){return ct}),n.d(t,"QZone",function(){return ft}),n.d(t,"shareToQQ",function(){return h}),n.d(t,"shareToQZone",function(){return b}),n.d(t,"shareToWeibo4Web",function(){return d}),n.d(t,"shareToQZone4Web",function(){return y});var wt=void 0;wt=he?Ve:be&&se?rt:be&&pe?ct:ye?ft:de?De:we&&se?Ne:we&&pe?Be:ve&&pe?Ie:ve&&se?Le:ge&&se?He:me&&se?ht:me&&pe?dt:et,window.NativeShare=wt,t.default=wt}])});相关推荐：HTML5实现微信jssdk录音播放语音的实例HTML5 video视频字幕的使用和制作方法以上就是HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能的详细内容