html5學習開發指南

html5學習開發指南

本文發表於CSDN《程序員》雜誌2016年8月期，未經容許不得轉載！

概述：

隨着移動互聯網的興起，前端開發工程師的崗位也隨着興起。前端工程師不只在用戶和產品之間扮演着愈來愈重要的角色，並且前端的職能也可以（開始）朝着服務端延伸。因此不只小公司缺人在招前端，大公司一樣面臨着缺乏優秀前端工程師的尷尬處境。

當咱們在談論或者招聘前端工程師的時候，都會提到熟練或者是熟悉 h5（html5） 開發。那麼所謂的 h5 開發是什麼呢？這篇文章主要就是爲你們介紹 h5 的基本內容和學習指南。

1.html5是新技術麼？

從2006年 html5 標準被提出到2014年10月29號，html5規範制定完成而且發佈，這中間經歷了8年時間。從被提出到最終規範定稿，html5 包含的不少新特性，同步的在被同時期的現代瀏覽器（Chrome,Firefox等）所實現。因此 html5 對於不少開發者來講，已經不能算是一項新技術了。在 html5 發展的過程當中，移動互聯網的興起，html5標準委員會 爲了知足在移動設備上實現複雜多媒體功能，設計了一些新特性來支持移動互聯網的發展。

嚴格意義上來講，咱們如今口中的 h5開發 並不只僅指的是 html5 這一項技術，而是包含了html5 ,css3，javascript。因此在咱們勵志成爲一名優秀的前端工程師的時候，應該多關注這三方面的技術。

2.html5 相對於 html4.x 有那些改變？

1. html5首先經過新的 <!DOCTYPE> 聲明方式，告訴瀏覽器對所要解析的html文檔的文檔類型。來規範瀏覽器的解析行爲。該聲明方式比 html4.x 聲明更加簡潔和靈活；

2. html5新增長的標籤豐富了網頁結構，有利於搜索引擎的抓取；

3. html5使得頁面元素在瀏覽器上的表現更加的豐富，好比繪圖（canvas），媒體播放（audio，video）；

4. html5新增的事件類型，可讓開發者監測用戶更多的行爲，使用戶在操做網頁時，網頁有更加豐富的表現；

5. html5可使開發者的網頁兼容更多的設備（可使咱們的網頁在不一樣的移動端設備上基本表現一致）；

6. html5可讓開發者在客戶端存儲更多的數據；

3.html5新增了哪些知識點和做用

1. 章節語意標籤，好比：<footer> <article> 等，可使咱們建立更友好的頁面結構，便於搜索引擎抓取；

2. 表單元素，屬性，好比：number email autocomplete等，可讓咱們規定表單元素的輸入類型，長度，表單元素的行爲；

3. 多媒體標籤，好比： <video> <audio>。可讓咱們定義多媒體文件的類型和行爲；

4. 2D繪圖，矢量圖應用，<canvas> <svg> 標籤可讓咱們在網頁上繪製複雜的圖形和顯示覆雜的圖形；

5. 拖拽事件，drag drop 事件可讓咱們在網頁上對元素進行拖放操做；

6. 離線數據的存儲，localStorage sessionStorage可讓開發者根據用戶行爲在客戶端緩存數據，提升網站性能和用戶體驗；

7. 獲取當前用於的地理位置，geolocation 可讓咱們不依賴客戶端就能夠獲取用戶位置；

8. Application Cache 可讓咱們對Web應用進行緩存，離線時也能夠訪問，增長用戶體驗；

9. web worker 可讓咱們脫離JavaScript是單線程的這個魔咒，並且web worker獨立於其它的腳本不會影響頁面性能；

10. 被動的獲取服務端數據，EventSource 對象可讓咱們的應用程序不主動發送HTTP 請求的狀況下接收服務端推送的消息，而且作出響應；

4.爲何選擇html5開發咱們的應用

上面介紹了那麼多html5新特性，那麼這些新特性普及能爲開發者帶來哪些便利呢？

對於常用微信的朋友來講，在 發現 一欄裏能夠看到 京東購物 的標籤，當咱們打開後會發現它幾乎跟咱們使用京東客戶端同樣。咱們會想，難道微信在本身的客戶端內，單獨爲京東開發了展現商品的模塊呢？假如說，微博的客戶端也要爲京東添加這樣的一個入口，是否是微博的工程師也須要開發這樣的模塊呢？

答案是否認的，首先兩家不一樣類型且獨立的公司，先不說技術儲備問題，這麼複雜的頁面開發起來在協調溝通和開發成本都會很大。若是某天XX活動京東要對網站首頁改版，爲了保持一致性微信的工程師也得同步的開發京東的新版頁面。這明顯違背軟件設計 解耦 的思想。那麼什麼技術能夠改變這種現狀呢？

由於html5新增的特性，已經可讓開發者開發出接近原生 native 體驗的頁面，也有知足多終端適配的解決方案。京東只須要使用 html5 來開發本身的頁面，爲須要提供入口的客戶端提供頁面的URL地址便可。不只能夠極大的減小開發成本，人力成本和溝通成本，並且也不會由於客戶端版本更新迭代慢而影響產品的生效效率。事實上京東是這麼作的。國內不少公司都是這麼作的。

5.html5學習指南

5.1我是有經驗的開發者

對於已經有html和css開發經驗的人來講，我認爲學習html5應該是很快的。咱們應該根據本身的工做須要來選擇學習哪些內容。好比：SVG 和 Canvas 已經屬於Web圖形學方面的內容，內容不少也比較複雜，若是平時工做中接觸和使用的很少，僅僅做爲了解就能夠了。沒必要要投入太多的精力和時間。

除了以上兩個知識點以外，咱們就能夠把html5新增的內容分紅如下幾點進行學習，各個擊破：

• 新的標籤,屬性和表單元素

• 新的事件類型

• 多媒體播放

• web存儲和應用緩存

• 用戶地理位置信息獲取

• 多終端設備的適配

5.2我是剛入門的選手

對於剛入門的選手，就不要刻意的區分html5和html了。如今隨便買一本html書（最近3年出版的書ಥ_ಥ），其中都會包含html5的內容。你的關注點應該是把本身對html包含的內容總體的把握起來。而且多寫一些demo來練習,知道這些標籤在網頁上的表現和具備的特性。

6.開發使用建議

前端開發就是跟瀏覽器打交道。因此咱們在工做中應該關注本身的產品必須兼容瀏覽器的版本。當咱們在使用html5一些新特性的時候，能夠在 caniuse 上查詢是否知足本身的兼容標準，對這些新特性有選擇的使用。

說了這麼多html5開發的優勢，也應該瞭解一些html5頁面的缺點：

• 對pc端一些舊版本瀏覽器兼容性很差；

• 頁面動畫性能沒有原生的 native 高，複雜動畫或者是低配置的終端會特別明顯；

• 沒辦法直接調通系統的API;

注：移動端瀏覽器幾乎兼容全部的html5新特性。

---