HTML5與HTML有什么區別？

發布人：admin ，瀏覽次數：131 ，發布時間：2019-06-06 16:56

HTML5用于實現不涉及到數據層面的我們能夠看到的所有網站（也就是負責將一張設計好的網頁圖片[設計師的工作]，用代碼實現出來，在一個地方放置個塊，給一個塊設置顏色，調整字體大小，讓圖片動起來等）。其基本組成為：HTML5 = HTML + CSS + JavaScript

HTML指的是結構

CSS指樣式

JS即JavaScript，指的是行為

關于結構、樣式、行為的理解：

結構 - 在整個網頁中有標題，有列表，有圖片等。

樣式 - 標題文字的字體大小、顏色、字體；圖片的大小；某個塊的背景色或背景圖等。

行為 - 在網頁上四處飄動的廣告；圖片滾動；瀏覽網上商城時鼠標移動到商品時，放大商品的效果等。

HTML5與HTML的區別如下：

一、基本概念：

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瀏覽器上就不一定能正常運行了。導致這種問題的主要原因就是規范不統一，沒有被標準化。在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開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。

3、設備兼容特性

從Geolocation功能的API文檔公開以來，HTML5為網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢；HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。

4、連接特性

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

5、網頁多媒體特性

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

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

HTML5基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現的驚人視覺效果。

7、性能與集成特性

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

8、CSS3特性

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

四、HTML5優勢：

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

2、有幾個新的標簽，這將有助開發人員定義重要的內容。

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

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

5、當涉及到網站的抓取和索引的時候，對于SEO很友好。

6、將被大量應用于移動應用程序和游戲。

7、不同于html沒有結構語義化的標簽（通俗來講就是不方便閱讀，沒有告訴你哪里是頭，哪里是尾巴），html5添加了許多具有語義化的標簽，使代碼結構清晰，提高了代碼的可讀性。

五、認知誤區：

1.容易弄混的概念

HTML5移動端的功能和應用程序

對于蘋果手機中的應用程序，屬于iOS開發，語言是OC；對于其他安卓系統的手機，需要使用JAVA語言進行開發。HTML5能夠做的是移動端的網頁以及微信平臺中的移動端網頁。

2.前端后臺的區別

無論HTML5還是iOS，在整個網頁開發流程當中，前端（HTML5）開發工程師，主要負責的是“前臺頁面制作”，“網站測試”，“修改”三個部分。

3.HTML5 與網頁設計與制作的區別

原有的網頁設計與制作，主要針對PC平臺，進行網頁網站的設計與制作，相對會涉及一部分設計工作，并將美工圖實現成網頁。通常使用的工具是網頁三劍客——PhotoShop、Flash、Dreamweaver。然而，行業的發展使得“網頁設計與制作”這一職業逐漸遭到了淘汰，原因主要有四：

4.網頁設計與網頁制作是兩個完全不同的領域，一個由美感主導，另一個則需要邏輯思維主導。對于開發人員來說，如果將寶貴的精力分散到兩個不同的行業中，最后通常兩方面都是半斤八兩，沒有實質的競爭力；

5.網頁設計與制作，這一職業中的制作，指的是網頁的結構與樣式（即HTML+CSS），而當前網站中JavaScript已經占據了極大的比重，如果還停留在原有的結構和樣式中，發展空間會變得很小；

6.網頁設計與制作當中的結構實現，通常采用的是table布局；而WEB前端開發工程師、HTML5當中結構的實現，采用的是DIV+CSS方式的布局，因此，Dreamweaver工具的使用也就沒有什么必要性了，取而代之的是內存占用小，開發速度快的文本類編輯器。而Flash，在與HTML5的大戰當中戰敗，當前已經退出了移動端以及電視平臺的市場爭奪，在PC平臺也越來越少。轉言之，Flash在網頁制作的領域里已經江郎才盡~原來的網頁三劍客只剩下一個PS，在前端工作的要求中，需要掌握基本的切圖即可。

附：某個HTML5頁面以及布局