【译】如何5分钟享受激情（version 5）

刚看了Jennifer Marsman 的5分钟了解html5.心血来潮。翻译过来分享给大家。

不过他绝对是标题党，我看了6分36秒才看完。翻译更是用了1个多小时的时间。

---------------------------------------正文------------------------------------

我将介绍新的语义标记，画布上绘图和动画，音频和视频支持，以及如何在旧的浏览器上使用HTML5。可能会超过5分钟，但是我会保证我尽量快速的让你了解。

语义标记和页面布局

这有个关于大学的伟大的故事，他们只是种植草坪，而没有修建任何的路。

一年之后，人们最频繁走的地方的草坪都已经消失了，那儿就成为了大学铺设最真实的人行道。

它非常有意义，那个人行道正是人们每天都走的道路。

新的HTML5语意元素是基于完全相同的逻辑。（见W3C的设计指导铺设道路 http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths）

语意元素清楚地向浏览器和开发人员描述他的意图或目的。

对比（例如）<div>标记。<div>标记定义了HTML文档中的一个分割块或者一个章节，但是它并没有告诉我们任何有关其内容或者传达明确的含义。开发人员通常在<div>标签上结合使用ids或者class name。这将给开发人员提供了更多的含义。但是不行的是，它不会帮助浏览器获得该标记的目的。例如<div id="header">

在HTML5中，有新的语义丰富的元素，可以一起向开发人员和浏览器传达元素的目的。

W3C采集数十亿现有的网页去发现开发人员已经使用的IDS和class name。一旦他们抛出DIV1，DIV2等，他们提出了一个丰富的描述性的列表，这个列表包含那些开发人员已经用过的元素，并且制定一个标准。

这里有一些HTML5中的新的语义元素：

article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time

由于语义丰富，你可能已经猜到了这些元素的大多数是做什么的。

但为了以防万一，这里有一个可视化的图来描述他们的作用：

Headers and footers不用多解释大家都明白，Nav元素可以用来创建一个导航或者菜单栏。你可以使用section和article去组织你的内容部分。

最后aside（旁白）元素可以用来辅助内容，例如，作为一个相关链接栏。

下边是一个使用到这些元素的简单的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is <mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog posts, etc.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman"/>
            <figcaption>Jennifer Marsman</figcaption>
        </figure>
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>
</html>

我要点名提出在这段代码中的一些新元素… …

你注意到那个hgroup 元素了么？他把我的h1 h2 组织在了一起。

Mark 元素允许我高亮或者标记一些重要的文本。

最后figure 和 figcaption元素指定了一个图在我的内容中（就像一个图片、图表、照片、代码片段等等。）并让各自的图标题（figcaption）与它们关联。

下图就是在结合了一些css后这个页面的样子。（注意这些css我是借用自我最有才华的组员 Brandon Satrom’的TechEd talk。但是这些美丽的小效果都是我弄的。

现在，想象一下如果是css好手而不是我弄的，结果会变得更绚丽。HTML的描述性可以让它超级简单的工作。

如果你在你的Visual studio 中发现了各种各样的波浪线。那是你的VS不能解析这些元素。确保你先安装VS 2010 SP1补丁，再在选择“工具->选项。在左边的导航窗格中展开文本编辑器，HTML，然后单击”验证“。从目标下拉菜单中，选择HTML5。这就会提供HTML5只能感知支持。哦也！

要想了解更多新元素的语意，另请参阅：

How to Enable HTMl5 Standards Support

Semantics section of the W3C HTML5 specification

Dive into HTML5 chapter on semantics entitled “What Does It All Mean?”

使用Canvas元素绘画

另一个HTML5中的新元素是 <canvas>标签。它如其名，就是一个空白的画布。

你需要使用javascript在画布上操作和绘画。你可能想要给你的canvas元素一个id的属性使你可以用Javascript代码访问它（或许如果你使用JQuery并且页面上只有一个画布，你可以直接用$(‘canvas’) 选择器去访问它而不用在命名）

下面我在画布上绘制的一个简单的例子。（我尝试借鉴苏格兰的国旗，请原谅任何不准确之处。）

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
    <script type="text/javascript">

        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // Draw blue rectangle
        ctx.fillStyle ='#0065BD';
        ctx.fillRect(0, 0, 125, 75);

        // Draw white X
        ctx.beginPath();
        ctx.lineWidth ="15";
        ctx.strokeStyle ="white";
        ctx.moveTo(0, 0);
        ctx.lineTo(125, 75);
        ctx.moveTo(125, 0);
        ctx.lineTo(0, 75);
        ctx.stroke();

    </script>
</body>
</html>

首先我们创建画布，并给它一个ID“myCanvas” 。如果浏览这段代码的浏览器不支持HTML5 canvas元素，它会显示“您的浏览器不支持canvas标签”，而不是绘制标志。
接下来，我有一个脚本，请记住，canvas标签只是一个图形容器，你必须使用JavaScript来绘制和渲染图形。
首先，我根据创建一个引用，他指向ID 为 “myCanvas”的元素，然后我获得这个画布的上下文（context），它提供在画布上的图形绘制和操纵的方法/属性。我指定“2D”去使用2维的上下文在页面上绘制。
然后，我画蓝色矩形，我使用FillStyle去指定蓝色。我使用fillRect绘制矩形，指定的大小和位置。调用fillRect（0，0，125，75）表示：“开始的位置（0，0） -上层的左上角-绘制一个矩形宽度= 125像素，高度= 75像素。
最后，我画上白色的X标志。我首先调用beginPath 开始绘画路径。我指定线宽 15像素（使用猜测和校对的方法尝试使用不同的值，直到它看起来正确）并且通过把strokeStyle属性指定为“白色使路径变白。然后使用MOVETO 和 lineTo去跟踪我的路径。这两个方法定义定位了一个为你画画的光标。MoveTo 和LineTo的区别是移动光标不画线，而LineTo移动光标画线。
我开始移动到（0,0）左上角这点。然后向 (125, 75)右下角画一条线。然后移动到（125,0）---右上角，再向左下角(0, 75)—画一条线。最后执行stroke（）方法。执行这些绘画操作。

快速比较Canvas与SVG

可伸缩矢量图形（SVG）是较早在浏览器窗口绘图标准。随着HTML5的画布的发布，很多人希望知道如何比较他们。
在我眼里，最大的区别在于，Canvas使用立即模式渲染，SVG使用保留模式呈现。这意味着，Canvas直接导致渲染的图形显示。在我上面的代码，一旦画出这个图了，系统就把它忘了并且不在保留它的状态。如果进行更改的话需要重新绘制。相比之下，SVG保留一个完整要呈现的对象的模型。这对于开发人员来说工作量很小，但是是把保持模型变成了更加重量级的事情。
SVG除了使用javascript还可以使用css来调用。这是一件值得考虑的优势。Canvas只能用javascript调用。
下边是一个高层次方面的差异概述：

如需更详细的比较，另请参见：

Patrick Dengler’s “Thoughts on When to use SVG and Canvas”
Jatinder Mann’s “Deep Dive Into HTML5 Canvas”
John Bristowe’s “An Introduction to HTML5 Canvas”

音频和视频支持

HTML5中的新的一大特点是支持播放音频和视频。在HTML5 之前你需要一个silverli或者flash插件去支持此类功能。在html5中你可以使用<audio> 和 <video>标签。

从编码的角度看，音频和视频元素，使用起来非常简单。（我带你更深入了解下他们的属性）

一些主流的浏览器也是支持音频和视频标签的。例如最新版本的IE, Firefox, Chrome, Opera和 Safari。然而，最棘手的部分是，你需要编解码器播放音频和视频，而不同的浏览器支持不同的编解码器。（参见http://diveintohtml5.org/video.html）。

幸运的是，这不是一个瓶颈，我们有一种更好的方式被应用到浏览器中，浏览器会尝试使用不同的格式来播放它（如果不成功，会使用下一个格式）。最为一个最佳实践，你应该提供多个音频或视频的来源，以适应不同的浏览器。如果都不行。你还可以回退到使用silverlight或者flash插件。最后浏览器会提示当前浏览器不支持这些<audio> 和 <video>元素。

例如：

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3"/>
    <source src="laughter.ogg" type="audio/ogg"/>
    Your browser does not support the audio element.
</audio>

有了这个代码，浏览器会首先尝试播放laughter.mp3文件。如果它没有正确的编解码器进行播放，下一步将尝试播放laughter.ogg文件。如果所有音频元素是在当前浏览器都不被支持，它会显示“您的浏览器不支持音频元素”。

关于视频和音频的一个警告：如果没有内置数字版权管理（DRM）的支持，开发人员必须自己实现它。看看W3C表明他们观点的链接 this link。（你也可以看看这个 Silverlight DRM documentation，可能是个更好的解决方案）。

Audio

首先让我们更详细的看看<audio>

<audio controls="controls">
    <source src="laughter.mp3" type="audio/mp3"/>
    <source src="laughter.ogg" type="audio/ogg"/>
    Your browser does not support the audio element.
</audio>

我们刚才已经讨论过那种fallback的机制。为每一个资源尝试可以播放它的方法。
注意，有一个 controls 属性。这将显示音频播放控件。包括一个播放/暂停按钮，时间，静音按钮，音量控制。在大多数情况下，对用户展示这个控件是一件好事，我讨厌有声访问的网站，并无法停止，静音，或将其关闭。不是吗？

在IE 音频播放控件是这样的：

这个控件在不同的浏览器里显示的不一样。下边的是显示在chrom里的样子：

下边是firefox里的样子：

其他有趣的音频元素属性包括：

因此，此代码示例将不仅显示音频播放控制，也会启用自动播放功能和在音频结束之后启动循环播放功能。

<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="laughter.mp3" type="audio/mp3"/>
    <source src="laughter.ogg" type="audio/ogg"/>
    Your browser does not support the audio element.
</audio>

如果你想在你自己的浏览器里使用<audio>元素。你可以去这里看看http://w3schools.com ，这里有一个伟大的编辑器“Tryit Editor”.或者你可以看看这篇文章 How to add an HTML5 audio player to your site 。

Video

现在让我们看看<video>元素。

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg"/>
    <source src="movie.mp4" type="video/mp4"/>
    <source src="movie.webm" type="video/webm"/>
    Your browser does not support the video tag.
</video>

正如我们上边讨论的，<video>元素支持多种源。如果遇到问题，他会按顺序尝试下个选项。
和<audio>一样<video>元素也有一个controls 属性。
下边是一个audio控件在IE浏览器中的截图：

其他有趣的视频元素属性包括：

你也可以自己去试试使用 <video>元素。使用：http://w3schools.com 的“Tryit Editor” ，看看都会发生什么！

想更多了解video和audio：

开发HTML5 同时支持旧版本的浏览器

我们已经讨论了在HTML5了很多很酷的新功能，包括新的语义元素，绘图画布标记，并支持音频和视频。
你可能会认为，这东西是真的很酷，但你的许多用户可能没使用HTML5兼容的浏览器。更何况，即便几个浏览器都支持HTML5，但是他们支持和展现的程度是不一样的。
有一种方法使用的新功能，您的网站也不会耽误使用旧浏览器的用户。你可以使用polyfills。
就像Paul Irish说的一样，polyfills是一个垫片来弥补空缺。它模仿未来的API，向下兼容旧的浏览器。在你的网站使用polyfills，你可以使用HTML5而不丢下那些使用旧浏览器的用户。
polyfill支持的方法之一是JavaScript库Modernizr库（但也有许多可用polyfills）。 Modernizr增加功能的检测能力，这样你就可以专门为浏览器是检查是否支持（例如）在画布元素，如果它不支持，并提供备手段（例如SVG）。
我们看看下边的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is <mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog posts, etc.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman"/>
            <figcaption>Jennifer Marsman</figcaption>
        </figure>
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>
</html>

这个代码包含了大量的新的HTML5元素，在旧的浏览器不支持。请记住，在Internet Explorer9，它看起来像这样：

我们可以使用Internet Explorer开发人员工具，看看这页面在旧版本的IE浏览器显示成什么样。在Internet Explorer中，按F12访问的开发工具。

请注意，当前设置为IE9的浏览器模式（在顶部的灰色菜单栏）。点击浏览器上的模式，并从出现的下拉菜单中，选择“Internet Explorer 8中”（不支持HTML5）。

虽然这看起是一个很难去修复的问题，它实际上并不是那么糟糕。因为这并不是它不，而是工作是IE8的识别我使用新的HTML5元素，所以它不会添加到DOM，所以你不能使用CSS样式控制他们。

然而，仅仅加入一个Modernizr的引用（未做任何其他代码的变化！）强制把这些元素放到DOM中。从http://www.modernizr.com/download/下载并添加到<head>部分：

<head>
    <meta charset="utf-8"/>
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
</head>

我添加了两个脚本引用，一个是jQuery的另一个是Modernizr的。我实际上并不需要在这里添加JQuery引用，接下来我会使用到，所以我现在加入。

现在就让这个简单的变化（1个脚本的引用）应用到Internet Explorer 8：

它并不完美，但是这是非常接近原始版本，我们在Internet Explorer9中看到。 Modernizr添加了这些新的HTML5元素到IE8的不理解到DOM，因为他们在DOM中，我们可以为他们定制CSS。

但是Modernizr的并不止于此！请注意，IE8和IE9的网页版本之间的差异之一是，IE9版本上的两篇文章和图漂亮的圆角，和IE8的版本不同。我们也可以使用Modernizr的解决这个问题。

<script type="text/javascript">
        if (!Modernizr.borderradius) {
            $.getScript("script/jquery.corner.js", function() {
                $("article").corner();
                $("figure").corner();
            });
        }
    </script>

在这个脚本中，我们检查Modernizr的对象，看看是否有“borderradius”（CSS3的功能）的支持。如果没有，我使用jQuery脚本中jquery.corner.js（可供下载http://jquery.malsup.com/corner/需要额外的引用jQuery，我在前面提出的）。然后，我只需在我的article和figure元素上调用我的corner（）方法给他们圆角。

或者，你用一种略有不同的方式。 Modernizr的一个可选的（不包括）有条件的资源加载器称为Modernizr.load（），基于Yepnope.js。这允许您只加载用户需要的polyfilling脚本，它加载脚本是异步和并行的，有时可以提供性能上的提升。要得到Modernizr.load，你必须在http://www.modernizr.com/download/创建一个自定义生成的Modernizr并且把它包含进去。开发中的版本不包括它。有了Modernizr.load，我们可以写一个这样的脚本：

 <script type="text/javascript">
        Modernizr.load({
            test: Modernizr.borderradius,
            nope: 'script/jquery.corner.js',
            callback: function () {
                $('article').corner();
                $('figure').corner();
            }
        });
    </script>

总之，这实现了和我们以前的脚本相同的功能。 Modernizr.load第一次测试的布尔属性“Modernizr.borderradius”，看它是否支持。然后，nope定义的资源负载测试，如果是false。由于IE8不支持CSS3的属性“borderradius”，它会加载jquery.corner.js脚本。最后，回调指定一个函数来运行脚本完成加载，所以我们将调用我的'article'和'figure'的concer（）方法更。正如我们以前的方式。

如果你想深入了解，Modernizr.load在http://www.modernizr.com/docs/有一个简短的教程。

现在，通过使用这些脚本，我们的Internet Explorer 8版本（不支持HTML5）看起像上图那样！

因此，使用像Modernizr的polyfills和工具使您能够使用新的HTML5功能，并在旧的浏览器仍然提供一个很好的经验。欲了解更多信息，请查看详细介绍如何Modernizr的检测HTML5特性http://www.diveintohtml5.org/detect.html。

总结

在此介绍到HTML5，我们讨论了语义标记，画布，音频和视频，并使用HTML5，同时保留支持旧的浏览器还要注意，还有很多我们没有涉及：微观数据，存储，CSS3，等在这里继续学习关于HTML5的一些资源：

IE Test Drive - 即使你不使用IE浏览器，这是一很给力的网站。它包含了一个吨演示：速度演示，HTML5的演示，图形演示和浏览器演示。他们尝试在您最喜爱的的浏览器！这个网站也有其他资源的链接。

Beauty of the Web - 展示HTML5硬件加速和寄托功能与Internet Explorer9的优势在网络上的最佳地点

BuildMyPinnedSite - 你需要使Windows集成的所有的代码，思路和事例。
HTML5 Labs- 这里有微软的原型和来自W3C那样的机构的不稳定规范。你可以使用原型就如IndexedDB, WebSockets, FileAPI, and Media Capture API。

视频

Brandon Satrom’s “Application Development with HTML5” talk at TechEd 2011 –这是一个长达1小时神话般的谈话。如果你想从事HTML5开发，他会告诉你，你需要了解什么。

HTML5 talks from MIX 2011 丰富的html5 会议。

工具

许多开发工具已经支持HTML5。试试这些：

Visual Studio 2010 SP 1 - SP1中添加了基本的HTML5和CSS3的IntelliSense和验证。欲了解更多信息，请参阅：

http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx.

Web标准为Microsoft Visual Studio2010 SP1的更新 - 这是一个Visual Studio的扩展，添加更新的HTML5和CSS3的IntelliSense和验证的Visual Studio2010 SP1中，基于当前的W3C规范。

WebMatrix - 支持HTML5是默认的开箱（添加一个新的HTML页面使用HTML5的默认DOCTYPE和模板代码）

ASP.NET MVC3的工具更新
在新建项目对话框包括一个项目模板复选框启用HTML5的版本。
这些模板利用Modernizr的1.7提供低级别的浏览器支持HTML5和CSS3的兼容性。

Expression Web的4 SP 1
HTML5的IntelliSense和支持在代码编辑器和设计视图
更丰富的CSS3样式的编辑和IntelliSense
SuperPreview页面的交互模式和在线服务（远程浏览器包括Windows和Mac浏览器，IE8，IE9中，和Safari 4和5）
除了开发工具，不要忘记：

Windows Phone“芒果”中包含的Internet Explorer9，支持HTML5网站。
Internet Explorer10平台预览支持许多新的CSS3和HTML5功能的完整列表在http://msdn.microsoft.com/en-us/ie/gg192966.aspx。
HTML5是在这里。提出和开发让人耳目一新的网站！

原文地址：http://www.codeproject.com/KB/solution-center/HTML5-in-5.aspx

posted @ 2011-11-24 17:04 技术弟弟阅读(2679) 评论(8) 编辑收藏举报

刷新页面返回顶部

技术弟弟