使用HTML5的優(yōu)勢(shì)

　　1.簡(jiǎn)單

    HTML5使得創(chuàng)建網(wǎng)站更加簡(jiǎn)單。新的HTML標(biāo)簽，如〈header〉、<footer>、<nav>、 <section>、<aside>等，使得閱讀者能更加容易地訪(fǎng)問(wèn)內(nèi)容。以前，即使定義了class或id,閱讀者也沒(méi)有辦法去了解給出的div究竟是什么。使用新的語(yǔ)義學(xué)定義的標(biāo)簽，可以更好地了解HTML文檔， 并且創(chuàng)建更好的使用體驗(yàn)。

　　2.支持視頻和音頻

    以前，想要在網(wǎng)頁(yè)上實(shí)現(xiàn)視頻和音頻的播放，都需要借助Flash等第三方插件，而在HTML5中，可以直接使用標(biāo)簽<video>和<audio>來(lái)訪(fǎng)問(wèn)資源。HTML5的視頻和音頻標(biāo)簽基本將它們視為圖片： <video src="/">。但是其他參數(shù)（如寬度和高度或者自動(dòng)播放）如何定義呢？不必?fù)?dān)心，只需要像其他HTML標(biāo)簽一樣定義，代碼如下：

    〈video src=',url" width-”640px" height-'138OpxM autoplay/>

    HTML5把以前非常繁瑣的過(guò)程變得非常簡(jiǎn)單，然而一些過(guò)時(shí)的瀏覽器可能對(duì)HTML5的支持并不 是很友好，需要添加更多的代碼來(lái)讓它們正確工作，但是這個(gè)代碼還是比<embed>和<object>簡(jiǎn)單得多。

　　3.文檔聲明

    沒(méi)錯(cuò)，就是doctype,沒(méi)有更多內(nèi)容了。是不是非常簡(jiǎn)單？不需要復(fù)制粘貼一堆無(wú)法理解的代碼，也沒(méi)有多余的head標(biāo)簽。最大的好消息在于，它能在每一個(gè)瀏覽器中正常工作，即使是在風(fēng)評(píng)不佳的IE6中也沒(méi)有問(wèn)題。

　　4.結(jié)構(gòu)清晰、語(yǔ)義明確的代碼

    如果偏好簡(jiǎn)單、優(yōu)雅、容易閱讀的代碼，HTML5絕對(duì)是為你量身定做的。HTML5允許寫(xiě)出簡(jiǎn)單清晰且富于描述的代碼，符合語(yǔ)義學(xué)的代碼允許你分開(kāi)樣式和內(nèi)容，如下面這個(gè)典型簡(jiǎn)單的擁有導(dǎo)航的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>

</u1>

</div>

</div>

是不是很簡(jiǎn)單？但是使用HTML5后會(huì)使得代碼更加簡(jiǎn)單，并且含義更清晰，代碼如下：

<header>

<hi>Header Text</hl>

<nav>

<ul>

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

</ul>

</nav>

</header〉

    使用HTML5時(shí)，可以通過(guò)基于語(yǔ)義學(xué)的HTML header標(biāo)簽描述內(nèi)容來(lái)最后解決div及其class定 義的問(wèn)題。以前需要大量使用div來(lái)定義每一個(gè)頁(yè)面內(nèi)容區(qū)域，但是使用新的<section>、〈article〉、 〈header〉、〈footer〉、〈aside〉和<nav>標(biāo)簽會(huì)讓你的代碼更清晰易讀。

　　5.強(qiáng)大的本地存儲(chǔ)

    HTML5中引入了新特性—本地存儲(chǔ)，這是一個(gè)非?？犰诺男绿匦浴Ｓ悬c(diǎn)兒像比較老的技術(shù)cookie 和客戶(hù)端數(shù)據(jù)庫(kù)的融合。但是它比cookie更好用，存儲(chǔ)量也更龐大。因?yàn)橹С侄鄠€(gè)Windows存儲(chǔ)，它擁有更好的安全和性能，而且瀏覽器關(guān)閉后數(shù)據(jù)也可以保存。本地存儲(chǔ)為用戶(hù)提供了極大的便利，它不需要第三方插件就可以實(shí)現(xiàn)。能夠保存數(shù)據(jù)到用戶(hù)的瀏覽器中意味著可以簡(jiǎn)單地創(chuàng)建一些應(yīng)用特性，如保存用戶(hù)信息、緩存數(shù)據(jù)、加載用戶(hù)上一次的應(yīng)用狀態(tài)。

　　6.交互升級(jí)

    我們都喜歡更好的頁(yè)面交互，而人們偏好對(duì)用戶(hù)有反饋的動(dòng)態(tài)網(wǎng)站，因?yàn)橛脩?hù)可以享受互動(dòng)的過(guò)程。HTML5中的<canvas>標(biāo)簽允許做更多的互動(dòng)和動(dòng)畫(huà)，就像使用Flash實(shí)現(xiàn)的效果。經(jīng)典游戲水果忍者就可以通過(guò)canvas畫(huà)圖功能來(lái)實(shí)現(xiàn)。

　　7.HTML5游戲

    前幾年，基于HTML5開(kāi)發(fā)的游戲非?；鸨＝鼉赡?，雖然基于HTML5的游戲已經(jīng)受到了不小的沖擊，但是如果能找到合適的盈利模式，HTML5依然是在手機(jī)端開(kāi)發(fā)游戲的首選技術(shù)。如果想開(kāi)發(fā) Flash游戲，就會(huì)喜歡上使用HTML5開(kāi)發(fā)游戲。

　　8.移動(dòng)互聯(lián)網(wǎng)

    細(xì)心觀察一下周?chē)娜耍卸嗌偃爽F(xiàn)在可以做到一天不開(kāi)電腦的？好像還不少。但是能在周?chē)业揭惶觳幻謾C(jī)的朋友嗎？如今移動(dòng)設(shè)備已經(jīng)占領(lǐng)世界。這意味著，傳統(tǒng)的PC機(jī)器將會(huì)面臨巨大的挑戰(zhàn)，今后的生活只需要一部智能手機(jī)即可被安排得妥妥當(dāng)當(dāng)。想想看，現(xiàn)在多少年輕人不會(huì)使用手機(jī)支付？還有多少人不會(huì)使用手機(jī)端訂購(gòu)?fù)赓u(mài)？ HTML5是最移動(dòng)化的開(kāi)發(fā)工具。隨著Adobe宣布放棄 移動(dòng)Flash開(kāi)發(fā)，用戶(hù)將會(huì)考慮使用HTML5來(lái)開(kāi)發(fā)webp應(yīng)用。如果手機(jī)瀏覽器完全支持HTML5, 那么開(kāi)發(fā)移動(dòng)項(xiàng)目將會(huì)和設(shè)計(jì)更小的觸摸顯示一樣簡(jiǎn)單。這里有很多meta標(biāo)簽允許用戶(hù)優(yōu)化移動(dòng)。

viewport：允許用戶(hù)定義viewport寬度和縮放設(shè)置。全屏瀏覽器：ISO指定的數(shù)值允許Apple設(shè)備全 屏模式顯示。Home screen icons：就像桌面收藏，這些圖標(biāo)可以用來(lái)添加收藏到IOS和Android移 動(dòng)設(shè)備的首頁(yè)。

　　9.HTML5既是現(xiàn)在，也是未來(lái)

    HTML5是當(dāng)今世界上最好的最火熱的前端開(kāi)發(fā)技術(shù)，用戶(hù)有必要掌握！HTML5可能不會(huì)兼顧每個(gè)方向，但是更多的元素已經(jīng)被很多公司采用，并且已經(jīng)開(kāi)發(fā)得很成熟。HTML5其實(shí)更像HTML,它 不是一個(gè)新的技術(shù)，不需要用戶(hù)重新學(xué)習(xí)！如果用戶(hù)開(kāi)發(fā)XHTML strict,其實(shí)就已經(jīng)在開(kāi)發(fā)HTML5 了，所以為什么不更完整地享受HTML5的功能呢？

使用HTML5是因?yàn)樗鼤?shū)寫(xiě)的代碼簡(jiǎn)單清晰，同時(shí)也能幫助用戶(hù)改變書(shū)寫(xiě)代碼的方式及其設(shè)計(jì)思路。