伴隨著 chrome, firefox 3.5, opera, 和 safar對html5的支持，html5已經(jīng)像一列暴走的列車接近我們了。這里是些好的建議幫助你準(zhǔn)備過渡到html5.

see what others have done（首先讓我們看看其他人已經(jīng)做的吧）

開始準(zhǔn)備html5的第一件事情就是先看下別人是使用它的。html 5 gallery 演示了一些使用html5的網(wǎng)站。

now you do it（現(xiàn)在你可以開始了）

你可以先看看這些網(wǎng)站的文章，here（這里html5 預(yù)覽） 和 elsewhere（和其他地方html5doctor）, 甚至 read the specification（讀取html5詳細(xì)說明）

但是上面當(dāng)中文章沒有一個能像使用新的元素那樣讓您領(lǐng)會掌握html5.

通過實(shí)際做，你可以知道什么可以工作，什么不可以工作。比如我在firefox3.5版本中發(fā)現(xiàn)類似article 和section的標(biāo)簽?zāi)J(rèn)顯示方式是display:inline模式,所以不得不強(qiáng)制設(shè)置它們?yōu)閐isplay:block模式才能像期望的效果顯示。

下面是整理的一些 html 5, xhtml 1.0/1.1, 以及xhtml 5之間的一些關(guān)系或者結(jié)論吧。

我們所熟知和了解的html 4.0，它是基于sgml（standard generalized markup language）規(guī)則手冊的。

在sgml規(guī)則手冊中，元素的書寫并不區(qū)分大小寫，你可以有選擇的閉合標(biāo)簽，標(biāo)簽屬性的書寫也可以不用引號標(biāo)記。

xhtml 1.0 和1.1是基于xml的，在xml規(guī)則手冊中，所有的標(biāo)簽和屬性必須用小寫，標(biāo)簽必須閉合，而且所有的屬性必須用引號括起來。

html5定義的標(biāo)記語言不是基于上面任何一種規(guī)則手冊，但是html5可以被寫成要么是html形式，要么是xhtml形式。

如果你用html形式書寫標(biāo)簽的話，你就可以不用區(qū)分大小寫，而且標(biāo)簽可以不用閉合，屬性不用引號，當(dāng)中可以穿插一些xml的標(biāo)簽。比如：<img /><br />等。

但是如果你用xhtml書寫標(biāo)簽的話就必須嚴(yán)格遵照規(guī)格手冊。

以后xml畢竟是個發(fā)展方向，所以我推薦大家使用xhtml5.

使用xhtml5的時(shí)候一定要記住在聲明mime 類型的時(shí)候，一定要用application/xhtml+xml 或者 text/xml。如果有語法錯誤會提示滴哈。

正則表達(dá)式

html5擴(kuò)展了input元素，給它增加了一些新的屬性，比如min max （主要針對數(shù)字類型），html5還提供了一些新的type類型（比如url, email, date, 和time）

如果這些屬性不能滿足你的需求，html5還提供給type為text的input一個pattern的屬性，pattern的值就是和ecmascript中的正則表達(dá)一樣。

這寫表單屬性已經(jīng)在safari and chrome, 和 opera中支持。如果你的瀏覽器不支持這些屬性。你可以下載google’s web forms 2 提供。

例子：

<p>
enter a date: <input type="date" name="day"
required="required"
title="use format yyyy-mm-dd" />
</p>

<p>
enter a us or canadian postal code:
<input type="text" name="postcode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][a-z][0-9]/s+[a-z][0-9][a-z])"
title="us: 99999-1234; canadian: 0a1&#160;b2c" />
</p>

static art with svg

這是一個復(fù)雜的svg文件。這里還有個簡單地 下面是個例子：

<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 200 100"
width="200px" height="100px">

<circle cx="50" cy="50" r="30"
    style="stroke:none; fill:#ff0000;"/>

<g transform="translate(100, 20) scale(1.65)">
    <polygon points="36 25, 25 36, 11 36, 0 25,
        0 11, 11 0, 25 0, 36 11"
        style="stroke:none; fill:#0000ff;" />
</g>

<rect x="60" y="20" height="60" width="60"
    style="stroke:none; fill:#00ff00;
    fill-opacity: 0.5;" />
</svg>

svg可以用js動態(tài)更改。html5提供了更好的解決方案。

空白畫布的支持
html5令人興奮的特性之一就是支持空白畫布。這一特性firefox, safari, opera, 和 chrome
都支持。但是ie不支持。你可以用js繪制你需要的畫布。
示例代碼：

function drawsimplecanvas() {
  var canvas =
    document.getelementbyid("simplecanvas");
  if (canvas.getcontext) {
    var ctx = canvas.getcontext("2d");

    ctx.beginpath(); // the circle
    ctx.fillstyle = "#ff0000";
    ctx.arc(50, 50, 30, 0, 2*math.pi, true);
    ctx.closepath();
    ctx.fill();
    ctx.save();

    // move and resize the octagon
    ctx.translate(100, 20);
    ctx.scale(1.65, 1.65);
    ctx.fillstyle = "#0000ff";
    ctx.beginpath();
    ctx.moveto(36, 25); ctx.lineto(25, 36);
    ctx.lineto(11, 36); ctx.lineto(0, 25);
    ctx.lineto(0, 11); ctx.lineto(11, 0);
    ctx.lineto(25, 0); ctx.lineto(36, 11);
    ctx.closepath();
    ctx.fill();

    // restore graphics as they
    // were before move and resize
    ctx.restore();
    ctx.fillstyle = "#00ff00";
    ctx.globalalpha = 0.5;
    ctx.beginpath();
    ctx.rect(60, 20, 60, 60);
    ctx.closepath();
    ctx.fill();
  }
}

更多關(guān)于canval可以看這里canvas tutorial

不要等了趕緊驗(yàn)證下html5在表單和canvas等的新特性吧