HTML 5中最新的鲜为人知的酷特性-html5的新特性有哪些

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/

【编辑推荐】