Google的工程師Eric Bidelman (G+, @ebidel) 做了一個(gè)演示幻燈，對Chrome中***的那些很少人知道，但都非?？嵋卜浅Ｓ杏玫腍TML5特性進(jìn)行了介紹，內(nèi)容涵蓋語義標(biāo)簽，核心JS等等，借助這些特性，可能以前需要你花很大力氣才能實(shí)現(xiàn)的功能，現(xiàn)在只需幾分鐘就可輕松搞定。

下面是內(nèi)容摘要：

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>

動(dòng)態(tài)計(jì)算結(jié)果：

<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并進(jìn)行操作
• Element.dataSet， 獲取所有元素的數(shù)據(jù)屬性
• Element.matchSelector，判斷元素是否匹配某個(gè)選擇器

6. Window.crypto，偽隨機(jī)數(shù)生成

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

7. Window.performance，性能檢測

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

<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，判斷是否有網(wǎng)絡(luò)連接

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. 自定義協(xié)議支持

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

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

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

【編輯推薦】

1. HTML 5可見性API以及頁面預(yù)渲染
2. 全新改進(jìn)的HTML 5表單創(chuàng)建
3. HTML 5會(huì)成為移動(dòng)應(yīng)用的天敵嗎？
4. 我們離HTML 5還有多遠(yuǎn)？
5. HTML 5基礎(chǔ)之HTML ***PI的威力