HTML5與HTML4區別簡介

時間 2020-01-11

標籤 html5 html html4 區別簡介欄目 HTML5 简体版

原文原文鏈接

移動互聯網的快速發展，尤爲是4G時代已經來臨，加上微軟在Windows 10中搭載了新的瀏覽器Edge取代了IE的地位，因此如今不少網站都開始拋棄IE朝着HTML5發展，PC端在不一樣瀏覽器之間的兼容性問題愈來愈少，在移動終端上用的甚是普遍，HTML5已成爲瀏覽器標記語言的霸主，這是大勢所趨。隨着Adobe放棄移動Flash，微軟亦將中止發展Silverlight，HTML5的應用仍存在着巨大的上升空間。近期內極可能從廣告行業逐漸往遊戲行業、廣播電視行業和媒體行業轉型，不遠的未來還能把觸角伸得更遠。做爲新一代Web開發標準，HTML5的將來十分光明，值得咱們去學習。html

什麼是HTML5？

HTML5最早由WHATWG(Web超文本應用技術工做組)命名的一種超文本標記語言，隨後與W3C組織的XHTML2.0相結合，產生如今最新一代的超文本標記語言。前端

併爲HTML5創建了一些規則：html5

新特性應該基於 HTML、CSS、DOM 以及 JavaScript。web
減小對外部插件的需求（好比 Flash）編程
更優秀的錯誤處理canvas
更多取代腳本的標記瀏覽器
HTML5 應該獨立於設備服務器
開發進程應對公衆透明session

能夠簡單點理解成：HTML 5 ≈ HTML + CSS3 + JavaScript + APIapp

咱們如今web前端開發的靜態網頁，通常都是HTML4.01，同時符合W3C規範。那麼他們二者直接又有什麼實質性的區別呢？

1.在文檔類型聲明上

<!DOCTYPE> 聲明能幫助瀏覽器正確地顯示網頁。

HTML5

<!DOCTYPE html>

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

對比可見：在文檔聲明上，HTML4和XHTML有一段很長的代碼，而且很難記住，想必不少人都是經過編輯器直接生成的吧？而HTML5只有簡單的聲明，這也方便人們的記憶。

2.設置頁面字符編碼

在HTML5中可使用對 <meta> 元素直接追加charset屬性的方式來指定字符編碼。

HTML4

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5

<meta charset="UTF-8">

從HTML5開始，對於文件的字符編碼推薦使用UTF-8。

3.在結構語義上

HTML4： 沒有體現結構語義化的標籤，咱們一般都是這樣來表示網站的頭部 <div id="header">。

HTML5： 在語義上卻有很大的優點。提供了一些新的標籤，好比 <header> / <nav> / <section> / <article> / <aside> / <footer> 等。

提供這樣的標籤有什麼樣的好處呢？語義化的含義就是用正確的標籤作正確的事情，HTML語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；在沒有CSS樣式狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

4.其餘新增內容

新增的input類型： email(郵件地址) / url(URL地址) / number(數字) / range(範圍滑動條) / date(日期) / search(搜索) / color(顏色選擇器) 等。

新的內聯元素：

<meter> 定義預約義範圍內的度量
<progress> 定義任何類型的任務的進度
<time> 定義一個日期/時間
<mark> 標籤訂義帶有記號的文本

新的內嵌元素：

<video> 定義視頻
<audio> 定義音頻
<source> 爲媒介元素（好比 <video> 和 <audio>）定義媒介資源

新的交互元素：

<details> 定義元素的細節
<datagrid> 定義樹列表 (tree-list) 中的數據
<datalist> 定義選項列表
<menu> 定義菜單列表
<command> 定義命令按鈕

5.`<canvas>`替代Flash

Flash給不少Web開發者帶來了麻煩，要在網頁上播放Flash須要一堆代碼和插件，<canvas> 標籤使得開發者只要使用一個標籤就能和用戶產生UI交互。HTML5已經能夠替代Flash的絕大多數特性，並且從HTML5的發展趨勢來看，HTML5將逐漸得到對Flash的優點，因此替代趨勢確定是存在的，已經有很多Flash開發者轉入了HTML5陣營，因此我相信不久以後HTML5遊戲開發這個領域應該會有很是大的發展。

6.廢除的元素

能用CSS替代的元素： 對於 <basefont> / <big> / <center> / <font> / <s> / <strike> / <tt> / <u>這些元素，因爲它們的功能都是純粹的畫面展現服務的，而HTML5中提倡把畫面展現性功能放在CSS樣式中統一編輯，因此將這些元素廢除。

再也不使用Frame框架： 因爲Frame框架對網頁可用性存在負面影響，HTML5中再也不支持 <frame>，只支持iframe框架，或者用服務器建立的多個頁面組成的複合頁面的形式。

只有部分瀏覽器支持的元素： <applet> / <bgsound> / <blink> / <marquee> 等元素。<bgsound> 和 <marquee> 只被IE支持，被HTML5廢除。其中 <applet> 可由 <embed> 或 <object> 替代，<bgsound> 可由 <audio> 替代，<marquee> 可由JavaScript編程方式替代。

7.本地存儲

HTML5 Storage提供了一種方式讓網站可以把信息存儲到你本地的計算機上，並在之後須要的時候進行獲取。這個概念和Cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這使得Cookie速度很慢並且效率也不高。HTML5的Storage是存儲在你的計算機上，網站在頁面加載完畢後能夠經過Javascript來獲取這些數據。

HTML5提供了兩種在客戶端存儲數據的新方法：