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

2021-08-31 12:29:42 字數 1829 閱讀 6367

我們來一起看看新的html5有什麼新的特性和使用技巧吧。如果你對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);

})();

[color=blue][b]

**

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

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

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

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

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

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