使用 html5 的十大原因
你難道還沒有考慮使用 html5? 當然我猜想你可能有自己的原因:它現在還沒有被廣泛的支持,在 ie 中不好使,或者你就是喜歡寫比較嚴格的 xhtml 代碼。html5 是 web 開發世界的一次重大的改變,事實上不管你是否喜歡,它都是代表著未來趨勢。其實 html5 并不難理解和使用。我們這里能列出許多原因為什么現在要開始使用 html5。
目前有很多的文章介紹使用 html5 并且介紹了使用它的優勢和好處,沒錯,這篇文章也類似。隨著更多這樣的文章,以及 apple 的支持,adobe 圍繞 html5 的產品開發,以及移動 flash 的死亡,如此多網站的支持,我想對那些仍舊沒有或者不想接受它的人說一些話。我認為主要得原因是,它看起來像一個神秘的東西。很多感覺它像噴氣背包或者飛行汽車。一個未經驗證的非凡想法但是并不實際。但是事實上現在已近非常的實際了。
為了解密 html5 并且幫助頑固的開發設計人員,我這里寫了列出了使用 html5 的幾大原因,希望對大家有幫助!
第十大原因:易用性
兩個原因使得使用 html5 創建網站更加簡單:語義性和 aria。新的 html 標簽像header,footer,nav,section,aside等等,使得閱讀者更加容易去訪問內容。在以前即使你定義了class或者id你的閱讀者也沒有辦法去了解給出的div究竟是什么。使用新的語義學的定義標簽,你可以更好的了解 html 文檔,并且創建一個更好的使用體驗。
aria 是一個 w3c 的標準主要用來對 html 文章中的元素指定“角色”,通過角色屬性來創建重要的頁面地形例如header,footer,navigation或者aritcle很有必要。這一點曾經被忽略掉了并且沒有被廣泛使用,因為事實上并不驗證。然而 html5 將會驗證這樣屬性。同時,html5 將會內建這些角色并且無法不覆蓋。更多的 html5 和 aria 討論,請大家查看這里。
第九大原因:視頻和音頻支持
忘了 flash 和其它第三方應用吧,讓你的視頻和音頻通過 html5 標簽video和audio來訪問資源。正確播放媒體一直都是一個非常可怕的事情,你需要使用embed和object標簽,并且為了它們能正確播放必須賦予一大堆的參數。你的媒體標簽將會非常復雜,大堆得令人迷惑的代碼。而 html5 視頻和音頻標簽基本將他們視為圖片:<video src=""/>。但是其它參數例如寬度和高度或者自動播放呢?不必擔心,只需要像其它 html 標簽一樣定義:<video src="url" width="640px" height="380px" autoplay/>。
實際上這個過程非常簡單,然而我們的老瀏覽器可能并不喜歡我們的 html5,你需要添加更多代碼來讓他們正確工作。但是這個代碼還是比embed和object來的簡單的多。
<video poster="myvideo.jpg" controls> <source src="myvideo.m4v" type="video/mp4" /> <source src="myvideo.ogg" type="video/ogg" /> <embed src="/to/my/video/player"></embed> </video>
第八大原因:doctype
<!doctype html>
沒錯,就是doctype,沒有更多內容了。是不是非常簡單?不需要拷貝粘貼一堆無法理解的代碼,也沒有多余的head標簽。最大的好消息在于,除了簡單,它能在每一個瀏覽器中正常工作即使是名聲狼藉的 ie6。
第七大原因:更清晰的代碼
如果你對于簡單,優雅,容易閱讀的代碼有所偏好的話,html5 絕對是一個為你量身定做的東西。html5 允許你寫出簡單清晰富于描述的代碼。符合語義學的代碼允許你分開樣式和內容。看看這個典型的簡單擁有導航的 header 代碼:
<div id="header"> <h1>Header Text</h1> <div id="nav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div>
是不是很簡單?但是使用 html5 后會使得代碼更加簡單并且富有含義:
<header> <h1>Header Text</h1> <nav> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </header>
使用 html5 你可以通過使用語義行的header標簽描述內容來最后解決你的div及class定義問題。以前你需要大量的使用div來定義每一個頁面內容區域,但是使用新的section,article,header,footer,aside和nav標簽,需要你讓你的代碼更加清晰易于閱讀。
第六大原因:更聰明的存儲
html5 中最酷的特性就是本地存儲。有一點像比較老的技術 cookie 和客戶端數據庫的融合。它比 cookie 更好用因為支持多個 windows 存儲,它擁有更好的安全和性能,即使瀏覽器關閉后也可以保存。
因為它是個客戶端的數據庫,你不用擔心用戶刪除任何 cookie,并且所有主流瀏覽器都支持。
本地存儲對于很多情況來說都不錯,它是 html5 工具中一個不需要第三方插件實現的。能夠保存數據到用戶的瀏覽器中意味你可以簡單的創建一些應用特性例如:保存用戶信息,緩存數據,加載用戶上一次的應用狀態。
更多關于本地存儲 請點此了解 。
第五大原因:更好的互動
我們都喜歡更好的互動,我們都喜歡對于用戶有反饋的動態網站,用戶可以享受互動的過程。輸入canvas,html5 的畫圖標簽允許你做更多的互動和動畫,就像我們使用 flash 達到的效果。
除了canvas,html5 同樣也擁有很多 api 允許你創建更加好的用戶體驗并且更加動態的 web 應用程序。這里有一個列表:
- Drag and Drop (DnD)
- Offline storage database
- Browser history management
- document editing
- Timed media playback
第四大原因:游戲開發
沒錯, 你可以使用 html5 的canvas開發游戲。html5 提供了一個非常偉大的,移動友好的方式去開發有趣互動的游戲。如果你開發 flash 游戲,你就會喜歡上 html5 的游戲開發。
Script-tutorials 目前提供了 4 個部分的 html5 游戲開發教程,這里看看他們開發的有趣游戲:
- HTML5 Gaming Development Lesson One
- HTML5 Gaming Development Lesson Two
- HTML5 Gaming Development Lesson Three
- HTML5 Gaming Development Lesson Four
第三大原因: 遺留及其跨瀏覽器支持
你的現代流行瀏覽器都支持 html5(chrome,firefox,safari,ie9 和 opera),并且創建了 html5 doctype 這樣所有的瀏覽器,即使非常老非常令人厭惡瀏覽器像 ie6 都可以使用。但是因為老的瀏覽器能夠識別 doctype 并不意味它可以處理 html5 標簽和功能。幸運的是,html5 已經使得開發更加簡單了,支持更多瀏覽器,這樣老的 ie 瀏覽器可以通過添加 js 代碼來使用新的元素:
<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
具體內容 點此了解詳情 。
第二大原因: 移動,移動還是移動
你可以稱之為“直覺”,但是我認為移動技術將會變得更加的流行。我知道,這里有些非常瘋狂的猜測,有些可能你也想到了 – mobile 是一個時尚!移動設備將占領世界。更多的接受移動設備將會增長的非常迅速,這意味著更多的用戶會選擇使用移動設備訪問網站或者 web 應用。html5 是最移動化的開發工具。隨著 adobe 宣布放棄移動 flash 開發,你將會考慮使用 html5 來開發 webapp 應用。
當手機瀏覽器完全支持 html5 那么開發移動項目將會和設計更小的觸摸顯示一樣簡單。這里有很多的meta標簽允許你優化移動:
- viewport:允許你定義viewport寬度和縮放設置;
- 全屏瀏覽器:ios 指定的數值允許 apple 設備全屏模式顯示;
- Home screen icons:就像桌面收藏,這些圖標可以用來添加收藏到 ios 和 android 移動設備的首頁。
第一大原因: 它是未來,開始用吧!
最大的原因今天你就開始使用 html5 是因為它是未來,不要掉隊了!html5 不會往每個方向發展,但是更多的元素已經被很多公司采用,并且開始著手開發。html5 其實更像 html,它不是一個新的技術需要你重新學習!如果你開發 xhtml strict 的話你現在就已經在開發 html5 了。為什么不更完整的享受 html5 的功能呢?
你實際上沒有任何借口不接受 html5。事實上我唯一一個原因使用 html5 是因為它書寫代碼簡單清晰。其它的特性其實我也沒有真正使用。你可以考慮現在開始使用 html5 書寫代碼,它能幫助你改變書寫代碼的方式及其設計方式。開始用 html5 代碼編寫 web 應用吧,說不定下一個移動應用或者游戲應用就是用 html5 開發的!