iLeichun

你难道还没有考虑使用HTML5？ 当然我猜想你可能有自己的原因；它现在还没有被广泛的支持，在IE中不好使，或者你就是喜欢写比较严格的XHTML代码。HTML5是web开发世界的一 次重大的改变，事实上不管你是否喜欢，它都是代表着未来趋势。其实HTML5并不难理解和使用。我们这里能列出许多原因为什么现在要开始使用HTML5。

目前有很多的文章介绍使用HTML5并且介绍了使用它的优势和好处，没错，我们这篇文章也类似。随着更多这样的文章，以及Apple的支持， Adobe围绕HTML5的产品开发，以及移动flash的死亡，如此多网站的支持，我想对那些仍旧没有或者不想接受它的人说一些话。我认为主要得原因是，它看起来像一个神秘的东西。很多感觉它像喷气背包或者飞行汽车。一个未经验证的非凡想法但是并不实际。但是事实上现在已近非常的实际了。

为了解密HTML5并且帮助顽固的开发设计人员，我这里写了列出了使用HTML5的几大原因，希望对大家有帮助！

第十大原因：易用性

俩个原因使得使用HTML5创建网站更加简单：语义上及其ARIA。新的HTML标签像<header>, <footer>，<nav>，<section>， <aside>等等，使得阅读者更加容易去访问内容。在以前，即使你定义了class或者ID你的阅读者也没有办法去了解给出的一个div究 竟是什么。使用新的语义学的定义标签，你可以更好的了解HTML文档，并且创建一个更好的使用体验。

ARIA是一个W3C的标准主要用来对HTML文章中的元素指定“角色“，通过角色属性来创建重要的页面地形例 如,header，footer，navigation或者aritcle很有必要。这一点曾经被忽略掉了并且没有被广泛使用，因为事实上并不验证。然 而，HTML5将会验证这样属性。同时，HTML5将会内建这些角色并且无法不覆盖。更多的HTML5和ARIA讨论，请大家查看这里。

第九大原因：视频和音频支持

忘了flash和其它第三方应用吧，让你的视频和音频通过HTML5标签<video>和<audio>来访问资源。正确 播放媒体一直都是一个非常可怕的事情，你需要使用<embed>和<object>标签，并且为了它们能正确播放必须赋予一大堆 的参数。你的媒体标签将会非常复杂，大堆得令人迷惑的代码。而且HTML5视频和音频标签基本将他们视为图片：<video src=””/>。但是其它参数例如宽度和高度或者自动播放呢？不必担心，只需要像其它HTML标签一样定义：<video src=”url” width=”640px” height=”380px” autoplay/>。

实际上这个过程非常简单，然而我们的老浏览器可能并不喜欢我们的HTML5，你需要添加更多代码来让他们正确工作。但是这个代码还是比<embed>和<object>来的简单的多。

第八大原因：Doctype

没错，就是doctype，没有更多内容了。是不是非常简答？不需要拷贝粘贴一堆无法理解的代码，也没有多余的head标签。最大的好消息在于，除了简单，它能在每一个浏览器中正常工作即使是名声狼藉的IE6。

第七大原因：更清晰的代码

如果你对于简答，优雅，容易阅读的代码有所偏好的话，HTML5绝对是一个为你量身定做的东西。HTML5允许你写出简单清晰富于描述的代码。符合语义学的代码允许你分开样式和内容。看看这个典型的简单拥有导航的heaer代码：
<div id=”header”>  <h1>Header Text</h1>  <div id=”nav”>   <ul>    <li><a href=”#”>Link</a></li>    <li><a href=”#”>Link</a></li>    <li><a href=”#”>Link</a></li>   </ul>  </div> </div>
是不是很简单？但是使用HTML5后会使得代码更加简单并且富有含义：
<header>  <h1>Header Text</h1>  <nav>   <ul>    <li><a href=”#”>Link</a></li>    <li><a href=”#”>Link</a></li>    <li><a href=”#”>Link</a></li>   </ul>  </nav> </header>
使用HTML5你可以通过使用语义学的HTML header标签描述内容来最后解决你的div及其class定义问题。 以前你需要大量的使用div来定义每一个页面内容区域，但是使用新 的<section>，<article>，<header>，<footer>，<aside> 和<nav>标签，需要你让你的代码更加清晰易于阅读。

第六大原因：更聪明的存储

HTML5中最酷的特性就是本地存储。有一点像比较老的技术cookie和客户端数据库的融合。它比cooke更好用因为支持多个windows存储，它拥有更好的安全和性能，即使浏览器关闭后也可以保存。

因为它是个客户端的数据库，你不用担心用户删除任何cookie，并且所有主流浏览器都支持。

本地存储对于很多情况来说都不错， 它是HTML5工具中一个不需要第三方插件实现的。能够保存数据到用户的浏览器中意味你可以简单的创建一些应用特性例如：保存用户信息，缓存数据，加载用户上一次的应用状态。

第五大原因：更好的互动

我们都喜欢更好的互动，我们都喜欢对于用户有反馈的动态网站，用户可以享受互动的过程。输入<canvas>，HTML5的画图标签允许你做更多的互动和动画，就像我们使用Flash达到的效果。

除了<canvas>，HTML5同样也拥有很多API允许你创建更加好的用户体验并且更加动态的web应用程序。 这里有一个列表：

• Drag and Drop (DnD)
• Offline storage database
• Browser history management
• document editing
• Timed media playback

  第四大原因：游戏开发

  没错， 你可以使用HTML5的<canvas>开发游戏。HTML5提供了一个非常伟大的，移动友好的方式去开发有趣互动的游戏。如果你开发Flash游戏，你就会喜欢上HTML5的游戏开发。

  Script-tutorials目前提供了4个不部分的HTML5游戏开发教程，这里看看他们开发的有趣游戏：

• HTML5 Gaming Development Lesson One
• HTML5 Gaming Development Lesson Two
• HTML5 Gaming Development Lesson Three
• HTML5 Gaming Development Lesson Four

  第三大原因： 遗留及其跨浏览器支持
  你的现代流行浏览器都支持HTML5（Chrome，Firefox，Safari，IE9和Opera），并且创建了HTML5 doctype这样所有的浏览器，即使非常老非常令人厌恶浏览器像IE6都可以使用。但是因为老的浏览器能够识别doctype并不意味它可以处理 HTML5标签和功能。幸运的是，HTML5已经使得开发更加简单了，更多支持更多浏览器，这样老的IE浏览器可以通过添加javascript代码来使 用新的元素：
  <!–[if lt IE 9]>  <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–>

  第二大原因： 移动，移动还是移动

  你可以称之为“直觉”，但是我认为移动技术将会变得更加的流行。我知道，这里有些非常疯狂的猜测，有些可能你也想到了 – Mobile是一个时尚！移动设备将占领世界。更多的接受移动设备将会增长的非常迅速。这意味着更多的用户会选择使用移动设备访问网站或者web应用。 HTML5是最移动化的开发工具。随着Adobe宣布放弃移动flash开发，你将会考虑使用HTML5来开发webp应用。

  当手机浏览器完全支持HTML5那么开发移动项目将会和设计更小的触摸显示一样简单。这里有很多的meta标签允许你优化移动：

• viewport: 允许你定义viewport宽度和缩放设置；
• 全屏浏览器： ISO指定的数值允许Apple设备全屏模式显示；
• Home screen icons:  就像桌面收藏，这些图标可以用来添加收藏到IOS和Android移动设备的首页。

  第一大原因： 它是未来，开始用吧！

  最大的原因今天你就开始使用HTML5是因为它是未来，不要掉队了！HTML5不会往每个方向发展，但是更多的元素已经被很多公司采用，并且开始着 手开发。HTML5其实更像HTML，它不是一个新的技术需要你重新学习！如果你开发XHTML strict的话你现在就已经在开发HTML5了。为什么不更完整的享受HTML5的功能呢？

  你实际上没有任何借口不接受HTML5。事实上我唯一一个原因使用HTML5是因为它书写代码简单清晰。其它的特性其实我也没有真正使用。你可以考 虑现在开始使用HTML5书写代码，它能帮助你改变书写代码的方式及其设计方式。开始用HTML5代码编写web应用吧，说不定下一个移动应用或者游戏应 用就是用HTML5开发的！

在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。

1、 视频流

HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia）。

[html]

1. <videoid="video"autoplay=""></video>
2. <script>
3. varvideo_element=document.getElementById(¹video¹);
4. if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow
5. navigator.getUserMedia(¹video¹,success,error);
6. }
7. functionsuccess(stream){
8. video_element.src=stream;
9. }
10. </script>

<video id="video" autoplay=""></video> <script> var video_element = document.getElementById(¹video¹); if (navigator.getUserMedia) { // opera should use opera.getUserMedia now navigator.getUserMedia(¹video¹,success, error); } function success(stream) { video_element.src =stream; } </script>

视频流

2、 拍照

拍照功能，我们采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入，这一点很棒。主要代码如下：

[html]

1. <script>
2. varcanvas=document.createElement(¹canvas¹);
3.  
4. varctx=canvas.getContext(¹2d¹);
5. varcw=vw;
6. varch=vh;
7. ctx.fillStyle="#ffffff";
8. ctx.fillRect(0,0,cw,ch);
9. ctx.drawImage(video_element,0,0,vvw,vvh,0,0,vw,vh);
10. document.body.append(canvas);
11. </script>

<script> var canvas =document.createElement(¹canvas¹); var ctx = canvas.getContext(¹2d¹); var cw = vw; var ch = vh; ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, cw, ch); ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh); document.body.append(canvas); </script>
3、 图片获取

下面我们要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。

[html]

1. varimgData=canvas.toDataURL("image/png");

var imgData =canvas.toDataURL("image/png");

因为真正图像数据是base64编码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分，我们可以用两种办法来获取。

第一种：是在前端截取22位以后的字符串作为图像数据，例如：

[html]

1. vardata=imgData.substr(22);

var data = imgData.substr(22);

如果要在上传前获取图片的大小，可以使用：

[html]

1. varlength=atob(data).length;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding

var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding

第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里：

[html]

1. $image=base64_decode(str_replace(¹data:image/jpeg;base64,¹,¹¹,$data);

$image = base64_decode( str_replace(¹data:image/jpeg;base64,¹, ¹¹,$data);

4、 图片上传

在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时：

[html]

1. $.post(¹upload.php¹,{¹data¹:data});

$.post(¹upload.php¹,{ ¹data¹ : data } );

在后台我们用PHP脚本接收数据并存储为图片。

[html]

1. functionconvert_data($data){
2. $image=base64_decode(str_replace(¹data:image/jpeg;base64,¹,¹¹,$data);
3. save_to_file($image);
4. }
5. functionsave_to_file($image){
6. $fp=fopen($filename,¹w¹);
7. fwrite($fp,$image);
8. fclose($fp);
9. }

function convert_data($data){ $image = base64_decode( str_replace(¹data:image/jpeg;base64,¹, ¹¹,$data); save_to_file($image); } function save_to_file($image){ $fp = fopen($filename, ¹w¹); fwrite($fp, $image); fclose($fp); }

请注意，以上的解决方案不仅能用于Web App拍照上传，并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑，例如裁剪、上色、涂鸦的画板功能，然后把用户编辑完的图片保存到服务器上。

Canvas涂鸦功能

在HTML5的驱动下，Web App与Native App之间是否还有不可逾越的鸿沟？我将会在3月23日百度开发者大会上现场来解答这个问题，敬请期待。

相关规范：

The MediaCapture API：http://www.w3.org/TR/media-capture-api/

Canvas：http://dev.w3.org/html5/2dcontext/

Chromium最近实现了一个HTML5的新特性：范围样式，又叫做<style scoped>。开发者可以通过为根元素设定一个添加了scoped属性的style标签，来限制样式只作用于style标签的子元素上。这会限制样式只影响style标签的父元素和它所有的后代元素。

例子

下面是一个使用了标准样式的简单页面：

<html>

<body>

 <div>a div! <span>a span!</span></div>

 <div>

 <style>

 div { color: red; }

 span { color: green; }

 </style>

 a div! <span>a span!</span></div>

 <div>a div! <span>a span!</span></div>

</body>

</html>

它设定的样式规则将使得所有的<div>变为红色，<span>变成绿色：

a div!a span!
a div!a span!
a div!a span!

然而，如果我们为<style>元素设置了scoped属性：

<html>

<body>

 <div>a div! <span>a span!</span></div>

 <div>

 <style scoped>

 div { color: red; }

 span { color: green; }

 </style>

 a div! <span>a span!</span></div>

 <div>a div! <span>a span!</span></div>

</body>

</html>

那么这个样式规则限制使得它们应用于<style scoped>元素的父<div>元素及其内部的所有元素上。我们称之为“范围”，结果如下所示：

a div! a span!
a div!a span!
a div! a span!

当然我们可以在任何地方使用这个标签。所以如果你喜欢冒险，你可以在一个范围样式内添加尽可能多的范围样式来获取尽可能细的样式控制粒度。

用途

它有什么好处？

一种常见的用途是内容合并：当你作为一个网站的作者想嵌入来自第三方的内容（译者注：想想博客），包括它所有的样式风格，但是不想让这些样式“污染”页面其他无关的部分。其一个巨大的优势是可以将其他网站例如Yelp、Twitter、Ebay等的内容合并到一个单独页面，而无需使用<iframe>或者动态的编辑外部内容来隔离它们。

如果你使用内容管理系统（CMS），它会发送许多标记片段来整合成为一个最终显示的页面。所以范围样式是一个伟大的功能，可以确保每一个片段与任何其他页面上的样式相隔离。这对wiki来说也一样的有用。

当你想在页面上展示一些漂亮的演示代码，很容易限制样式只作用于演示内容。你可以在演示随意的添加样式，而不用担心对页面上其他内容的影响。

它的另一个用途是简单的封装：例如，如果你的网页有一个侧边菜单，把指向菜单的样式封装到其中的<style scoped>段落会很有意义。这些样式规则对页面其他区域的渲染将不会有任何影响，这可以使得它可以很好地和主要内容进行分离！

它可能最引人注目的用途之一是用在Web组件模型上。Web组件将是一个构建像滑块、菜单、日期选择器和选项卡部件等的伟大方式。通过提供范围内的样式，设计人员可以构建一个组件并且将其打包成为一个独立的单位，其他人可以使用这个组件并组合为一个富Web应用程序。我们计划在Web组件和shadowDOM（已经可以在chrome://flags里开启实验性的“Shadow DOM”标志来启用）里大量使用范围样式。除了例如内联样式这样不好的方式，现在没有真正的好办法来确保样式限制在Web组件里，所以范围样式是一个完美的解决方案。

为什么包括父元素？

最自然的方式需要包括父元素，以便于<style scoped>规则可以来做为整个区域设置通用背景颜色这样类似的事情。它还允许采用“防守性”的方式来书写范围样式，通过为ID或者类选择器加上前缀的方式为还不支持<style scoped>的浏览器提供优雅降级。

<div id=”menu”>

 <style scoped>

 #menu .main { … }

 #menu .sub { … }

 …

这种模仿可以实现“范围样式”的效果，但是因为更复杂的选择器会有一些运行时的性能损失。这种做法的好处是，它采用一个优雅的降级方法让我们可以等到<style scoped>被广泛支持和ID选择器可以简单地被丢弃时。

状态

鉴于范围样式的实现是最新的，它目前被隐藏在Chrome的运行时标志里。要激活它，你需要下载版本号为19或者更高的Chrome（现在的Chrome Canary），然后在chrome://flags里找到“开启<stylescoped>”选项（靠近最后），单击“启用”，然后重新启动浏览器。

目前没有已知bug，但是@keyframes和@-webkit-region区域范围的版本还正在实现中。此外，@font-face被忽略掉了，因为现在有一个很好的机会来调整这个规范。

我们鼓励每个对这个特性感兴趣的人都来尝试一下，让我们知道你的反馈：好、不好以及（可能）不足。

来源：蓝色理想　作者：Poorfish