HTML5和HTML4的區別

jzen發表於2018-01-17
HTML

HTML5主要解決了以往文件的一些痛點：

  1. 解決文件結構混亂 以前的文件結構過度依賴div，HTML5推出了多種語義化標籤，使得文件更利於閱讀器等理解，更利於SEO優化。

  2. 解決瀏覽器之間的相容性問題 市場上瀏覽器種類繁多，每個瀏覽器廠商都在做自己的東西，沒有一個標準限制，HTML5的出現就是為了統一標準。目前主流瀏覽器除IE6,7,8以外都支援HTML5標準

  3. 擴充套件Web應用的功能 以前Web頁面僅僅只是展示作用，HTML5出現許多新的api，瀏覽器廠商也在迅速的封裝這些api，使得Web頁面更像是一個多互動的應用程式而非單純的頁面展示。

主要的區別：

  1. 語法改變：
  • 文件宣告的變化 文件宣告的作用就是告訴標記語言解析器，應該用什麼文件型別定義（DTD）來解析。 超文字4.01規定了3種文件型別：嚴格、過渡、框架集。格式類似於這樣：
// HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd"> 

//HTML5
<!DOCTYPE HTML> 
//這裡所有的doctype不區分大小寫
複製程式碼
  • 具有布林值的屬性
<inpout type="text" disabled />
複製程式碼
  • 可以指定字元編碼
<meta charset="UTF-8">
複製程式碼
  1. 新增的元素和廢除的元素：

  • 新增的結構元素： article、section、side、header、footer、nav等

  • 新增的input元素： email、number、url、range等

  • 新增的其他元素： video、audio、canvas、datalist等

  • 廢除的元素： 一些能被css代替的元素：big、s、u等

  • 不再使用frame框架 可以使用iframe等

  1. 全域性屬性：
  • contentEditable----------富文字編輯屬性
  • designMode----------用來指定整個頁面是否可編輯，當頁面可編輯時，頁面中任何支援contentEditable屬性的元素都變成了可編輯狀態。 designMode屬性只能在JavaScript指令碼里被編輯修改。該屬性有兩個值--“on”與“off”。屬性被指定為“on”時，頁面可編輯；被指定為“off”時，頁面不可編輯。
  • hidden----------類似於display:none
  • spellsheck----------文字框的拼寫檢查
  • tabindex----------使用Tab鍵訪問的順序

相關文章