DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> html5來了,你准備好了嗎
html5來了,你准備好了嗎
編輯:HTML和Xhtml     

網頁制作poluoluo文章簡介:本文主要介紹html4 html1.0和1.1 以及html5的區別 整理介紹html5特新性比如表單擴展,canvas,SVG等

伴隨著 Chrome, Firefox 3.5, Opera, 和 Safar對html5的支持,html5已經像一列暴走的列車接近我們了。這裡是些好的建議幫助你准備過渡到html5.

See what others have done(首先讓我們看看其他人已經做的吧)

開始准備html5的第一件事情就是先看下別人是使用它的。HTML 5 gallery 演示了一些使用html5的網站。

Now you do it(現在你可以開始了)

你可以先看看這些網站的文章,here(這裡html5 預覽) 和 elsewhere(和其他地方html5doctor), 甚至 read the specification(讀取html5詳細說明)

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

通過實際做,你可以知道什麼可以工作,什麼不可以工作。比如我在firefox3.5版本中發現類似article 和section的標簽默認顯示方式是display:inline模式,所以不得不強制設置它們為display:block模式才能像期望的效果顯示。

下面是整理的一些 HTML 5, XHTML 1.0/1.1, 以及XHTML 5之間的一些關系或者結論吧。

我們所熟知和了解的HTML 4.0,它是基於SGML(standard Generalized markup language)規則手冊的。

在SGML規則手冊中,元素的書寫並不區分大小寫,你可以有選擇的閉合標簽,標簽屬性的書寫也可以不用引號標記。

XHTML 1.0 和1.1是基於XML的,在xml規則手冊中,所有的標簽和屬性必須用小寫,標簽必須閉合,而且所有的屬性必須用引號括起來。

HTML5定義的標記語言不是基於上面任何一種規則手冊,但是html5可以被寫成要麼是html形式,要麼是xhtml形式。

如果你用html形式書寫標簽的話,你就可以不用區分大小寫,而且標簽可以不用閉合,屬性不用引號,當中可以穿插一些xml的標簽。比如:<img /><br />等。

但是如果你用xhtml書寫標簽的話就必須嚴格遵照規格手冊。

以後xml畢竟是個發展方向,所以我推薦大家使用xhtml5.

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

正則表達式

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

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

這寫表單屬性已經在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



html5允許在文檔對象中嵌入SVG (Scalable Vector Graphics)。
根據這裡 我們可以知道svG嵌入已經在Firefox, Safari, 和 Opera 中支持了。
如果你用的是firefox3.5可以點擊 這裡SVG 文件

這是一個復雜的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動態更改。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();
}
}

更多關於canval可以看這裡Canvas tutorial


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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved