HTML與HTML5有什麼不同?無論是前端開發或修改WordPress程式碼,都需要了解它們之間的區別。這可能會特別令人困惑,因為有些人可能會互換使用這兩個術語,但是從技術上講,它們兩者是不同的,儘管它們也是相關的。
下面讓我們一起深入探討HTML與HTML5之間的區別,誰更加優秀,及流行的標記語言更新有哪些變化。
什麼是HTML?
HTML代表超文字標記語言。它是網站的基本組成部分,並且可能是其中最普遍的編碼語言。
HTML是用於Web開發的標準語言。它允許您使用稱為標註標籤建立網頁的基本結構。例如,要使文字斜體,可以將其包裝在HTML標記中,如下所示:
<i>Italicized text.</i>
HTML 標籤示例
同樣,許多HTML都簡單易懂,即使非開發人員也會覺得它易於使用。
如果不使用HTML,就不可能建立網站。儘管如今使用一些程式設計搭建網站可能無需接觸任何程式碼,但包括WordPress在內,程式的後臺邏輯還是處理HTML程式碼。
因此,如果您想成為Web開發人員或更深入地研究WordPress之類的工具,則自然需要學習HTML。
HTML通常與其他語言(例如CSS和JavaScript)配對以擴充套件其功能。CSS通過新增顏色,佈局等來設定HTML樣式,而JavaScript是一種更傳統的程式語言,為網站新增高階功能。
雖然這兩種語言可以很好地與HTML捆綁在一起,但是建立網站並非絕對必要。但HTML是必需的,這就是為什麼它是最重要的Web語言。
什麼是HTML5?
HTML5 Logo(來源:W3C)
HTML5不是獨立的系統,而是HTML技術的最新版本。它的前身HTML4於1999年12月進行了第一次也是最後一次更新。實際上,HTML5也不是什麼新事物,早在2014年就釋出。
那麼,最大的區別是什麼??儘管許多標記標記保持不變(畢竟,不解決未損壞的標記),但其中的一些標記已經簡化,因此編寫程式碼非常容易和快捷。它基於全新標準,並且其解析也完全不同。
與舊版HTML(允許您建立主要需要使用CSS和JavaScript進行修飾的靜態網站)不同,HTML5更具動態性,幷包含多媒體元素。它本身支援視訊和音訊,您甚至可以使用它製作遊戲或動畫。
換句話說,HTML5完全實現以前只能使用JavaScript,Flash或Silverlight之類的舊工具實現的事情。這意味著您的站點更安全,不被攻擊者利用的點更少了。
而且,儘管建立一個完整的網站仍然絕對需要CSS和JavaScript,但您不再需要依靠它們來進行任何動態處理。
HTML5不再只是一個網站構建器。它本身就是一個完整的應用程式構建器。
HTML不會以“HTML6”釋出下一個更新,而是隨著Web需求的發展而變化。這是這項持久技術的最新也是最強大的版本,並且它將存在很長一段時間。
HTML與HTML5:權衡差異
當大多數人談論“HTML”時,他們指的是整個技術,包括其最新版本:HTML5。儘管HTML5在許多方面存在很大的差異性,但它實際上只是對舊標準的完美更新。
儘管HTML和HTML5是同一系統的一部分,但這一重大更新對舊的編碼語言進行了多項增強,使其效率更高。這裡僅是所新增內容的一些示例。
相容性
當HTML5首次問世時,相容性是一個大問題,也是許多人選擇不升級其網站的主要原因。如果瀏覽器不知道如何解析HTML5標籤,則可能會導致頁面損壞或版式錯亂。
事實恰恰相反:用舊的HTML4標準編寫的網站通常會在現代瀏覽器中崩潰,因為瀏覽器早就放棄了對過時功能的支援。如果您想與大多數人的瀏覽器保持相容,HTML5是您的理想之選。
儘管舊版本的HTML在Internet Explorer之類的瀏覽器上執行良好,但大多數使用者不再支援或使用這些過時的版本。大多數人不需要為此類舊版瀏覽器編寫網站程式碼,因此無需使用HTML4。
正如您在此處看到的那樣,所有現代瀏覽器都支援HTML5及其大多數功能。除了Internet Explorer 6–8和Firefox 2(來自2000年代初期,如今很少被人使用),所有其他版本都完全或部分支援其新標記。
HTML5瀏覽器相容情況
儘管所有現代瀏覽器在技術上都支援HTML4,但對過時標籤的支援非常有限。您應該避免使用過時的標準,而改用HTML5。
多媒體支援
HTML5帶來的最大好處之一就是對多媒體元素的支援,例如音訊,視訊,向量圖形,動畫和遊戲。
在Web的舊時代,在站點上放置儘可能多的簡單動畫通常需要使用JavaScript,Flash或某些其他技術。現在,您可以使用HTML或CSS進行操作,而不必對任何潛在的漏洞敞開大門。
使用視訊和音訊,嵌入播放器就像放下一個簡單標籤一樣容易。並且支援豐富的配置,例如開啟自動播放或新增播放器控制元件。
HTML5音訊播放器
HTML5還支援嵌入SVG向量圖形,這些影象可以調整為任何解析度而不會出現畫素化。由於SVG可以很好地拉伸以填充任何螢幕尺寸,因此它們在線上顯示圖形方面正變得越來越受歡迎。
最後,您可以使用HTML5製作完整的視訊遊戲,尤其是將其與JavaScript結合使用時。許多遊戲建立工具甚至都移植到HTML5,並允許您將結果嵌入到網站中。
這種多媒體支援使HTML5成為替代許多過時的技術(包括Java Web Start,Silverlight和最近的Flash)的理想選擇。在HTML5中,您幾乎可以更簡單,更有效地完成這些技術過去可做的所有事情。
SGML
原始的HTML語言(直到第4版)在很大程度上基於SGML標準或標準通用標記語言。
SGML旨在標準化標記,消除混淆並啟發了HTML和XML,但它是1960年代建立的一種語言。它很古老,因此在設計時就沒有考慮到現代Web應用程式。
HTML5已經發展為不再符合SGML;相反,它使用自己的獨特規則進行解析。儘管它的起源仍然是SGML,HTML5只是對現有技術的擴充套件,但它不再符合那些標準。
其最明顯的一點是錯誤處理現在變得更加寬容。一個小錯誤將不再導致頁面前端出現明顯問題,或者根本不載入頁面。
語義或標籤也得到了極大的改善。之前,構造頁面需要重複使用<div>
標籤:<div id=“header”>
,<div id=“menu”>
,和<div class=“post”>
。
在HTML5中,這些笨重的程式碼是<header>
,<nav>
和<article>
。這些標籤既乾淨又響應迅速。
還引入了幾個新標籤。它們中的許多是為了代替以前用於構造頁面的div和框架而建立的。
許多舊的標記標籤完全沒有變化,因此HTML5與舊版本部分向後相容。但是,未經修改的HTML4文件將不再能使用新標準正確解析。
儘管HTML和HTML5之間有很多區別,但是這些更改通常會變得更好,並且旨在使標記語言更易於訪問。
更好的效能和移動支援
HTML5的最大優點之一是,它比以前的迭代更快,響應速度更快。在原始HTML時代,計算機以外的裝置訪問網際網路甚至乎是天方夜譚。現在,可以從我們的手機,手錶和電視訪問所有這些內容,HTML5的速度功不可沒。
新版本帶來了更好的標準,可以使網站在更小,功能更弱的裝置上更流暢地執行。許多效能問題仍然取決於程式碼質量。但是,過往HTML大量缺陷都隨HTML5更新得到解決。
例如,HTML5支援JavaScript Web Workers的多執行緒,從而使裝置的處理器能夠利用其更多功能來執行指令碼。現在,用於可讓頁面奔潰的程式碼將無縫執行。
在HTML5中,設計響應式網站也要容易得多。HTML4具有許多無響應的元素(例如div),已被在移動裝置上更好地工作的結構標籤所取代。
導致可用性和可訪問性問題的框架也被刪除。儘管仍然相容,但已明確棄用它們,除非您有理由使用過時的技術,否則不應該使用它們。
雖然無法直接用HTML5替換框架,但建議您使用Flex框或iframe之類的CSS元素(HTML5仍支援這些元素)來替換舊功能。
更好的表格控制
新的表單控制元件等同於對網站的全新控制。儘管這似乎是一個很小的功能,但它意味著必須依靠一種較少的外部技術來建立工作表。
HTML 5表單示例
最初,HTML僅支援文字,密碼,隱藏,覈取方塊/單選框和檔案上傳輸入型別。儘管這足以構成基本的輸入表單,但是現在您可以使用HTML5輸入型別做更多的事情。
新增加的內容包括電子郵件,電話號碼,URL,搜尋框,滑塊,數字,日期和時間選擇器以及顏色選擇器輸入。
輸入型別的多樣化陣列使您可以建立更好的表單,以收集接收更多內容型別,並附帶驗證以確保它們正確無誤。檢查HTML輸入的完整列表以獲取更多資訊。
頁面儲存
在頁面儲存方面,HTML4及以下版本基本上支援Cookie和其他功能。除了基本的使用者跟蹤之外,將所有資訊儲存在一個很小的4 KB cookie中幾乎是不可能的。
另一方面,本地儲存使您可以儲存5-10 MB的資料,具體取決於瀏覽器。這使您可以儲存有關先前會話的客戶端資訊,離線訪問資料,個人定製等等。此外,與cookie不同,本地儲存不會自動清除。
在WordPress外觀自定義中啟用了黑暗模式
您可以使用本地儲存的一個示例是儲存使用者對網站上的淺色或深色主題的偏好設定,以確保他們在下次訪問時繼續看到上一次設定的網站風格。雖然您還可以使用cookie儲存使用者首選項,但瀏覽器會定期清除cookie。
HTML5通過Web Storage API支援本地儲存。此外,它還支援Web SQL資料庫儲存,索引資料庫儲存,甚至使用File API進行檔案訪問。其中許多通過API與JavaScript整合。在此之前,這要麼做起來非常麻煩,要麼在某些情況下根本不可能,或者做起來非常麻煩。
哪個更好:HTML還是HTML5?
如果您想學習編碼,則絕對應該避免使用過時的標準。HTML5是HTML的最新版本,應始終在優先考慮語言的新版本。
如上所述,HTML5對在過時且難以使用的HTML4的幾個方面進行了改進。此外,HTML5可以原生執行許多操作,而HTML4完全依賴於長期以來已棄用的系統,例如Silverlight,Java Web Start和Flash。
儘管HTML5並不總是能在老掉牙的瀏覽器和作業系統(例如Internet Explorer或舊版本的手機)上正常顯示,但是這些平臺或者軟體本身已經過時了,很少再被人使用了。不再有任何充分的理由在現代標準上使用過時的HTML版本。
值得注意的是,Internet上和有關舊版HTML的書中都有很多資訊。每當您查詢教程或從課程或書本中學習時,請確保它所論述的是HTML5,且應該2014年之後釋出或更新。學習1999年以來的過時標準是沒有用的。
如何將HTML轉換為HTML5
如果您的網站較舊,則需要對其進行更新。遺憾的是,如果不進行任何手動工作,就沒有真正的方法可以完成全部轉換。
最好的方法是通讀HTML5規範(如果您是該語言的新手,則可以閱讀HTML課程)並熟悉所做的更改。之後,您可以重寫程式碼並新增HTML5的新功能。
你可以參閱從HTML4遷移到HTML5指南,它廣泛涵蓋了您需要對程式碼進行的手動更改。
您也可以嘗試使用此XHTML到HTML5轉換器,但是在將其匯入到實際網站之前,請確保手動檢查程式碼或將其插入到驗證器中。
幸運的是,HTML5主要是新內容。您需要替換一些不推薦使用的標籤,但是除此之外,除非您的站點嚴重依賴於不推薦使用的技術(如框架),否則升級程式碼通常並不是一件很困難的事。
小結
HTML和HTML5只是同一技術的兩個部分,儘管它們表示的內容略有不同。HTML是指整個標記語言,而HTML5是它的最新更新。
如果您想學習HTML,請務必使用最新版本的HTML5。無論從哪方面來看,它都是更好的選擇,即使這意味著必須手動轉換許多舊程式碼,但絕對值得付出努力。
HTML5已有數年曆史了,作為該語言整體的生存標準,它將僅繼續更新以與現代Web一起使用。
評論留言