p2h.cn始于05年,最早由来自腾讯,网易的前开发工程师,曾经为美的,格兰仕,电信,陆虎等企业提供过高品质psd转html解决方案。累计300多个客户至今,超过1000多个项目。

专注前端技术,关注用户体验

【渴切Keqie.com报道】渴切网是P2H.cn品牌推出的新的网站健康服务的网站品牌,下面p2h为大家呈现12个html5鲜为人知的新奇特性,html5已经在中国经历了两三年的发展,在这两三年取得突飞猛进的发展,在网站建设还是网页游戏中还是引导浏览器的改革方法都获取了令人惊奇的成绩,html5的普及和html5的周边的服务,我们将指日可待了。

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

渴切网 Keqie.com配图
下面是内容摘要:

html5让人大跌眼镜的炫酷特性1. <details>/<summary>

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

效果:

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

html5让人大跌眼镜的炫酷特性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>

html5让人大跌眼镜的炫酷特性3.<mark>

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

效果:

Lorem ipsum dolor, consectetur adipiscing…

html5让人大跌眼镜的炫酷特性4. 语音输入

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

 

效果:

html5让人大跌眼镜的炫酷特性5. Element操作

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

html5让人大跌眼镜的炫酷特性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);

html5让人大跌眼镜的炫酷特性7. Window.performance,性能检测

html5让人大跌眼镜的炫酷特性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);

html5让人大跌眼镜的炫酷特性9. navigator.online,判断是否有网络连接

html5让人大跌眼镜的炫酷特性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. };

html5让人大跌眼镜的炫酷特性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. };

html5让人大跌眼镜的炫酷特性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/


欢迎转载,转载请注明来源:http://www.p2h.cn/html5-cool-features/

相关链接: