如今就使用HTML5的十大緣由

時間 2019-11-07

標籤如今使用 html5 html 十大緣由欄目 HTML5 简体版

原文原文鏈接

你難道尚未考慮使用HTML5？固然我猜測你可能有本身的緣由；它如今尚未被普遍的支持，在IE中很差使，或者你就是喜歡寫比較嚴格的XHTML代碼。 HTML5是Web開發世界的一次重大的改變，事實上無論你是否喜歡，它都是表明着將來趨勢。其實HTML5並不難理解和使用。咱們這裏能列出許多緣由爲何如今要開始使用HTML5。html

目前有不少的文章介紹使用HTML5而且介紹了使用它的優點和好處，沒錯，咱們這篇文章也相似。隨着更多這樣的文章，以及Apple的支持，Adobe圍繞HTML5的產品開發，以及移動flash的死亡，如此多網站的支持，我想對那些仍舊沒有或者不想接受它的人說一些話。我認爲主要得緣由是，它看起來像一個神祕的東西。不少感受它像噴氣揹包或者飛行汽車。一個未經驗證的非凡想法可是並不實際。可是事實上如今已近很是的實際了。html5

爲了解密HTML5而且幫助頑固的開發設計人員，我這裏寫了列出了使用HTML5的幾大緣由，但願對你們有幫助！java

第十大緣由：易用性

兩個緣由使得使用HTML5建立網站更加簡單：語義上及其ARIA。新的HTML標籤像<header>，<footer>，<nav>，<section>， <aside>等等，使得閱讀者更加容易去訪問內容。在之前，即便你定義了class或者ID你的閱讀者也沒有辦法去了解給出的一個div到底是什麼。使用新的語義學的定義標籤，你能夠更好的瞭解HTML文檔，而且建立一個更好的使用體驗。git

ARIA是一個W3C的標準主要用來對HTML文章中的元素指定「角色「，經過角色屬性來建立重要的頁面地形, 例如header，footer，navigation或者aritcle頗有必要。這一點曾經被忽略掉了而且沒有被普遍使用，由於事實上並不驗證。然而，HTML5將會驗證這樣屬性。同時，HTML5將會內建這些角色而且沒法不覆蓋。更多的HTML5和ARIA討論，請你們查看這裏。github

第九大緣由：視頻和音頻支持

忘了flash和其它第三方應用吧，讓你的視頻和音頻經過HTML5標籤<video>和<audio>來訪問資源。正確播放媒體一直都是一個很是可怕的事情，你須要使用<embed>和<object>標籤，而且爲了它們能正確播放必須賦予一大堆的參數。你的媒體標籤將會很是複雜，大堆得使人迷惑的代碼。並且HTML5視頻和音頻標籤基本將他們視爲圖片：<video src=""/>。web

可是其它參數例如寬度和高度或者自動播放呢？沒必要擔憂，只須要像其它HTML標籤同樣定義：數據庫

<video src="url" width="640px" height="380px" autoplay/>。

實際上這個過長很是簡答，然而咱們的老瀏覽器可能並不喜歡咱們的HTML5，你須要添加更多代碼來讓他們正確工做。canvas

可是這個代碼仍是比<embed>和<object>來的簡答的多。windows

<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>

這裏有些資源值得你查看一下：

使用最簡單的方式：HTML5的視頻

第八大緣由：Doctype

沒錯，就是doctype，沒有更多內容了。是否是很是簡答？不須要拷貝粘貼一堆沒法理解的代碼，也沒有多餘的head標籤。最大的好消息在於，除了簡單，它能在每個瀏覽器中正常工做即便是名聲狼藉的IE6。

第七大緣由：更清晰的代碼

若是你對於簡答，優雅，容易樂隊的代碼有所偏好的話，HTML5絕對是一個爲你量身定作的東西。 HTML5容許你寫出簡單清晰富於描述的代碼。符合語義學的代碼容許你分開樣式和內容。

看看這個典型的簡單擁有導航的heaer代碼：

<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你能夠經過使用語義學的HTML header標籤描述內容來最後解決你的div及其class定義問題。之前你須要大量的使用div來定義每個頁面內容區域，可是使用新的<section>，<article>，<header>，<footer>，<aside>和<nav>標籤，須要你讓你的代碼更加清晰易於閱讀。

HTML5和將來的網絡

第六大緣由：更聰明的存儲

HTML5中最酷的特性就是本地存儲。有一點像比較老的技術cookie和客戶端數據庫的融合。它比cooke更好用由於支持多個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（Chrome，Firefox，Safari，IE9和Opera），而且建立了HTML5 doctype這樣全部的瀏覽器，即便很是老很是使人厭惡瀏覽器像IE6均可以使用。可是由於老的瀏覽器可以識別doctype並不意味它能夠處理HTML5標籤和功能。幸運的是，HTML5已經使得開發更加簡單了，更多支持更多瀏覽器，這樣老的IE瀏覽器能夠經過添加javascript代碼來使用新的元素：

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

第二大緣由：移動，移動仍是移動

你能夠稱之爲「直覺」，可是我認爲移動技術將會變得更加的流行。我知道，這裏有些很是瘋狂的猜想，有些可能你也想到了-Mobile是一個時尚！移動設備將佔領世界。更多的接受移動設備將會增加的很是迅速。這意味着更多的用戶會選擇使用移動設備訪問網站或者web應用。 HTML5是最移動化的開發工具。隨着Adobe宣佈放棄移動flash開發，你將會考慮使用HTML5來開發webp應用。

當手機瀏覽器徹底支持HTML5那麼開發移動項目將會和設計更小的觸摸顯示同樣簡單。這裏有不少的meta標籤容許你優化移動：

viewport:容許你定義viewport寬度和縮放設置全屏瀏覽器：ISO指定的數值容許Apple設備全屏模式顯示 Home screen icons：就像桌面收藏，這些圖標能夠用來添加收藏到IOS和Android移動設備的首頁

第一大緣由：它是將來，開始用吧！

最大的緣由今天你就開始使用HTML5是由於它是將來，不要掉隊了！ HTML5不會往每一個方向發展，可是更多的元素已經被不少公司採用，而且開始着手開發。 HTML5其實更像HTML，它不是一個新的技術須要你從新學習！若是你開發XHTMLstrict的話你如今就已經在開發HTML5了。爲何不更完整的享受HTML5的功能呢？

你實際上沒有任何藉口不接受HTML5。事實上我惟一一個緣由使用HTML5是由於它書寫代碼簡單清晰。其它的特性其實我也沒有真正使用。你能夠考慮如今開始使用HTML5書寫代碼，它能幫助你改變書寫代碼的方式及其設計方式。開始用HTML5代碼編寫web應用吧，說不定下一個移動應用或者遊戲應用就是用HTML5開發的！

分享一些不錯的HTML5資源：

http://keleyi.com/menu/html5/

http://www.cnblogs.com/sosoft/tag/html5/