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

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

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 ***PI的威力
责任编辑:陈贻新 来源: 黑客志
相关推荐

2016-05-03 10:19:04

H5技巧干货

2010-03-23 16:53:19

Visual Stud

2015-06-09 11:12:31

Swift语言Swift特性

2009-09-14 09:45:20

Chrome谷歌操作系统

2019-10-08 16:24:33

Chrome浏览器

2022-08-23 09:01:02

HTMLWeb

2022-11-30 16:31:48

CSS开发浏览器

2020-06-05 14:11:21

Swift运算符代码

2009-02-09 09:16:28

热键自注销漏洞

2019-12-12 20:49:05

JavaScript语言运算符

2011-05-03 13:13:52

编程PHPJava

2021-08-03 09:55:37

Python函数编程语言

2010-01-07 10:05:51

IT顾问特质

2022-05-30 09:01:13

CSS技巧前端

2009-07-09 17:38:35

2014-07-29 14:25:43

Unix命令

2023-04-23 15:11:26

2019-11-20 10:54:32

Python数据结构数据库

2014-04-22 16:38:12

GitHubGitHub 使用技巧

2023-12-06 08:46:20

CSSFlex内幕
点赞
收藏

51CTO技术栈公众号