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

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

HTML5用于實(shí)現(xiàn)不涉及到數(shù)據(jù)層面的我們能夠看到的所有網(wǎng)站（也就是負(fù)責(zé)將一張?jiān)O(shè)計(jì)好的網(wǎng)頁(yè)圖片[設(shè)計(jì)師的工作]，用代碼實(shí)現(xiàn)出來(lái)，在一個(gè)地方放置個(gè)塊，給一個(gè)塊設(shè)置顏色，調(diào)整字體大小，讓圖片動(dòng)起來(lái)等）。其基本組成為：HTML5 = HTML + CSS + JavaScript

HTML指的是結(jié)構(gòu)

CSS指樣式

JS即JavaScript，指的是行為

關(guān)于結(jié)構(gòu)、樣式、行為的理解：

結(jié)構(gòu) - 在整個(gè)網(wǎng)頁(yè)中有標(biāo)題，有列表，有圖片等。

樣式 - 標(biāo)題文字的字體大小、顏色、字體；圖片的大小；某個(gè)塊的背景色或背景圖等。

行為 - 在網(wǎng)頁(yè)上四處飄動(dòng)的廣告；圖片滾動(dòng)；瀏覽網(wǎng)上商城時(shí)鼠標(biāo)移動(dòng)到商品時(shí)，放大商品的效果等。

HTML5與HTML的區(qū)別如下：

一、基本概念：

html:超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)

xhtml:可擴(kuò)展超文本標(biāo)記語(yǔ)言，是一種置標(biāo)語(yǔ)言，表現(xiàn)方式與超文本標(biāo)記語(yǔ)言（HTML）類(lèi)似，不過(guò)語(yǔ)法上更加嚴(yán)格。

h5:最先由WHATWG(Web超文本應(yīng)用技術(shù)工作組)命名的一種超文本標(biāo)記語(yǔ)言，隨后和W3C的xhtml2.0(標(biāo)準(zhǔn))相結(jié)合，產(chǎn)生現(xiàn)在最新一代的超文本標(biāo)記語(yǔ)言。可以簡(jiǎn)單點(diǎn)理解成：h5≈ html+CSS 3+js+API。

二、推出原因：

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

在某個(gè)WEB瀏覽器上可以正常運(yùn)行的HTML5、CSS、JavaScript等WEB程序，在另一個(gè)WEB瀏覽器上就不一定能正常運(yùn)行了。導(dǎo)致這種問(wèn)題的主要原因就是規(guī)范不統(tǒng)一，沒(méi)有被標(biāo)準(zhǔn)化。在HTML5中，這個(gè)問(wèn)題被解決了。HTML5的使命是詳細(xì)分析各WEB瀏覽器所具有的功能，然后以此為基準(zhǔn)，要求這些瀏覽器內(nèi)部的功能都要符合一個(gè)通用標(biāo)準(zhǔn)。

2.文檔結(jié)構(gòu)不夠明確

在HTML5之前的HTML版本中，文檔結(jié)構(gòu)不夠明確、清晰。例如為了要表示標(biāo)題、正文、之前一般都會(huì)使用DIV元素，但是嚴(yán)格來(lái)說(shuō)，DIV元素不是一個(gè)能把文檔結(jié)構(gòu)表示的很清楚的元素，使用過(guò)多會(huì)導(dǎo)致閱讀時(shí)不仔細(xì)研究或者很難去看出文檔結(jié)構(gòu)，而且對(duì)于搜索引擎或者屏幕閱讀等等應(yīng)用程序來(lái)說(shuō)，過(guò)多的使用DIV元素，那這些程序從哪到哪算是正文都很難確定。在HTML5中，為了解決這個(gè)問(wèn)題，增加很多和結(jié)構(gòu)相關(guān)的元素。

3.WEB應(yīng)用程序的功能受到限制

HTML5與WEB應(yīng)用程序的關(guān)系十分薄弱，WEB應(yīng)用程序的特征是先從網(wǎng)絡(luò)下載，然后忠實(shí)的運(yùn)行。因此，他會(huì)對(duì)威脅到用戶安全的功能進(jìn)行限制，目前安全性的保障這方面已經(jīng)做到了。但是對(duì)于WEB應(yīng)用程序來(lái)說(shuō)，一直以來(lái)HTML5真正所做出的貢獻(xiàn)是很少的。例如就連想同時(shí)上傳多個(gè)文件都不允許。為了彌補(bǔ)這方便的不足，HTML5已經(jīng)開(kāi)始提供各種各樣的WEB應(yīng)用上的新API。各瀏覽器也在快速封裝這些API。 HTML5已經(jīng)豐富了WEB應(yīng)用的實(shí)現(xiàn)變成了可能。

三、特性差異：

1、語(yǔ)義特性

HTML5賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。

2、本地存儲(chǔ)特性

基于HTML5開(kāi)發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。

3、設(shè)備兼容特性

從Geolocation功能的API文檔公開(kāi)以來(lái)，HTML5為網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)；HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

4、連接特性

HTML5更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)；HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)推送到客戶端的功能。

5、網(wǎng)頁(yè)多媒體特性

HTML5支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。

6、三維、圖形及特效特性

HTML5基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺(jué)效果。

7、性能與集成特性

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

8、CSS3特性

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

四、HTML5優(yōu)勢(shì)：

1、提高可用性和改進(jìn)用戶的友好體驗(yàn)。

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

3、可以給站點(diǎn)帶來(lái)更多的多媒體元素(視頻和音頻)。

4、可以很好的替代FLASH和Silverlight。

5、當(dāng)涉及到網(wǎng)站的抓取和索引的時(shí)候，對(duì)于SEO很友好。

6、將被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲。

7、不同于html沒(méi)有結(jié)構(gòu)語(yǔ)義化的標(biāo)簽（通俗來(lái)講就是不方便閱讀，沒(méi)有告訴你哪里是頭，哪里是尾巴），html5添加了許多具有語(yǔ)義化的標(biāo)簽，使代碼結(jié)構(gòu)清晰，提高了代碼的可讀性。

五、認(rèn)知誤區(qū)：

1.容易弄混的概念

HTML5移動(dòng)端的功能和應(yīng)用程序

對(duì)于蘋(píng)果手機(jī)中的應(yīng)用程序，屬于iOS開(kāi)發(fā)，語(yǔ)言是OC；對(duì)于其他安卓系統(tǒng)的手機(jī)，需要使用JAVA語(yǔ)言進(jìn)行開(kāi)發(fā)。HTML5能夠做的是移動(dòng)端的網(wǎng)頁(yè)以及微信平臺(tái)中的移動(dòng)端網(wǎng)頁(yè)。

2.前端后臺(tái)的區(qū)別

無(wú)論HTML5還是iOS，在整個(gè)網(wǎng)頁(yè)開(kāi)發(fā)流程當(dāng)中，前端（HTML5）開(kāi)發(fā)工程師，主要負(fù)責(zé)的是“前臺(tái)頁(yè)面制作”，“網(wǎng)站測(cè)試”，“修改”三個(gè)部分。

3.HTML5 與網(wǎng)頁(yè)設(shè)計(jì)與制作的區(qū)別

原有的網(wǎng)頁(yè)設(shè)計(jì)與制作，主要針對(duì)PC平臺(tái)，進(jìn)行網(wǎng)頁(yè)網(wǎng)站的設(shè)計(jì)與制作，相對(duì)會(huì)涉及一部分設(shè)計(jì)工作，并將美工圖實(shí)現(xiàn)成網(wǎng)頁(yè)。通常使用的工具是網(wǎng)頁(yè)三劍客——PhotoShop、Flash、Dreamweaver。然而，行業(yè)的發(fā)展使得“網(wǎng)頁(yè)設(shè)計(jì)與制作”這一職業(yè)逐漸遭到了淘汰，原因主要有四：

4.網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)頁(yè)制作是兩個(gè)完全不同的領(lǐng)域，一個(gè)由美感主導(dǎo)，另一個(gè)則需要邏輯思維主導(dǎo)。對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，如果將寶貴的精力分散到兩個(gè)不同的行業(yè)中，最后通常兩方面都是半斤八兩，沒(méi)有實(shí)質(zhì)的競(jìng)爭(zhēng)力；

5.網(wǎng)頁(yè)設(shè)計(jì)與制作，這一職業(yè)中的制作，指的是網(wǎng)頁(yè)的結(jié)構(gòu)與樣式（即HTML+CSS），而當(dāng)前網(wǎng)站中JavaScript已經(jīng)占據(jù)了極大的比重，如果還停留在原有的結(jié)構(gòu)和樣式中，發(fā)展空間會(huì)變得很小；

6.網(wǎng)頁(yè)設(shè)計(jì)與制作當(dāng)中的結(jié)構(gòu)實(shí)現(xiàn)，通常采用的是table布局；而WEB前端開(kāi)發(fā)工程師、HTML5當(dāng)中結(jié)構(gòu)的實(shí)現(xiàn)，采用的是DIV+CSS方式的布局，因此，Dreamweaver工具的使用也就沒(méi)有什么必要性了，取而代之的是內(nèi)存占用小，開(kāi)發(fā)速度快的文本類(lèi)編輯器。而Flash，在與HTML5的大戰(zhàn)當(dāng)中戰(zhàn)敗，當(dāng)前已經(jīng)退出了移動(dòng)端以及電視平臺(tái)的市場(chǎng)爭(zhēng)奪，在PC平臺(tái)也越來(lái)越少。轉(zhuǎn)言之，F(xiàn)lash在網(wǎng)頁(yè)制作的領(lǐng)域里已經(jīng)江郎才盡~原來(lái)的網(wǎng)頁(yè)三劍客只剩下一個(gè)PS，在前端工作的要求中，需要掌握基本的切圖即可。

附：某個(gè)HTML5頁(yè)面以及布局

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

</ul><font></font>

</nav><font></font>

</header><font></font>

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

<p>百度百科是百度公司推出的一部?jī)?nèi)容開(kāi)放、自由的網(wǎng)絡(luò)百科全書(shū)平臺(tái)，其測(cè)試版于2006年4月20日上線，正式版在2008年4月21日發(fā)布，截至2015年12月，百度百科已經(jīng)收錄了超過(guò)1300萬(wàn)的詞條，參與編輯用戶數(shù)達(dá)569萬(wàn)人，幾乎涵蓋了所有已知的知識(shí)領(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頁(yè)面底部</p><font></font>

</footer>