May 24, 2010 ... 评论

HTML 5 新亮点

使用Chrome可以更好地体验HTML5:)

本地储存 – Web Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

本地数据库 – Web SQL Database

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

文件缓存 – Application Cache API

<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

CACHE MANIFEST

# version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

让程序在后台运行 – Web Workers

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); }; 
 
extra_work.js:
  // do some work; when done post message.
  postMessage(some_data);

双向信息传输 – Web Sockets

var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

桌面提醒 – Notifications

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title, 
      tweet.text).show(); 
} else {
  window.webkitNotifications.requestPermission();
}

拖放操作 – Drag and drop

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

HTML 新的语义标签

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>
 
  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>
 
  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
 
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
 
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>
 
  <aside>
   Top links...
  </aside>
 
  <footer>
   Copyright © 2009.
  </footer>
</body>

新的链接关系

<link rel="alternate">
<link rel="icon">
<link rel="nofollow">
<link rel="prefetch">
 
<a rel="archives">
<a rel="external">
<a rel="license">
<a rel="noreferrer">
<a rel="pingback">
<a rel="sidebar">
<a rel="tag">

新的表单元素类型

<input type="range" min="0" max="50" value="0">  
<input autofocus type="search">  
<input type="text" placeholder="Search inside">
<menu>
<progress>
 
<input type="color"> 
<input type="number"> 
<input type="email"> 
<input type="tel"> 
 
<input type="time"> 
<input type="date"> 
<input type="month"> 
<input type="week"> 
<input type="datetime">

音频 + 视频 – Audio + Video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;
 
<video src="movie.mp4" autoplay controls ></video>
document.getElementById("video").play();

图形绘制 – Canvas

<canvas id="canvas" width="838" height="220"></canvas>
 
<script>
  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();
</script>

CSS 显示本地没有的字体

@font-face { 
  font-family: "Junction"; 
  src: url(Junction02.otf); 
}
@font-face { 
  font-family: "LeagueGothic"; 
  src: url(LeagueGothic.otf); 
}
@font-face { 
  font-family: "GG250"; 
  src: url(General250.otf); 
}
header {
  font-family: "LeagueGothic";
}
.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}
:not(.box) {
  color: #00c; 
}            
:not(span) {
  display: block; 
}  
h2:first-child { ... }
div.text > div { ... } 
h2 + header { ... } 
input[type="text"] {
  background: #eee;
}

分栏显示

-webkit-column-count: 6;  
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

文本描边

-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0;

透明效果

color: rgba(255, 0, 0, 0.41);  
background: rgba(0, 0, 255, 0.19);

HSL(色相/饱和度/亮度)色彩模式

color: hsla(184, 75%, 33%, 0.15);

圆角效果

border-radius: 7px;
background: -webkit-gradient(linear, left top, left bottom, 
                             from(#00abeb), to(white), 
                             color-stop(0.5, white), color-stop(0.5, #66cc00))  
background: -webkit-gradient(radial, 430 50, 0, 430 50, 590, from(red), to(#000));
text-shadow: rgba(0, 0, 0, 0.5) 0 -0px -0px;  
background: 
  -webkit-gradient(linear, left top, left bottom,  
                   from(rgba(200, 200, 240, 0.5)), to(rgba(255, 255, 255, 0.5))); 
border-radius: 50px;

制作一个LOGO,只需拖动滑动条

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom,  
                   from(transparent), to(rgba(255, 255, 255, 0.78)));

变换 - Transitions

#box {
  -webkit-transition: margin-left 1s ease-in-out;
}
@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

动画效果

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

本文转载自:CKSKY.CN

评论

(function(){ var bp = document.createElement('script'); bp.src = '//push.zhanzhang.baidu.com/push.js'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();