HTML5與HTML有什么區(qū)別？

發(fā)布人：admin ，瀏覽次數(shù)：131 ，發(fā)布時間：2019-06-06 16:56

HTML5用于實現(xiàn)不涉及到數(shù)據(jù)層面的我們能夠看到的所有網(wǎng)站（也就是負(fù)責(zé)將一張設(shè)計好的網(wǎng)頁圖片[設(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:可擴展超文本標(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)記語言。可以簡單點理解成：h5≈ html+CSS 3+js+API。

二、推出原因：

1.WEB瀏覽器之間的兼容性很低

在某個WEB瀏覽器上可以正常運行的HTML5、CSS、JavaScript等WEB程序，在另一個WEB瀏覽器上就不一定能正常運行了。導(dǎo)致這種問題的主要原因就是規(guī)范不統(tǒng)一，沒有被標(biāo)準(zhǔn)化。在HTML5中，這個問題被解決了。HTML5的使命是詳細分析各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)致閱讀時不仔細研究或者很難去看出文檔結(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ò)下載，然后忠實的運行。因此，他會對威脅到用戶安全的功能進行限制，目前安全性的保障這方面已經(jīng)做到了。但是對于WEB應(yīng)用程序來說，一直以來HTML5真正所做出的貢獻是很少的。例如就連想同時上傳多個文件都不允許。為了彌補這方便的不足，HTML5已經(jīng)開始提供各種各樣的WEB應(yīng)用上的新API。各瀏覽器也在快速封裝這些API。 HTML5已經(jīng)豐富了WEB應(yīng)用的實現(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ōu)勢；HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

4、連接特性

HTML5更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)；HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(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、性能與集成特性

沒有用戶會永遠等待你的Loading。HTML5會通過XMLHttpRequest2等技術(shù)，解決以前的跨域等問題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

8、CSS3特性

在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式也提供了更高的靈活性和控制性。

四、HTML5優(yōu)勢：

1、提高可用性和改進用戶的友好體驗。

2、有幾個新的標(biāo)簽，這將有助開發(fā)人員定義重要的內(nèi)容。

3、可以給站點帶來更多的多媒體元素(視頻和音頻)。

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)用程序

對于蘋果手機中的應(yīng)用程序，屬于iOS開發(fā)，語言是OC；對于其他安卓系統(tǒng)的手機，需要使用JAVA語言進行開發(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平臺，進行網(wǎng)頁網(wǎng)站的設(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è)中，最后通常兩方面都是半斤八兩，沒有實質(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ā)展空間會變得很?。?/span>

6.網(wǎng)頁設(shè)計與制作當(dāng)中的結(jié)構(gòu)實現(xiàn)，通常采用的是table布局；而WEB前端開發(fā)工程師、HTML5當(dāng)中結(jié)構(gòu)的實現(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頁面以及布局

<p>這是頭部標(biāo)簽</p><font></font>

</ul><font></font>

</nav><font></font>

</header><font></font>

<p>這里是section內(nèi)容區(qū)域</p><font></font>

<p>百度百科是百度公司推出的一部內(nèi)容開放、自由的網(wǎng)絡(luò)百科全書平臺，其測試版于2006年4月20日上線，正式版在2008年4月21日發(fā)布，截至2015年12月，百度百科已經(jīng)收錄了超過1300萬的詞條，參與編輯用戶數(shù)達569萬人，幾乎涵蓋了所有已知的知識領(lǐng)域。</p><font></font>

</article><font></font>

</article><font></font>

</section><font></font>

<p>這里是aside側(cè)邊欄</p><font></font>

</aside><font></font>

</div><font></font>

<p>這里是footer頁面底部</p><font></font>

</footer>