Google的工程師Eric Bidelman (G+, @ebidel) 做了一個演示幻燈，對Chrome中***的那些很少人知道，但都非常酷也非常有用的HTML5特性進行了介紹，內容涵蓋語義標簽，核心JS等等，借助這些特性，可能以前需要你花很大力氣才能實現的功能，現在只需幾分鐘就可輕松搞定。

下面是內容摘要：

1. <details>/<summary>

<details open="open"> 
<summary>Information</summary> 
 
 If your browser supports this element, it should allow you to expand and collapse these details.  
</details> 

效果：

Information
If your browser supports this element, it should allow you to expand and collapse these details.

2. <output>

動態計算結果：

<form id="output-example" oninput="result.value=a.valueAsNumber + b.valueAsNumber"> 
  0  
<input name="a" type="range" min="0" max="100" value="25">100  
  +  
<input name="b" type="number" value="1"> 
  = <output name="result">47</output> 
</form> 

3.<mark>

Lorem ipsum dolor, <mark>consectetur adipiscing...</mark> 

效果：

Lorem ipsum dolor, consectetur adipiscing…

4. 語音輸入

<input type="text" x-webkit-speech=""> 

效果：

5. Element操作

• Element.classList，獲取元素的class并進行操作
• Element.dataSet， 獲取所有元素的數據屬性
• Element.matchSelector，判斷元素是否匹配某個選擇器

6. Window.crypto，偽隨機數生成

// Fill typed array with 5 8-bit unsigned random integers.  
var uInt8Arr = new Uint8Array(5);  
window.crypto.getRandomValues(uInt8Arr);  

7. Window.performance，性能檢測

8. 頁面預渲染及可見性（可參看黑客志之前的文章介紹）

<link rel="prerender" href="http://example.org/index.html"> 

document.addEventListener('visibilitychange', function(e) {  
  console.log('hidden:' + document.hidden, 'state:' + document.visibilityState)  
}, false);  

9. navigator.online，判斷是否有網絡連接

10. window.onerror，全局異常捕獲

window.onerror = function(msg, url, line) {  
  // Track JS errors in GA.  
  _gaq.push(['_trackEvent', 'Error Log', msg, url + '_' + line]);  
  // Log to your server.  
  var xhr = new XMLHttpRequest();  
  xhr.open('POST', '/jserror', true);  
  xhr.send('Line ' + num + ': (' + url + ') - ' + msg);  
  return false;  
  // false prevents default error handling.  
}; 

11. 接受文件粘貼

document.body.onpaste = function(e) {  
  var items = e.clipboardData.items;  
  for (var i = 0; i < items.length; ++i) {  
    if (items[i].kind == 'file' && items[i].type == 'image/png') {  
      var blob = items[i].getAsFile();  
      var img = document.createElement('img');  
      img.src = window.URL.createObjectURL(blob);  
      document.body.appendChild(img);  
    }  
  }  
};  

12. 自定義協議支持

navigator.registerProtocolHandler( 'web+myscheme', 'http://example.com/handler?q=%s', 'My App');  

***是對音頻API的介紹，可以實現定時回放，音頻分析及合成等功能，不過這個要等Chrome 14出來。

原文：http://heikezhi.com/2011/07/20/html5-whats-new/

【編輯推薦】

1. HTML 5可見性API以及頁面預渲染
2. 全新改進的HTML 5表單創建
3. HTML 5會成為移動應用的天敵嗎？
4. 我們離HTML 5還有多遠？
5. HTML 5基礎之HTML ***PI的威力