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

1,477 views

Published on

百度web前端课程之html5

Published in: Technology, Design
  • Be the first to like this

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

  1. 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. 2. ì 
  3. 3. <h1>HTML5</h1>  <h2>Web </h2>  <p>......</p>  <hgroup>          <h1>HTML5</h1>          <h2>Web </h2>  </hgroup>  <p>......</p>  
  4. 4. <article>      <header>          <h1> </h1>      </header>      <p> </p>      <footer>          <a  href="?comments=1"> </a>          </footer>  </article>  
  5. 5. <p> JS </p>  <figure  id="l4”>      <figcaption> 14 </figcaption>      <pre><code>document.createElement("div");</code></pre>  </figure>  
  6. 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. 7. <menu>      <command  type="command"> ...</command>  </menu>  <details>      <summary>fileInfo</summary>      <summary>metadata</summary>      <summary>camera  data</summary>  </details>  
  8. 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. 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. 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. 11.                  type="email"                  type="tel"  
  12. 12. ì ì ì 
  13. 13. <input  type="text"  id="name"  />  sessionStorage.setItem("username",  document.getElementById("name").value)    <!-­‐-­‐  on  next  page  -­‐-­‐>  alert(sessionStorage.getItem("username"))  
  14. 14. localStorage.setItem(lng,  map.getCenter().lng);  localStorage.setItem(lat,  map.getCenter().lat);  localStorage.setItem(mapZoom,  map.getZoom());  
  15. 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. 16. ì 
  17. 17. var  idbReq  =  window.indexedDB.open("My  Database");  idbReq.onsuccess  =  function(event){          var  db  =  event.srcElement.result;          //  do  something  here  }  
  18. 18. <html  manifest="cache.appcache">    CACHE  MANIFEST  index.html  style.css  images/logo.png  scripts/main.js  
  19. 19. ì ì 
  20. 20. if  (navigator.geolocation)  {      navigator.geolocation.getCurrentPosition(function(pos){          alert(pos.coords.latitude  +  ,  +  pos.coords.longitude);      })  }  
  21. 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. 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. 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. 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. 25. window.addEventListener("deviceorientation",  function(e){      var  a  =  e.alpha;      var  b  =  e.beta;      var  g  =  e.gamma;  },  false);  
  26. 26. <input  type="text"  x-­‐webkit-­‐speech  />  
  27. 27. ì 
  28. 28. ì ì ì 
  29. 29. var  socket  =  new  WebSocket(host);  socket.send(message);  socket.onmessage  =  function(message){alert(message.data);}  
  30. 30. ì ì 
  31. 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. 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. 33.    
  34. 34. <audio  />   <video  />  
  35. 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. 36. <audio  src="vincent.mp3"  controls="controls"  />  
  37. 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. 38. <video  src="mapapi.mp4"  controls="controls"  />  
  39. 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. 40. ì ì 
  41. 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. 42. <body>      <svg>          <circle  id="myCircle"  class="important"  cx="50%"  cy="50%"  r="100  fill="url(#myGradient)  onmousedown="alert(hello);"/>      </svg>  </body>  
  43. 43. var  context  =  canvas.getContext("experimental-­‐webgl");  
  44. 44. More  WebGL  Demos  at  hNp://www.chromeexperiments.com/  
  45. 45. XMLHttpRequest  2ì ì ì ì 
  46. 46. .row:nth-­‐child(even){      background:  #dde;  }  .row:nth-­‐child(odd){      background:  white;  }  
  47. 47. button:not([DISABLED])  *:not(span)  :enabled  :required    
  48. 48. @font-­‐face  {      font-­‐family:  Gentium;        src:  url(http://example.com/fonts/Gentium.ttf);  }    p  {  font-­‐family:  Gentium,  serif;  }  
  49. 49. div  {      -­‐webkit-­‐text-­‐fill-­‐color:  white;      -­‐webkit-­‐text-­‐stroke-­‐color:  black;      -­‐webkit-­‐text-­‐stroke-­‐width:  1px;    }  
  50. 50. Vendor  Prefixes  ì  -­‐webkit-­‐xxxx  ì  -­‐moz-­‐xxxx  ì  -­‐o-­‐xxxx  
  51. 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. 52. color:  rgba(255,  0,  0,  0.75);  background:  rgba(0,  0,  255,  0.25);  
  53. 53. border-­‐radius:  10px  background-­‐image:  -­‐moz-­‐linear-­‐gradient(#fff,  #000);  background-­‐image:  -­‐moz-­‐linear-­‐gradient(30deg,  #000,  #fff  75%,  #000);  
  54. 54. text-­‐shadow:  4px  4px  1px  #aaa;  box-­‐shadow:  1px  1px  2px  #fff;  box-­‐shadow:  inset  0  0  10px  #000;  
  55. 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. 56. -­‐webkit-­‐transform:  rotateY(45deg);  -­‐webkit-­‐transform:  scaleX(2);  -­‐webkit-­‐transform:  translate3d(0,  0,  90deg);  
  57. 57. @-­‐webkit-­‐keyframes  movingbox{      0%{left:90%;}      50%{left:10%;}        100%{left:90%;}    }    .box2{  -­‐webkit-­‐animation:movingbox  5s  infinite;  }  
  58. 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. 59. Q&A  

×