文档章节

HTML5总结

Candy_Desire
 Candy_Desire
发布于 2014/11/06 10:13
字数 4116
阅读 744
收藏 23

一,HTML5简介:

1.1 HTML5应用简介

 诞生于2004,2007年被w3c采纳,增加了多媒体,画布的标记,并且新增了很多非常有用的js api(如离线存储,地理位置), 可以让前端程序员开发出用户体验良好的客户端效果,随着移动端浏览器对Html5的强力支持,html5的发展势头越来越好。

html5的目标:

减少外部插件支持(flash)

用功能标签取代脚本

不基于某款设备

html5优势:

开发效率高,成本低;移动端也支持,且风格基本统一,几乎所有现代浏览器都支持,并且可以通过phonegap等工具转成移动版本

html5劣势:

不是所有native功能,硬件设备都支持,也难以实现复杂的UI

1.2 html5与html4,css3与css2对比

html5相比较html4新增了很多标签和api,css3是新一代样式语言,比css2更加动态。

1.3 开发前准备(浏览器与开发工具)

目前IE9+ google chrome等浏览器都支持html5,但是不可避免的存在兼容性问题,最好采用最新版

开发工具:记事本,editplus,WebStorm(前端开发神器)

webstorm7.0下载地址:

http://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases

二,HTML5常用元素

2.1 根元素

<!DOCTYPE html>

在这个标签前面不要留空白字符,否则可能导致有的浏览器不能正确解析html5元素

2.2 节点元素(section,article,header,footer,nav,address)

html5新增了很多节点元素,用于区分页面内容,这些节点元素都是语义性质的,没有特别的效果

        2.2.1   <section>:标记文档中的区域段落,比如文章的章节,页眉页脚等

     <section draggable="true">

      <h1>张三</h1>

      </section>            

     这个元素的作用和div类似

        2.2.2  <article>:独立完整的内容区域,可以有更细分的内容

    <article>

         <section>

              <h2>标题一</h2>

             <p>内容一</p>

          </section>

         <section>

          <h2>标题二</h2>

           <p>内容二</p>

          </section>

    </article>

        2.2.3  <header>:文档或区域的头部

       <article>

          <header>简介一</header>

          <p>内容一</p>

           <header>简介二</header>

           <p>内容二</p>

        </article>

        2.2.4  <nav>:表示页面的导航元素

                      <nav >

                         <a href="http://www.baidu.com">百度</a>

                         <a href="http://www.google.com">Google</a>

                         <a href="http://www.sogou.com">搜狗</a>

                      </nav>             

        2.2.5   <address>:定义文档作者的相关联系方式或地址

                       <address>by 张三</address>

                       会有斜体效果

                       最好不要在<address>,<footer>,<header>元素内嵌套<header>,否则可能无法正确解析

2.3 列表元素(ul,ol,dl)

                         <ul>

                           <li>音乐</li>

                           <li>程序设计

                                  <ul>

                                      <li>java</li>

                                      <li>c++</li>

                                      <li>c#</li>

                                  </ul>

                           </li>

                           <li>体育</li>

                        </ul>

         这类标签可以嵌套。

                 <ol start="2" >

                      <li>毛泽东思想</li>

                      <li>三个代表</li>

                      <li>八荣八耻</li>

                 </ol>

      ol新增了start和reversed两个属性,前者定义开始的编号,后者用于设置列表是否反序

         <dl>

           <dt>html5</dt>

          <dd>新一代html</dd>

          <dt>jquery</dt>

          <dd>前端框架</dd>

           <dd>支持移动端</dd>

        </dl>

          dt后面可以有多个dd,显示的效果是:  

2.4 其他元素(mark,cite)

         mark元素的功能是在文本中高亮显示某些文字,比如

         <div>

         根据中央统一安排,中央政治局常委在第二批教育实践活动中分别联系一个县,<mark>习近平</mark>联系兰考县。

        17日至18日,习近平在河南省委书记郭庚茂、省长<mark>谢伏瞻</mark>陪同下,深入农村和窗口服务单位,同干部群众交流座谈、听取意见和建议,实地指导兰考县教育实践活动。

           </div>

          cite元素是一个引用标记,比如参考文献或者报纸的引用说明。   

          比如:

          <cite>摘自人民日报</cite>,此时会出现斜体样式  

2.5 元素属性(draggable,hidden,contenteditable)

            draggable:支持拖拽

            hidden:隐藏属性(hidden="hidden")

            contenteditable:可以使内容可编辑 

三,HTML5表单

3.1 input表单及其重要属性

            <input type="email" />:email输入框

            <input type="url" />:url输入框

            <input type="number" min="2" max="30" step="2.5" value="5"/>:数字输入框,最小值是2,每步可增减2.5,默认值是5,最大值是30

            <input type="range" min="0" max="255" value="150"/>:数字滑动条

            <input type="date"/>:日期选择器

            <input type="search"/>:搜索输入框,与普通输入框并无不同,只是在输入框后面加一个“叉”,用于删除搜索关键字

            重要属性

            placeholder:输入提醒

            required:非空验证

            autofocus:自动得到焦点

3.2 新支持的表单之datalist

           <input type="text" list="listWork"  />

           <datalist id="listWork">

              <option value="c++"></option>

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

              <option value="javascript"></option>

           </datalist>

          目前google最新浏览器支持

四,文件接口及拖放  

       4.1 文件选择

             <input type="file" name="myfile" id="myfile" multiple />

              multiple属性支持多选,当把鼠标移上去后,会出现文件名的列表

              accept属性可以控制所选的文件类型,比如:accept="image/png",但是也可以选择其他文件

       4.2 Blob接口

            Blob表示二进制数据。

            4.2.1 获取文件类型与大小

                    html5代码:

                    <input type="file" name="myfile" id="myfile" multiple onchange="getFileList(this.files)" />

                    js代码:

                    function getFileList(fs){

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

                           var f=fs[i];

                          //文件名  文件类型 文件大小(字节)

                           alert(f.name+" "+f.type+" "+ f.size);

                        }

                    }

         4.3 使用FileReader接口读取文件

                该接口既可以读取文本文件,还可以读取二进制文件

                 4.3.1 使用readAsDataURL方法预览图片

                               function previewImgs(fs){

                                     if(typeof  FileReader == 'undefined'){

                                       alert("浏览器不支持FileReader对象");

                                     }

                                     var previewDiv=document.getElementById("previewDiv");

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

                                          var f=fs[i];

                                          var reader=new FileReader();

                                          reader.readAsDataURL(f);

                                          reader.onload=function(e){

                                                previewDiv.innerHTML+="<img src='"+ e.target.result+"' /><br/>";

                                          }

                                     }

                               }

               4.3.2 使用readAsText方法读取文本文件

                        function readTxt(fs){

                          if(typeof  FileReader == 'undefined'){

                            alert("浏览器不支持FileReader对象");

                          }

                         var txtDiv=document.getElementById("txtDiv");

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

                               var f=fs[i];

                               var reader=new FileReader();

                               reader.readAsText(f);

                               reader.onload=function(e){

                                          txtDiv.innerHTML+= "<pre>"+e.target.result+"</pre>";

                              }

                         }

                     }

                  <pre>标签会原样输出空格或回车

          4.4 使用DataTransfer对象拖拽上传文件

                html代码:

                <div  id="uploadDiv" style="border: 1px solid;height: 200px" ondrop="dropFile(event)"                                              ondragenter="return false" ondragover="return false">

                       上传图片

                </div>

                <br/>

               <div id="imgDiv">

                  这里预览图片

               </div>

                javascript代码:

                 function fileUpload(fs){

                 var imgDiv=document.getElementById("imgDiv");

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

                     var f=fs[i];

                     var reader=new FileReader();

                     reader.readAsDataURL(f);

                     reader.onload=function(e){

                        // alert(e.target.result);

                         imgDiv.innerHTML += "<img src='"+e.target.result+"' />";

                     }

                 }

             }

        function dropFile(e){

           //alert(e.dataTransfer);

            fileUpload(e.dataTransfer.files);

            //停止事件传播

            e.stopPropagation();

            //阻止默认事件的发生,否则拖拽上去后会触发其他拖拽事件

            e.preventDefault();

        }

     4.5 html5上传功能服务器接收实现

           可以采用common-fileupload接收上传文件

           其中,拖拽上传由于不是form表单提交数据,所以目前只能采用ajax方式上传,在html5中,我们可以通过FormData对象封装数据

           html5核心代码如下:

           function uploadForm(){

             var formData=new FormData();

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

               var f=files[i];

               formData.append(f.name,f); 

             }

             var xhr=new XMLHttpRequest();

             xhr.onreadystatechange=function(){

              if(xhr.readyState==4 && xhr.status==200){

                 alert("上传成功");

              }

            }

            xhr.open("post","<%=path%>/upservlet",true);

            xhr.send(formData);

         }

       servlet核心代码如下:

                     FileItemFactory factory=new DiskFileItemFactory();

                     ServletFileUpload upload=new ServletFileUpload(factory);

                     List<FileItem> list=upload.parseRequest(request);

                     处理代码省略...

五,HTML5多媒体播放

      5.1 音频播放 

                <audio src="莫文蔚 - 电台情歌.mp3" autoplay="autoplay" controls="controls" >浏览器不支持音频播放</audio>

                pc端:IE9+可以支持的不错,chrome不能拖拽进度,手机端支持良好

                autoplay:自动播放

                controls:生成控制条

                loop:循环播放

              

      5.2 视频播放       

              <video src="Hadoop体系介绍.mp4" autoplay="autoplay" controls="controls">浏览器不支持视频</video>

              IE9不支持mp4,chrome支持,移动端支持良好

              5.2.1  poster属性

                       该属性可以在视频播放前(时)显示指定的图片(完全是为广告做准备的啊有木有)

            比如: <video  src="Hadoop体系介绍.mp4" poster="MEINV.jpg" autoplay="autoplay" controls="controls">浏览器不支持视频</video>

            我们也可以在视频暂停(onpause事件)的时候播放图片:

             _this.setAttribute("poster","xiaoqingxin.jpg");

            5.2.2   networkState属性

                      通过这个属性可以在onprogress事件中得到视频加载状态

                      首先给标签加上     onprogress="videoProgress(this)"

                      js函数如下:

                      function videoProgress(_this){

                        var stateDiv=document.getElementById("stateDiv");

                        var state=_this.networkState;

                       if(state==0){

                             stateDiv.innerHTML="正在初始化";

                       }

                       if(state==1){

                           stateDiv.innerHTML="数据加载完成";

                       }

                      if(state==2){

                            stateDiv.innerHTML="正在加载中";

                      }

                      if(state==3){

                            stateDiv.innerHTML="数据加载失败";

                      }

              }


             5.2.3 播放开始和结束事件

                         onplaying:暂停后开始会重新触发此事件 

                         onended:视频结束时触发


            5.2.4 播放进行时事件 ontimeupdate

                    视频对象有两个与播放时间相关的属性:currentTime和duration,前者表示当前播放时间(单位:秒),后者表示时间总量(单位:秒)

                    我们可以让ontimeupdate事件与这两个属性配合起来使用,动态的得到当前播放时间

            

            5.2.5 canPlayType函数

                    通过这个函数可以判断支持的媒体类型

                    var arrtype=["audio/mov",'audio/mp4;codecs="mp4a.40.2"'];

                    var myvideo=document.getElementById("myvideo");

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

                         alert(myvideo.canPlayType(arrtype[i]));

                    }

                   返回结果说明:

                   ""空字符串表示不支持

                   maybe表示可能支持

                   probably表示最可能支持  

六,Html5 Canvas 

      6.1 画布简介

              canvas可以帮助我们创建一个画布,使用js的api可以构建出任意的图形(或导入图片)

              6.1.1 矩形示例

               html:<canvas id="cnvMain" width="280px" height="190px"></canvas>

               javascript:

                     function pageload(){

                       var cnv=document.getElementById("cnvMain");

                        //得到上下文环境

                         var ctx=cnv.getContext("2d");

                        //设置背景色

                         ctx.fillStyle="red";

                        //矩形参数(x,y,width,height)

                         ctx.fillRect(10,50,150,80);

                }

               6.1.2 设置边框

                      //设置边框背景色

                      ctx.strokeStyle="blue";

                     //边框参数(x,y,width,height)

                      ctx.strokeRect(10,50,150,140);

                      其中y和height不能大于canvas的height

             6.1.3  绘制路径  

                html: <canvas id="cnv" width="250px" height="180px"></canvas>

                javascript:        

                          var cnv=document.getElementById("cnv");

                          var ctx=cnv.getContext("2d");

                          //起点坐标

                          ctx.moveTo(100,50);

                          //终点坐标

                          ctx.lineTo(100,100);

                          ctx.lineTo(200,300);

                          ctx.lineWidth=3;

                          ctx.stroke();

              6.1.4  绘制圆形

                       绘制实心圆

                       html:<canvas id="cnv" width="280px" height="190px"></canvas>

                       javascript:

                       function createArc(){

                         var cnv=document.getElementById("cnv");

                         var ctx=cnv.getContext("2d");

                         //清除画布原有图形

                        ctx.clearRect(0,0,280,190);

                        //开始画实体图

                        ctx.beginPath();

                        //参数:x坐标,y坐标,半径,开始角度,结束角度,是否按顺时针绘制

                        ctx.arc(60,60,50,0,Math.PI*2,true)

                        //关闭

                        ctx.closePath();

                        //填充背景色

                        ctx.fillStyle="red";

                        //填充

                        ctx.fill();

                  }                      

                  绘制边框圆时只需把api换成:

                  ctx.strokeStyle="red";

                  ctx.stroke();就可以了

七,数据存储

      7.1 web Storage

            在html5之前通常使用cookie来做客户端存储,但是cookie限制了数据空间大小(web storage数据大小限制在5M),保密性较差,代码操作比较复杂,所以html5中提供了两种数据存储方式:

             web storage和web sql,其中web storage包括sessionStorage和localStorage

            7.1.1 sessionStorage对象

                    这个对象保存了一次会话中的数据

                    保存数据:setItem([key],[value]);比如 sessionStorage.setItem("myname","aking");

                    得到数据:getItem([key]),比如var myname=sessionStorage.getItem("myname");  数据只能在自己窗口或保存数据页面新开的窗口访问到

                    清除某个数据:sessionStorage.removeItem("myname");

                    清除所有数据:sessionStorage.clear();

                    得到数据项的个数:sessionStorage.length

                    通过下标得到key:sessionStorage.key([index])

                    循环所有数据项示例:

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

                          var k=sessionStorage.key(i);

                          alert(k+" "+sessionStorage.getItem(k));

                    }

            7.1.2 localStorage对象

                    localStorage可以在客户端长期保存数据,它的API和sessionStorage一样                 

      7.2 web sql数据库

           webDB即客户端本地提供的关系型数据库,用于实现本地存储,它支持javascript操作sql,非常方便

           7.2.1 webDB核心API

                     openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

                     transaction:这个方法允许我们根据情况控制事务提交或回滚。

                     executeSql:这个方法用于执行真实的SQL语句。


            7.2.2  创建(打开)数据库

                     openDatabase(name,version,displayName,estimatedSize,creationCallback) 

                     参数释意:

                      name:数据库名称

                      version:版本号

                      displayName:描述信息

                      estimatedSize:数据库大小(以字节为单位,比如5M=5*1024*1024)

                      creationCallback:创建成功之后的回调函数(可以省略不写)

            7.2.2  数据库操作

                      在webDB中,执行数据的crud需要事务的支持,事务的api如下:

                       transaction(callback,errorCallback,successCallback)

                      参数释意:

                      callback:事务回调函数(执行sql的地方)

                      errorCallback:sql执行失败的回调函数

                      successCallback:sql执行成功的回调函数

                      7.2.2.1 建表

                       oadb.transaction(function(tx){

                          tx.executeSql("create table if not exists userinfo (toid int,username text ,age int )");

                        },

                        function(){},

                        function(){

                         alert("表创建成功");

                     });

                    其中executeSql函数的api如下:

                    executeSql(sqlStatement,arguments,callback,errorCallback)

                    参数释意:

                    sqlStatement:sql语句

                    arguments:参数列表,数组类型

                    callback:成功后回调函数

                    errorCallback:失败后回调函数

                    7.2.2.2 新增数据

                     var toid=parseInt(document.getElementById("toid").value);

                     var username=document.getElementById("username").value;

                     var age=parseInt(document.getElementById("age").value);

                     var oadb=window.openDatabase("oa","1.0","OA管理系统",1024*1024);

                     oadb.transaction(function(tx){

                     tx.executeSql("insert into userinfo values(?,?,?)",[toid,username,age],

                         function(){

                             alert("添加成功");

                         }

                     );

                    });

                  7.2.2.3 删除数据

                  var oadb=window.openDatabase("oa","1.0","OA管理系统",1024*1024);

                  oadb.transaction(function(tx){

                  tx.executeSql("delete from userinfo where toid=?",[toid],

                        function(){

                            alert("删除成功");

                        }

                  );

                });

                修改同新增/删除,此处不再赘述

                 7.2.2.3 查询数据

                        oadb.transaction(function(tx){

                        tx.executeSql("select * from userinfo",[],

                         function(tx,rs){

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

                                 alert(rs.rows.item(i).toid+" "+rs.rows.item(i).username+" "+rs.rows.item(i).age);

                            }

                         }

                 );

             });

八,重要的API

      8.1 地理位置API(Geolocation API)

            要得到地理位置需要使用window.navigator.geolocation的api:

            getCurrentPosition(successCallback,errorCallback,options)

            参数释意:

            successCallback:成功回调函数,此方法可以接受一个Position类型的参数,该对象可以用来描述

            地理位置的详细信息。Position对象包含两个属性timestamp和coords,timestamp属性表示获取地理位置

            时的时间,coords包含以下值:    

属性值描述

latitude

纬度

longitude

经度

accuracy

地理位置精确度

altitudeAccuracy

海拔精确度

heading

前进方向

speed

前进速度(米/秒)

altitude

海拔高度

 errorCallback:失败回调函数,此方法可以接受一个error类型的参数,该对象有两个属性code,message          

code值描述0未知错误1用户拒绝了定位服务2没有获取正确的地理位置3获取超时

         options:可选的对象,可选项包含timeout,maximumAge,enableHighAccuracy三个属性

         timeout:超时限制(毫秒)

         maximumAge:设置地理位置缓存时间(毫秒),超过设定时间,则获取最新时间   

        下面是示例代码:

         window.navigator.geolocation.getCurrentPosition(function(pos){

                     alert("纬度:"+pos.coords.latitude);

                     alert("经度:"+pos.coords.longitude);

                     //alert("当前经纬度的精度:"+pos.coords.accuracy);

         },function(error){

                 alert(error.code+" "+error.message);

         },{

                  timeout:1000

         });

       监控地理位置api:watchPosition

       var loca=document.getElementById("locaDiv");

       var watchId=navigator.geolocation.watchPosition(function(pos){

        loca.innerHTML="经纬度:("+pos.coords.latitude+","+pos.coords.longitude+","+pos.coords.speed+")";

        navigator.geolocation.clearWatch(watchId);

       },function(){});

      使用google map定位

       在实际项目中,使用google map首先需要去官网申请key,但是它也支持免key测试。

       google map的使用步骤如下:

       1,导入js <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>

       2,使用google map api

             function getMap(la,lon,divid){

                //创建一个中心点

                var centerLL= new google.maps.LatLng(la,lon);

                var mapOptions = {

                   center: centerLL,

                   zoom: 14,

                   mapTypeId: google.maps.MapTypeId.ROADMAP

              };

              //渲染的位置

              var map = new google.maps.Map(document.getElementById(divid),

                mapOptions);

            //撒点

             var marker = new google.maps.Marker({

               position: centerLL,

               title:"我在这里"

             });

            marker.setMap(map);

   }

   3,把geolocation得到的经纬度传入到center和marker中

      8.2  postMessage实现跨域通信

            使用postMessage可以实现不同域名和端口下的文档之间进行数据交互,postMessageAPI如下:

            postMessage([message],[targetOrigin]),message表示发送的数据,targetOrigin表示发送数据的url来源          

            下面新建两个html文档,A文档嵌入一个iframe,该iframe引用B文档,看看怎样实现这两个文档之间进行数据交互

             A网页:

               <div id="contentDiv"></div>

               <input type="text" id="num" name="num" />

               <br>

               <input type="button" value="提交"  onclick="sendClick()"/>

               <br>

               <iframe id="idFrm" src="postMessage2.html"></iframe>

             A网页javascript:

                 var originUrl="http://localhost:63342";

                 window.addEventListener('message',function(event){

                if(event.origin==originUrl){

                   document.getElementById("contentDiv").innerHTML=event.data;

                }

               },false)

           function sendClick(){

              var num=document.getElementById("num").value;

             document.getElementById("idFrm").contentWindow.postMessage(num,originUrl);

           }

           代码解释:首先添加接收信息的监听事件,用于从B页面接收信息。event.origin会返回B页面发送过来的域名端口信息,为了安全起见,这里

           需要判断信息来源,event.data可以返回对方发送过来的信息

            document.getElementById("idFrm").contentWindow得到iframe中window的句柄,postMessage函数发送数据和域名端口信息

         B网页javascript:

         var originUrl="http://localhost:63342";

         window.addEventListener('message',function(event){

         if(event.origin==originUrl){

             var mydata=event.data;

             event.source.postMessage(mydata+" hello",event.origin);

         }

       },false);

        代码解释:event.source返回发送方的window句柄,通过句柄的postMessage将信息发送回去    

      8.3 Web Socket API

            web Socket可以使网页成为一个socket客户端,使网页与客户端建立长时间的socket连接,下面是一个简单示例

            html代码:

            <input type="text" name="username"  id="username"  />

            <br/>

            <input type="button" value="提交" onclick="sendMsg()"/>

            <br/>

            <div id="contentDiv"></div>

          javascript代码:

           function sendMsg(){

              var contentDiv=document.getElementById("contentDiv");

              var username=document.getElementById("username").value;

              //创建socket对象

              var socket=new WebSocket("ws://localhost:1998");

              //开启socket

              socket.onopen=function(event){

                  alert("开启");

              }

              //接收数据

              socket.onmessage=function(event){

                  contentDiv.innerHTML=event.data;

              }

              //关闭连接

              socket.onclose=function(event){

                  contentDiv.innerHTM="关闭了"

              }

          }     

完整socket应用需要服务端的支持,目前javaee6支持

© 著作权归作者所有

Candy_Desire
粉丝 32
博文 71
码字总数 84592
作品 0
浦东
产品经理
私信 提问
加载中

评论(1)

蓝川逸风
蓝川逸风
牛逼的东西
分享28本关于HTML5的学习书籍(免费下载)

分享28本关于HTML5的学习书籍(免费下载) 1、用HTML5新特性开发移动App 2、用HTML5CSS3实现媲美原生应用的交互体验 3、改善HTML5网页性能-译 4、WEB_HTML5在LBS社区中的应用 5、WebQQ_3.0:...

邓剑彬
2012/11/30
1K
6
Session, LocalStorage ,Cache-Control

Session 为什么要使用Session? Session的使用? 总结Cookie与Session: Cookie Session LocalStorage localStorage是html5提供的一个API,localStorage的实质是一个哈希 Session是服务器的哈...

code_susu
2018/07/31
0
0
分享最好的HTML5编码教程和参考手册

原文:queness.com 编译:GBin1.com 今天我们介绍相关HTML5的参考手册,演讲稿,电子书和教程。 HTML5是新兴的web技术,虽然不是完全的新技术但是已经有很多的相关文章介绍HTML5,特别是当我...

gbin1
2011/10/21
1K
3
【推荐】【分享】beyond the web

副标题: Web之外的html5世界 报名地址:http://www.headin.cn/Themes/Activity/Details/?activityId=51418382869d080bf0bc5be7 课程背景: Hybrid技术 和 HTML5游戏开发 一直是HTML5领域比较...

开源力量
2013/04/08
89
0
Flash与HTML5性能比较

近日,一项评测向人们证明了:HTML5 在性能上仍远远落后于Flashplayer。测试使用了Droid X, Nexus One, Desire HD, Atrix, PlayBook, Galaxy Tab, Xoom 等设备,分别测试了位图,矢量图,数值...

小卒过河
2011/06/15
6.2K
12

没有更多内容

加载失败,请刷新页面

加载更多

二进制位操作

单片机,或者一些模块的设置操作,都是由一个字节数据来完成,每位各有定义。就需进行位操作来组合需要的数字结果。 以JavaScript为例,编写位操作。 我们期望得到这样一个二进制数:0101101...

format
21分钟前
2
0
聊聊中国的通信行业:从“七国八制”到“中华”脊梁

本期文章和大家一起来聊一聊我曾经从事过的通信行业吧。最近各方面信息的泛滥,包括和华为的同学聊天,自己确实也感慨颇多。想想我自己本科主修通信工程,研究生再修信息与通信工程,从本科开...

CodeSheep
今天
6
0
MDK:ARM M451M:exceed the range of code meory, continue to erase or not?

问题: 代码空间超限 几天前就遇到:exceed the range of code meory, continue to erase or not? 如下所示: 解决过程 开始以为中MDK软件的128KB限制,如是就不能生成HEX文件,应该链接时有提...

SamXIAO
今天
1
1
OSChina 周六乱弹 —— 因违反《中华人民共和国治安管理处罚法》第四十四条之规定

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :#今日歌曲推荐# 惊艳分享谷微的单曲《安守本份》(@网易云音乐) 《安守本份》- 谷微 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
495
12
Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部