HTML5用于實(shí)現(xiàn)不涉及到數(shù)據(jù)層面的我們能夠看到的所有網(wǎng)站（也就是負(fù)責(zé)將一張設(shè)計好的網(wǎng)頁圖片[設(shè)計師的工作]，用代碼實(shí)現(xiàn)出來，在一個地方放置個塊，給一個塊設(shè)置顏色，調(diào)整字體大小，讓圖片動起來等）。其基本組成為：HTML5 = HTML + CSS + JavaScript
HTML指的是結(jié)構(gòu)
CSS指樣式
JS即JavaScript，指的是行為
關(guān)于結(jié)構(gòu)、樣式、行為的理解：
結(jié)構(gòu) - 在整個網(wǎng)頁中有標(biāo)題，有列表，有圖片等。
樣式 - 標(biāo)題文字的字體大小、顏色、字體；圖片的大?。荒硞€塊的背景色或背景圖等。
行為 - 在網(wǎng)頁上四處飄動的廣告；圖片滾動；瀏覽網(wǎng)上商城時鼠標(biāo)移動到商品時，放大商品的效果等。
HTML5與HTML的區(qū)別如下：
一、基本概念：
html:超文本標(biāo)記語言 (Hyper Text Markup Language)
xhtml:可擴(kuò)展超文本標(biāo)記語言，是一種置標(biāo)語言，表現(xiàn)方式與超文本標(biāo)記語言（HTML）類似，不過語法上更加嚴(yán)格。
h5:最先由WHATWG(Web超文本應(yīng)用技術(shù)工作組)命名的一種超文本標(biāo)記語言，隨后和W3C的xhtml2.0(標(biāo)準(zhǔn))相結(jié)合，產(chǎn)生現(xiàn)在最新一代的超文本標(biāo)記語言。可以簡單點(diǎn)理解成：h5≈ html+CSS 3+js+API。
二、推出原因：
1.WEB瀏覽器之間的兼容性很低
在某個WEB瀏覽器上可以正常運(yùn)行的HTML5、CSS、JavaScript等WEB程序，在另一個WEB瀏覽器上就不一定能正常運(yùn)行了。導(dǎo)致這種問題的主要原因就是規(guī)范不統(tǒng)一，沒有被標(biāo)準(zhǔn)化。在HTML5中，這個問題被解決了。HTML5的使命是詳細(xì)分析各WEB瀏覽器所具有的功能，然后以此為基準(zhǔn)，要求這些瀏覽器內(nèi)部的功能都要符合一個通用標(biāo)準(zhǔn)。
2.文檔結(jié)構(gòu)不夠明確
在HTML5之前的HTML版本中，文檔結(jié)構(gòu)不夠明確、清晰。例如為了要表示標(biāo)題、正文、之前一般都會使用DIV元素，但是嚴(yán)格來說，DIV元素不是一個能把文檔結(jié)構(gòu)表示的很清楚的元素，使用過多會導(dǎo)致閱讀時不仔細(xì)研究或者很難去看出文檔結(jié)構(gòu)，而且對于搜索引擎或者屏幕閱讀等等應(yīng)用程序來說，過多的使用DIV元素，那這些程序從哪到哪算是正文都很難確定。在HTML5中，為了解決這個問題，增加很多和結(jié)構(gòu)相關(guān)的元素。
3.WEB應(yīng)用程序的功能受到限制
HTML5與WEB應(yīng)用程序的關(guān)系十分薄弱，WEB應(yīng)用程序的特征是先從網(wǎng)絡(luò)下載，然后忠實(shí)的運(yùn)行。因此，他會對威脅到用戶安全的功能進(jìn)行限制，目前安全性的保障這方面已經(jīng)做到了。但是對于WEB應(yīng)用程序來說，一直以來HTML5真正所做出的貢獻(xiàn)是很少的。例如 就連想同時上傳多個文件都不允許。為了彌補(bǔ)這方便的不足，HTML5已經(jīng)開始提供各種各樣的WEB應(yīng)用上的新API。各瀏覽器也在快速封裝這些API。 HTML5已經(jīng)豐富了WEB應(yīng)用的實(shí)現(xiàn)變成了可能。
三、特性差異：
1、語義特性
HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。
2、本地存儲特性
基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。
3、設(shè)備兼容特性
從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗(yàn)功能的優(yōu)勢；HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。
4、連接特性
HTML5更有效的連接工作效率，使得基于頁面的實(shí)時聊天，更快速的網(wǎng)頁游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)；HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)推送到客戶端的功能。
5、網(wǎng)頁多媒體特性
HTML5支持網(wǎng)頁端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
6、三維、圖形及特效特性
HTML5基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。
7、性能與集成特性
沒有用戶會永遠(yuǎn)等待你的Loading。HTML5會通過XMLHttpRequest2等技術(shù)，解決以前的跨域等問題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
8、CSS3特性
在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式也提供了更高的靈活性和控制性。
四、HTML5優(yōu)勢：
1、提高可用性和改進(jìn)用戶的友好體驗(yàn)。
2、有幾個新的標(biāo)簽，這將有助開發(fā)人員定義重要的內(nèi)容。
3、可以給站點(diǎn)帶來更多的多媒體元素(視頻和音頻)。
4、可以很好的替代FLASH和Silverlight。
5、當(dāng)涉及到網(wǎng)站的抓取和索引的時候，對于SEO很友好。
6、將被大量應(yīng)用于移動應(yīng)用程序和游戲。
7、不同于html沒有結(jié)構(gòu)語義化的標(biāo)簽（通俗來講就是不方便閱讀，沒有告訴你哪里是頭，哪里是尾巴），html5添加了許多具有語義化的標(biāo)簽，使代碼結(jié)構(gòu)清晰，提高了代碼的可讀性。
五、認(rèn)知誤區(qū)：
1.容易弄混的概念
HTML5移動端的功能和應(yīng)用程序
對于蘋果手機(jī)中的應(yīng)用程序，屬于iOS開發(fā)，語言是OC；對于其他安卓系統(tǒng)的手機(jī)，需要使用JAVA語言進(jìn)行開發(fā)。HTML5能夠做的是移動端的網(wǎng)頁以及微信平臺中的移動端網(wǎng)頁。
2.前端后臺的區(qū)別
無論HTML5還是iOS，在整個網(wǎng)頁開發(fā)流程當(dāng)中，前端（HTML5）開發(fā)工程師，主要負(fù)責(zé)的是“前臺頁面制作”，“網(wǎng)站測試”，“修改”三個部分。
3.HTML5 與 網(wǎng)頁設(shè)計與制作 的區(qū)別
原有的網(wǎng)頁設(shè)計與制作，主要針對PC平臺，進(jìn)行網(wǎng)頁網(wǎng)站的設(shè)計與制作，相對會涉及一部分設(shè)計工作，并將美工圖實(shí)現(xiàn)成網(wǎng)頁。通常使用的工具是網(wǎng)頁三劍客——PhotoShop、Flash、Dreamweaver。然而，行業(yè)的發(fā)展使得“網(wǎng)頁設(shè)計與制作”這一職業(yè)逐漸遭到了淘汰，原因主要有四：
4.網(wǎng)頁設(shè)計與網(wǎng)頁制作是兩個完全不同的領(lǐng)域，一個由美感主導(dǎo)，另一個則需要邏輯思維主導(dǎo)。對于開發(fā)人員來說，如果將寶貴的精力分散到兩個不同的行業(yè)中，最后通常兩方面都是半斤八兩，沒有實(shí)質(zhì)的競爭力；
5.網(wǎng)頁設(shè)計與制作，這一職業(yè)中的制作，指的是網(wǎng)頁的結(jié)構(gòu)與樣式（即HTML+CSS），而當(dāng)前網(wǎng)站中JavaScript已經(jīng)占據(jù)了極大的比重，如果還停留在原有的結(jié)構(gòu)和樣式中，發(fā)展空間會變得很??；
6.網(wǎng)頁設(shè)計與制作當(dāng)中的結(jié)構(gòu)實(shí)現(xiàn)，通常采用的是table布局；而WEB前端開發(fā)工程師、HTML5當(dāng)中結(jié)構(gòu)的實(shí)現(xiàn)，采用的是DIV+CSS方式的布局，因此，Dreamweaver工具的使用也就沒有什么必要性了，取而代之的是內(nèi)存占用小，開發(fā)速度快的文本類編輯器。而Flash，在與HTML5的大戰(zhàn)當(dāng)中戰(zhàn)敗，當(dāng)前已經(jīng)退出了移動端以及電視平臺的市場爭奪，在PC平臺也越來越少。轉(zhuǎn)言之，F(xiàn)lash在網(wǎng)頁制作的領(lǐng)域里已經(jīng)江郎才盡~原來的網(wǎng)頁三劍客只剩下一個PS，在前端工作的要求中，需要掌握基本的切圖即可。
附：某個HTML5頁面以及布局
<header><font></font>
<p>這是頭部標(biāo)簽</p><font></font>
<nav><font></font>
<ul><font></font>
<li>1</li><font></font>
<li>2</li><font></font>
<li>3</li><font></font>
<li>4</li><font></font>
<li>5</li><font></font>
</ul><font></font>
</nav><font></font>
</header><font></font>
<div class="content clearfix"><font></font>
<section><font></font>
<p>這里是section內(nèi)容區(qū)域</p><font></font>
<article><font></font>
<h2>百度百科</h2><font></font>
<p>百度百科是百度公司推出的一部內(nèi)容開放、自由的網(wǎng)絡(luò)百科全書平臺，其測試版于2006年4月20日上線，正式版在2008年4月21日發(fā)布，截至2015年12月，百度百科已經(jīng)收錄了超過1300萬的詞條，參與編輯用戶數(shù)達(dá)569萬人，幾乎涵蓋了所有已知的知識領(lǐng)域。</p><font></font>
</article><font></font>
<hr/><font></font>
<article><font></font>
<h2>標(biāo)題二</h2><font></font>
<p>內(nèi)容</p><font></font>
</article><font></font>
</section><font></font>
<aside><font></font>
<p>這里是aside側(cè)邊欄</p><font></font>
</aside><font></font>
</div><font></font>
<footer><font></font>
<p>這里是footer頁面底部</p><font></font>
</footer>
服務(wù)電話： 13153221315
