1. HTML5推出的理由
解決Web上存在的問題:
Web瀏覽器間的兼容性低:在一個瀏覽器中可以運行的HTML、Css、Javascript,在另一個瀏覽器中不能運行。
原因:各瀏覽器規范不統一,沒有被標准化。
解決方案:使各瀏覽器的功能符合通用標准。
文檔結構不夠明確:HTML4中元素不能把文檔結構表示清楚。
解決方案:增加與結構相關的元素。
Web應用程序的功能受到限制:HTMLL4對Web應用程序的貢獻很小,比如:不允許同時上傳多個文件。
解決方案:提供供Web應用程序使用的API。
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"時表示無法獲取該元素.
