【譯】如何5分鐘享受激情（version 5）

How to make love---HTML5 in 5 minutes

剛看了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：

5 Things you need to know to start using <audio> and <video> today
How to add an HTML5 audio player to your site
W3C Schools HTML5 video

開發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 技術弟弟閱讀(2703) 評論(8) 收藏舉報

刷新頁面返回頂部

技術弟弟