第二节课:html5 – web开发步入新阶段
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

第二节课:html5 – web开发步入新阶段

on

  • 1,442 views

百度web前端课程之html5

百度web前端课程之html5

Statistics

Views

Total Views
1,442
Views on SlideShare
1,441
Embed Views
1

Actions

Likes
0
Downloads
53
Comments
1

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

第二节课:html5 – web开发步入新阶段 Presentation Transcript

  • 1. 1991  HTML   1996  CSS  1  +  Javascript   1998  CSS  2   2002  Tableless   2009  HTML5  91   94   96   97   98   00   02   05   09   1994  HTML  2   1997  HTML  4   2000  XHTML  1   2005  AJAX  
  • 2. ì 
  • 3. <h1>HTML5</h1>  <h2>Web </h2>  <p>......</p>  <hgroup>          <h1>HTML5</h1>          <h2>Web </h2>  </hgroup>  <p>......</p>  
  • 4. <article>      <header>          <h1> </h1>      </header>      <p> </p>      <footer>          <a  href="?comments=1"> </a>          </footer>  </article>  
  • 5. <p> JS </p>  <figure  id="l4”>      <figcaption> 14 </figcaption>      <pre><code>document.createElement("div");</code></pre>  </figure>  
  • 6. <meter  min="0"  max="100"  low="40"  high="90"  optimum="100"  value="91">A+</meter>    <progress> </progress>    <progress  value="75"  max="100”> 75%</progress>  
  • 7. <menu>      <command  type="command"> ...</command>  </menu>  <details>      <summary>fileInfo</summary>      <summary>metadata</summary>      <summary>camera  data</summary>  </details>  
  • 8. <input  type="email"  value="some@email.com"  />    <input  type="date"  min="2010-­‐08-­‐14"  max="2011-­‐08-­‐14"  value="2010-­‐08-­‐14"/>    <input  type="range"  min="0"  max="50"  value="10"  />    <input  type="search"  results="10"  placeholder="Search..."  />  
  • 9. <input  type="tel"    placeholder="(555)  555-­‐5555"                    pattern="^(?d{3})?[-­‐s]d{3}[-­‐s]d{4}.*?$"  />    <input  type="color"  placeholder="e.g.  #bbbbbb"  />    <input  type="number"  step="1"  min="-­‐5"  max="10"  value="0"  />  
  • 10. <style>      [required]  {          border-­‐color:  #88a;          -­‐webkit-­‐box-­‐shadow:  0  0  3px  rgba(0,  0,  255,  .5);      }      :invalid  {          border-­‐color:  #e88;          -­‐webkit-­‐box-­‐shadow:  0  0  5px  rgba(255,  0,  0,  .8);      }  </style>  
  • 11.                  type="email"                  type="tel"  
  • 12. ì ì ì 
  • 13. <input  type="text"  id="name"  />  sessionStorage.setItem("username",  document.getElementById("name").value)    <!-­‐-­‐  on  next  page  -­‐-­‐>  alert(sessionStorage.getItem("username"))  
  • 14. localStorage.setItem(lng,  map.getCenter().lng);  localStorage.setItem(lat,  map.getCenter().lat);  localStorage.setItem(mapZoom,  map.getZoom());  
  • 15. var  db  =  window.openDatabase(MyDB,  1.0,  my  database,  5  *  1024  *  1024);  db.transaction(function(tx){      tx.executeSql("CREATE  TABLE  IF  NOT  EXISTS  test  (id  unique,  text)");      tx.executeSql("INSERT  INTO  test  (id,  text)  VALUES  (1,  my  data)");      tx.executeSql("SELECT  *  FROM  test",  [],  successCallback);  });  
  • 16. ì 
  • 17. var  idbReq  =  window.indexedDB.open("My  Database");  idbReq.onsuccess  =  function(event){          var  db  =  event.srcElement.result;          //  do  something  here  }  
  • 18. <html  manifest="cache.appcache">    CACHE  MANIFEST  index.html  style.css  images/logo.png  scripts/main.js  
  • 19. ì ì 
  • 20. if  (navigator.geolocation)  {      navigator.geolocation.getCurrentPosition(function(pos){          alert(pos.coords.latitude  +  ,  +  pos.coords.longitude);      })  }  
  • 21. span.addEventListener("dragstart",  function(e){      e.dataTransfer.setData("text",  this.innerHTML);  });    drop.addEventListener(drop,  function(e){      this.innerHTML  =  e.dataTransfer.getData(text);  },  false);  
  • 22. holder.ondrop  =  function  (e)  {      e.preventDefault();        var  file  =  e.dataTransfer.files[0],              reader  =  new  FileReader();      reader.onload  =  function  (event)  {          holder.style.background  =  url(  +  event.target.result                                                                +  )  no-­‐repeat  center;      };      reader.readAsDataURL(file);        return  false;  };    
  • 23. holder.ondrop  =  function  (e)  {      e.preventDefault();        var  file  =  e.dataTransfer.files[0],              reader  =  new  FileReader();      reader.onload  =  function  (event)  {          holder.innerHTML  =  event.target.result;      };      reader.readAsText(file);        return  false;  };    
  • 24. <a  href="pic.png"  id="dragout"  draggable="true"  data-­‐downloadurl="application/octet-­‐stream:pic.png:URI">A  Picture</a>    var  file  =  document.getElementById(dragout);  file.ondragstart  =  function(e){      e.dataTransfer.setData(DownloadURL,                                                                  file.dataset.downloadurl);  }    
  • 25. window.addEventListener("deviceorientation",  function(e){      var  a  =  e.alpha;      var  b  =  e.beta;      var  g  =  e.gamma;  },  false);  
  • 26. <input  type="text"  x-­‐webkit-­‐speech  />  
  • 27. ì 
  • 28. ì ì ì 
  • 29. var  socket  =  new  WebSocket(host);  socket.send(message);  socket.onmessage  =  function(message){alert(message.data);}  
  • 30. ì ì 
  • 31. var  worker  =  new  Worker(worker.js);  worker.onmessage  =  function(event){      document.getElementById(result).text  =  event.data;  };    var  n  =  1;    search:  while(true)  {      n  +=  1;      for  (var  i  =  2;  i  <=  Math.sqrt(n);  i  +=  1)  {          if  (n  %  i  ==  0)  continue  search;      }      postMessage(n);    }  
  • 32. function  RequestPermission  (callback)  {      window.webkitNotifications.requestPermission(callback);  }    function  showNotification(){      if  (window.webkitNotifications.checkPermission()  >  0)  {          RequestPermission(showNotification);      }  else  {            window.webkitNotifications.createNotification("header.png",  "Title",  "Body").show();      }  }  
  • 33.    
  • 34. <audio  />   <video  />  
  • 35. <object  type="application/x-­‐shockwave-­‐flash"  data="http://static.youku.com/v1.0.0161/v/swf/player.swf"  id="movie_player"  height="100%"  width="100%”>  <param  name="allowFullScreen"  value="true">  <param  name="wmode"  value="opaque">  <param  name="allowscriptaccess"  value="always">  <param  name="flashvars"  value="VideoIDS=XMjczNzc3NDI4&amp;ShowId=0&amp;Cp=0&amp;Light=on&amp;THX=off&amp;Tid=0&amp;isAutoPlay=true&amp;Version=/v1.0.0668&amp;show_ce=1&amp;winType=interior&amp;Type=Folder&amp;Fid=6190074&amp;Pt=0&amp;Ob=1">  <param  name="movie"  value=http://static.youku.com/v1.0.0161/v/swf/player.swf>  </object>  
  • 36. <audio  src="vincent.mp3"  controls="controls"  />  
  • 37. format   IE9   Firefox  3.5   Opera  10.5   Chrome  3   Safari  3  Ogg  Vorbis   No   Yes   Yes   Yes   No  MP3   Yes   No   No   Yes   Yes  WAV   No   Yes   Yes   No   Yes  
  • 38. <video  src="mapapi.mp4"  controls="controls"  />  
  • 39. format   IE   Firefox   Opera   Chrome   Safari  Ogg   No   3.5+   10.5+   5.0+   No  MP4   9.0+   No   No   5.0+   3.0+  WebM   No   4.0+   10.6+   6.0+   No  
  • 40. ì ì 
  • 41. var  canvasContext  =  document.getElementById("canvas").getContext("2d");  canvasContext.fillRect(250,  25,  150,  100);        canvasContext.beginPath();  canvasContext.arc(450,  110,  100,  Math.PI  *  1/2,  Math.PI  *  3/2);  canvasContext.lineWidth  =  15;  canvasContext.lineCap  =  round;  canvasContext.strokeStyle  =  rgba(255,  127,  0,  0.5);  canvasContext.stroke();  
  • 42. <body>      <svg>          <circle  id="myCircle"  class="important"  cx="50%"  cy="50%"  r="100  fill="url(#myGradient)  onmousedown="alert(hello);"/>      </svg>  </body>  
  • 43. var  context  =  canvas.getContext("experimental-­‐webgl");  
  • 44. More  WebGL  Demos  at  hNp://www.chromeexperiments.com/  
  • 45. XMLHttpRequest  2ì ì ì ì 
  • 46. .row:nth-­‐child(even){      background:  #dde;  }  .row:nth-­‐child(odd){      background:  white;  }  
  • 47. button:not([DISABLED])  *:not(span)  :enabled  :required    
  • 48. @font-­‐face  {      font-­‐family:  Gentium;        src:  url(http://example.com/fonts/Gentium.ttf);  }    p  {  font-­‐family:  Gentium,  serif;  }  
  • 49. div  {      -­‐webkit-­‐text-­‐fill-­‐color:  white;      -­‐webkit-­‐text-­‐stroke-­‐color:  black;      -­‐webkit-­‐text-­‐stroke-­‐width:  1px;    }  
  • 50. Vendor  Prefixes  ì  -­‐webkit-­‐xxxx  ì  -­‐moz-­‐xxxx  ì  -­‐o-­‐xxxx  
  • 51. Vendor  Prefixes  div  {      -­‐webkit-­‐box-­‐shadow:  1 x  1px  5px  #888      -­‐moz-­‐box-­‐shadow:  1px  1px  5px  #888;      box-­‐shadow:  1px  1px  5px  #888;  }  
  • 52. color:  rgba(255,  0,  0,  0.75);  background:  rgba(0,  0,  255,  0.25);  
  • 53. border-­‐radius:  10px  background-­‐image:  -­‐moz-­‐linear-­‐gradient(#fff,  #000);  background-­‐image:  -­‐moz-­‐linear-­‐gradient(30deg,  #000,  #fff  75%,  #000);  
  • 54. text-­‐shadow:  4px  4px  1px  #aaa;  box-­‐shadow:  1px  1px  2px  #fff;  box-­‐shadow:  inset  0  0  10px  #000;  
  • 55. .left{background:  red;left:0px}  .right{background:  green;left:1000px}  #myDiv  {      -­‐webkit-­‐transition:  left  1s  ease-­‐in-­‐out,  background  1s  ease-­‐in-­‐out;  }  
  • 56. -­‐webkit-­‐transform:  rotateY(45deg);  -­‐webkit-­‐transform:  scaleX(2);  -­‐webkit-­‐transform:  translate3d(0,  0,  90deg);  
  • 57. @-­‐webkit-­‐keyframes  movingbox{      0%{left:90%;}      50%{left:10%;}        100%{left:90%;}    }    .box2{  -­‐webkit-­‐animation:movingbox  5s  infinite;  }  
  • 58. hNp://dev.w3.org/html5/spec/Overview.html  hNp://www.html5rocks.com/en/  hNp://diveintohtml5.org/  hNp://www.sitepoint.com/tag/html5/  hNp://www.css3.info/        
  • 59. Q&A