應廣大微粉的請求，今天給大家推出一篇關於h5的技巧文章，希望對於正在從事此方面工作的上班族，或者正在學習的學生都能帶來一定的幫助！

1. 新的Doctype

儘管使用，即使瀏覽器不懂這句話也會按照標準模式去渲染

2. Figure元素

用和來語義化地表示帶標題的圖片

This is an image of something interesting.

3. 重新定義的

已經被重新定義了，現在被用來表示小的排版，如網站底部的版權聲明

4. 去掉link和script標籤裡面的type屬性

5. 加/不加 括弧

HTML5沒有嚴格的要求屬性必須加引號，閉合不閉合，但是建議加上引號和閉合標籤

6. 讓你的內容可編輯，只需要加一個contenteditable屬性

7. Email Inputs

如果我們給Input的type設置為email，瀏覽器就會驗證這個輸入是否是email類型，當然不能只依賴前端的校驗，後端也得有相應的校驗

8. Placeholders

這個input屬性的意義就是不必通過javascript來做placeholder的效果了

9. Local Storage

使用Local Storage可以永久存儲大的數據片段在客戶端（除非主動刪除），目前大部分瀏覽器已經支持，在使用之前可以檢測一下window.localStorage是否存在

10. 語義化的header和footer

11. 更多的HTML5表單特性

12. IE和HTML5

默認的，HTML5新元素被以inline的方式渲染，不過可以通過下面這種方式讓

其以block方式渲染

header, footer, article, section, nav, menu, hgroup {

display: block;

}

不幸的是IE會忽略這些樣式，可以像下面這樣fix:

document.createElement(」article」);

document.createElement(」footer」);

document.createElement(」header」);

document.createElement(」hgroup」);

document.createElement(」nav」);

document.createElement(」menu」);

13. hgroup

一般在header裡面用來將一組標題組合在一起，如

Recall Fan Page

Only for people who want the memory of a lifetime.

14. Required屬性

required屬性定義了一個input是否是必須的，你可以像下面這樣聲明

或者

15. Autofocus屬性

正如它的詞義，就是聚焦到輸入框裡面

16. Audio支持

HTML5提供了標籤，你不需要再按照第三方插件來渲染音頻，大多數現代瀏覽器提供了對於HTML5 Audio的支持，不過目前仍舊需要提供一些兼容處理，如

Download this file.

17. Video支持

和Audio很像，標籤提供了對於video的支持，由於HTML5文檔並沒有給video指定一個特定的編碼，所以瀏 覽器去決定要支持哪些編碼，導致了很多不一致。Safari和IE支持H.264編碼的格式，Firefox和Opera支持Theora和Vorbis 編碼的格式，當使用HTML5 video的時候，你必須都提供：

Your browser is old. Download this video instead.

18. 預載入視頻

preload屬性就像它的字面意思那麼簡單，你需要決定是否需要在頁面載入的時候去預載入視頻

19. 顯示視頻控制

20. 正則表達式

由於pattern屬性，我們可以在你的markup裡面直接使用正則表達式了

Create a Username:

10″ pattern=」[A-Za-z]」 autofocus required>

Go

21. 檢測屬性支持

除了Modernizr之外我們還可以通過javascript簡單地檢測一些屬性是否支持，如：

22. Mark元素

把元素看做是高亮的作用，當我選擇一段文字的時候，javascript對於HTML的markup效果應該是這樣的：

Search Results

They were interrupted, just after Quato said, 」Open your Mind」.

23. 什麼時候用

HTML5已經引入了這麼多元素，那麼div我們還要用嗎？div你可以在沒有更好的元素的時候去用。

24. 想立即使用HTML5?

不要等2022了，現在就可以使用了，just do it.

25. 哪些不是HTML5

1)SVG

2)CSS3

3)Geolocation

4)Client Storage

5)Web Sockets

26. Data屬性

Bla Bla

CSS中使用：

Don』t Touch Me

27. Output元素

元素用來顯示計算結果，也有一個和label一樣的for屬性

28. 用Range Input來創建滑塊

HTML5引用的range類型可以創建滑塊，它接受min, max, step和value屬性

可以使用css的:before和:after來顯示min和max的值

input[type=range]:before { content: attr(min); padding-right: 5px;

}

input[type=range]:after { content: attr(max); padding-left: 5px;}

END

@野馬網路俱樂部丨微信號:ymwl-club

一個只願分享的俱樂部-渴望得到您的鼓勵與支持！

電腦銷售?監控工程?辦公耗材 ?網站開發

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！