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