HTML5與HTML4的區別

時間 2019-12-01

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

原文原文鏈接

1. HTML5推出的理由css

解決Web上存在的問題：html

Web瀏覽器間的兼容性低:在一個瀏覽器中能夠運行的HTML、Css、Javascript，在另外一個瀏覽器中不能運行。canvas

緣由：各瀏覽器規範不統一，沒有被標準化。瀏覽器

解決方案：使各瀏覽器的功能符合通用標準。ruby

文檔結構不夠明確：HTML4中元素不能把文檔結構表示清楚。服務器

解決方案：增長與結構相關的元素。框架

Web應用程序的功能受到限制：HTMLL4對Web應用程序的貢獻很小，好比：不容許同時上傳多個文件。ide

解決方案：提供供Web應用程序使用的API。ui

2. HTML5語法的改變編碼

內容類型不變

HTML5的文件擴展符（html或.htm）與內容類型（text/html）保持不變。

DOCTYPE聲明變化

HTML4中須要指明是HTML的哪一個版本，HTML5不須要，只使用<!DOCTYPE html>便可。

指定字符編碼變化

HTML4：<meta http-equiv=‶content-type″ content=‶text/html; charset=UTF-8″>

HTML5:<meta charset=‶UTF-8″>

能夠省略元素的標記

HTML5中不少元素標記能夠省略

具備boolean值的屬性調整

不指定屬性值、屬性名設定爲屬性值、字符串設爲空時表示屬性值爲true；

不寫該屬性表示屬性值爲false。

例如：

<input type=‶checkbox″ checked> 表示checked值爲true

<input type=‶checkbox″ checked=‶checked″> 表示checked值爲true

<input type=‶checkbox″ checked=‶″> 表示checked值爲true

<input type=‶checkbox″> 表示checked值爲false

可省略引號

HTML5可省略指定屬性值時的引號。

3. 新增的元素和廢除的元素

新增元素

新增的結構元素

section：表示頁面中內容塊，好比章節、頁眉、頁腳或頁面中的其餘部分，可與<h1>到<h6>結合使用表示文檔結構。

article:表示頁面中一塊與上下文不相關的獨立內容，好比博客中的一篇文章或報紙中的一篇文章。

aside:表示article內容以外，與article內容相關的輔助信息。

header：表示頁面中的區域塊，一般用它表示標題。

hgroup：用於對整個頁面或頁面中標題進行整合。

footer：表示頁面中的區域塊，一般表示區域快的腳部或底部，用於承載做者姓名、創做日期等與做者的元素。

nav:表示頁面中導航部分。

figure：表示一段獨立的流內容，通常表示主體流內容的一個獨立單元。

新增的其餘元素

video:定義電影片斷、視頻流等視頻。

audio：定義音樂或音頻流。

canvas：畫布，自己沒有行爲，僅提供一塊畫布，但它的API展示給JavaScript及腳本，可以把想繪製的東西繪製在canvas上。

embed mark progress meter time ruby rt rp wbr command details detalist

datagrid keygen output source menu

新增的input元素的類型

email：表示必須輸的email地址

url：表示文本框輸入的一個地址

number：表示數字

range：表示數字範圍值

DataPickers：表示日曆的日期、時間

廢除的元素

能使用css代替的元素

basefont big center font s tt u等

再也不使用frame框架

因爲frame框架對網頁可用性存在負面影響，HTML5中已不支持frame框架，只支持iframe框架或者用服務器方式建立的由多個頁面組成的複合頁面的形式，同時將frameset元素、frame元素、noframes元素廢除。

只有部分瀏覽器支持的元素

其餘被廢除的元素

4. 新增的屬性和廢除的屬性

新增的屬性

表單相關的屬性

連接相關的屬性

其餘屬性

廢除的屬性

5. 全局屬性

HTML5中新增全局屬性的概念，全局屬性指能夠對任何元素都使用的屬性。

contentEditable屬性

容許用戶編輯元素中內容，使用該屬性的元素必須爲能夠得到鼠標焦點的元素，並且在點擊鼠標後向用戶提供一個插入符號，提示用戶該元素容許進行編輯。

是boolean值類型，能夠設爲true、false或繼承狀態。其中，true表明可編輯，false表明不可編輯，當未指定true或false時與父元素的繼承狀態相同。

designMode屬性

用來指定整個頁面是否可編輯，當頁面可編輯時，頁面中全部支持contentEditable屬性的元素都變爲可編輯情況。designMode屬性只能在JavaScript腳本中被修改、編輯。屬性值可取on（可編輯）或off（不可編輯）。

hidden屬性

HTML5中全部元素都容許使用hidden屬性，該屬性相似於input元素中hidden元素，boolean值，可設爲true（不可見）、false（可見）。當某元素的hidden屬性值爲true時，瀏覽器不渲染該元素，使該元素處於不可見狀態，但瀏覽器建立該元素內容，即頁面加載後容許使用JavaScript腳本將該屬性值取消，使該元素可見。

spellcheck屬性

針對input（type=text）與textarea這兩個文本輸入框提供的一個新屬性，主要對用戶輸入內容進行拼寫與語法檢查。屬性值爲boolean值，可取true或false。

tableindex屬性

當點擊Tab鍵時，讓窗口或頁面中可得到焦點的連接元素或表單元素進行遍歷，tableindex表示該元素第幾個被訪問到。

若tableindex值爲"-1"時表示沒法獲取該元素.