中国领先的IT技术网站
|
|

HTML 5中最新的鲜为人知的酷特性

Google的工程师Eric Bidelman (G+, @ebidel) 做了一个演示幻灯,对Chrome中最新的那些很少人知道,但都非常酷也非常有用的HTML5特性进行了介绍。

作者:YUANYI来源:黑客志|2011-07-29 11:13

【沙龙】51CTO诚邀您9月23号和多位技术大咖一起聊智能CDN的优化之路,抓紧时间哦!


Google的工程师Eric Bidelman (G+, @ebidel) 做了一个演示幻灯,对Chrome中最新的那些很少人知道,但都非常酷也非常有用的HTML5特性进行了介绍,内容涵盖语义标签,核心JS等等,借助这些特性,可能以前需要你花很大力气才能实现的功能,现在只需几分钟就可轻松搞定。

下面是内容摘要:

1. <details>/<summary>

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

效果:

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

2. <output>

动态计算结果:

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

3.<mark>

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

效果:

Lorem ipsum dolor, consectetur adipiscing…

4. 语音输入

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

效果:

5. Element操作

  • Element.classList,获取元素的class并进行操作
  • Element.dataSet, 获取所有元素的数据属性
  • Element.matchSelector,判断元素是否匹配某个选择器

6. Window.crypto,伪随机数生成

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

7. Window.performance,性能检测

8. 页面预渲染及可见性(可参看黑客志之前的文章介绍

  1. <link rel="prerender" href="http://example.org/index.html"> 
  1. document.addEventListener('visibilitychange', function(e) {  
  2.   console.log('hidden:' + document.hidden, 'state:' + document.visibilityState)  
  3. }, false);  

9. navigator.online,判断是否有网络连接

10. window.onerror,全局异常捕获

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

11. 接受文件粘贴

  1. document.body.onpaste = function(e) {  
  2.   var items = e.clipboardData.items;  
  3.   for (var i = 0; i < items.length; ++i) {  
  4.     if (items[i].kind == 'file' && items[i].type == 'image/png') {  
  5.       var blob = items[i].getAsFile();  
  6.       var img = document.createElement('img');  
  7.       img.src = window.URL.createObjectURL(blob);  
  8.       document.body.appendChild(img);  
  9.     }  
  10.   }  
  11. };  

12. 自定义协议支持

  1. 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 5 API的威力
【责任编辑:陈贻新 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Java网络编程精解

本书结合大量的典型实例,详细介绍了用Java来编写网络应用程序的技术。本书的范例都基于最新的JDK 1.5版本,书中内容包括:Java网络编程的...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× 学习达标赢Beats耳机