開發人員必知的28個HTML5新特性及技巧

1、新的doctype

還在用下面這個長的根本沒法記住的doctype嗎？

如果是，那麼趕緊使用新的吧。

事實上，html5根本不需要這個東西，這是用來給瀏覽器相容用的，如果瀏覽器不認識乙個doctype，那麼他會使用標準模式來解析。所以，沒什麼好擔心的，儘管用吧。

2、figure元素

看看下面的這個的說明部分吧：

image of mars.

this is an image of something interesting.

3、重定義了

以前我還用這個標籤來顯示logo下面的小字，這是個不錯的表示標籤，但是現在，這就是不推薦的做法了。這個標籤被重定義了，用來表示用於列印的小字型了。

4、script和link標籤都不再有type屬性了

以前的這種寫法都不是必須的了，可以省去type屬性。

5、要不要引號都無所謂了

start the reactor.

html5不是xhtml，沒有那麼嚴格的要求，加不加引號看你自己了。

6、讓你的內容成為可編輯的

新的瀏覽器的contenteditable屬性非常不錯，可以讓你的元素成為可編輯的，這些可以用在一些todo list之類的應用上，然後呼叫本地儲存。使用這個屬性的元素和他的子元素都會獲得這個特性。

7、email輸入框

我們可以給表單的輸入框賦予email屬性，這樣瀏覽器就能以email的合法格式來檢測輸入框的內容了。我們現在還不能100%的依附這個，因為一些舊的瀏覽器不支援email屬性，他只會把這當成是普通輸入框。要校驗格式還得靠自己。

8、輸入框的預設提示文字

以前，我們要給輸入框寫上提示文字，就得用js來控制，而html5現在支援這個特性了，只要這樣寫就可以了：

當然，現在還不是所有的瀏覽器都支援這個屬性，比如firefox和opera就不行，但是這也不影響什麼。

9、本地儲存

使用本地儲存，我們就可以讓瀏覽器記住我們的輸入，就算是重新整理或者關掉瀏覽器再開啟也無妨。

當然，並不是所有瀏覽器都支援這個特性，支援的有ie8,safari,firefox3.5+，對於那些老版的瀏覽器，應該使用window.localstorage檢驗一下是否支援。

10、語義化的header和footer

以前我們這樣寫：

......

使用了html5之後，就可以這樣寫了：

這裡可以檢視示例。

27、output元素

正如你所想的，output元素就是用來展示一些計算值的。比如你計算當前滑鼠的位置，或者一些數字的和，下面我們就來看看計算兩個數字和的例子：

對這個元素的支援還是有點挫的，上面這段**下，如果瀏覽器不支援output屬性，那麼就會彈出乙個對話方塊告知計算結果。

28、使用range input建立乙個幻燈片

現在只有opera完全支援range input的max，min，step和value屬性，為了快速說明，我們來看乙個例子。

html部分：

css部分：

body

input

input[type=range]:before

input[type=range]:after

output js部分：

(function() , false);

// display chosen value when sliding.

range.addeventlistener("change", function() , false);

})();

開發人員必知的28個HTML5新特性及技巧

1 新的doctype 還在用下面這個長的根本沒法記住的doctype嗎？如果是，那麼趕緊使用新的吧。事實上，html5根本不需要這個東西，這是用來給瀏覽器相容用的，如果瀏覽器不認識乙個doctype，那麼他會使用標準模式來解析。所以，沒什麼好擔心的，儘管用吧。2 figure元素 看看下面的這個的...

開發人員必知的28個HTML5新特性及技巧

我們來一起看看新的html5有什麼新的特性和使用技巧吧。如果你對html5還不是很了解，那麼下面這些內容可以幫你快速高階。1 新的doctype 還在用下面這個長的根本沒法記住的doctype嗎？如果是，那麼趕緊使用新的吧。事實上，html5根本不需要這個東西，這是用來給瀏覽器相容用的，如果瀏覽器不...

Android開發人員必知的開發資源

在動手編寫第乙個 android 應用之前，用心讀一讀 android design 章節。尤其是以下的這些文章 那麼讀完了這些以後就能夠開始程式設計了麼？不，最好連以下的東西也一起讀 非常多 android 核心框架的project師。開發人員布道師以及 android 開發專家都會常常到stac...