HTML5和HTML4在基本語法上的區別？ 1. 內容類型（ContentType） HTML5中的文件擴展符仍然為".html" 或 ".htm",內容類型仍然為"text/html"。 2. DOCTYPE聲明 HTML4： <!DOCTYPE html PUBLIC "-//W3C//DTD ...
HTML5和HTML4在基本語法上的區別？
1. 內容類型（ContentType）
HTML5中的文件擴展符仍然為".html" 或 ".htm",內容類型仍然為"text/html"。
2. DOCTYPE聲明
HTML4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">
HTML5:
<!DOCTYPE html>
//當使用工具時，也可以在DOCTYPE聲明方式中加入SYSSTEM識別符，聲明方法如下：<!DOCTYPE HTML SYSTEM "about:legacy-compat">
3. 指定的字元編碼
HTML4中使用meta元素的形式指定文件中的字元編碼，如下所示：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5中，可以使用<meta>元素直接追加charsetd屬性的方式來指定字元編碼，如下所示：
<meta charset="UTF-8">
這2種方式都有效，也可以用前一種方式，但是不能同時混用，下麵這種方式是錯誤的。
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5中新增元素
新增與結構相關的元素
section元素表示頁面中一個內容區塊,<section>...</section>，HTML4中代碼示例<div>...</div>。
article元素表示頁面中一塊與上下文不相關的獨立內容，<article>...</article>，HTML4中代碼示例<div>...</div>。
aside元素表示article元素的內容之外的、與article元素的內容相關的輔助信息。<aside>...</aside>,HTML4中代碼示例<div>...</div>。
header元素表示頁面中一個內容區塊或整個頁面的標題。<header>...</header>,HTML4中代碼示例<div>...</div>。
hgroup元素用於對整個頁面或頁面中一個內容區塊的標題進行組合。<hgroup></hgroup>，HTML4中代碼示例<div>...</div>。
footer元素表示整個頁面或頁面中一個內容區塊的腳註。一般來說，它會包含創作者的姓名、創作日期以及創作者聯繫信息。<footer></footer>，HTML4中代碼示例<div>...</div>。
nav元素表示頁面中導航鏈接的部分，<nav></nav>，HTML4中代碼示例<ul>...</ul>。
figure元素表示一段獨立的流內容，一般表示文檔主體流內容的一個獨立單元，使用figcaption元素為figure元素添加標題。
<figure>
<figcaption>/...</figucaption>
<p>...</p>
</figure>
//HTML4中的代碼示例
<dl>
<h1>...</h1>
<p>...</p>
</dl>其他元素
video元素，定義視頻，比如電影片段或其他視頻流。
//HTML5中代碼示例 <video src="movie.ogg" controls="controls">video元素</video> //HTML4中代碼示例 <objext type="video/ogg" data="movie.ogg"> <param name="src" value="movie.ogg"> </object>
audio元素，audio元素定義音頻，比如音樂或其他音頻流。
//HTML5中代碼示例 <audio src="movie.wav">video元素</audio> //HTML4中代碼示例 <objext type="application/ogg" data="movie.wav"> <param name="src" value="movie.wav"> </object>
embed元素， embed元素用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等。
//HTML5中代碼示例 <embed src="movie.wav" /> //HTML4中代碼示例 <objext type="application/x-shockwave-flash" data="movie.wav"></object>
mark元素主要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字。典型就是在搜索結果中向用戶高亮顯示搜索關鍵詞。
//HTML5中的代碼示例 <mark></mark> //HTML4中的代碼示例 <span></span>
progress元素，progress元素表示運行中的進程，可以使用progress元素來顯示javascript中耗費時間的函數進程。<meter></meter> ，這是HTML5中新增功能，HTML4中代碼無法實現。
time元素，time元素表示日期或時間，同時可以表示兩者。
//HTML5中的代碼示例 <time></time> //HTML4中的代碼示例 <span></span>
ruby元素，ruby元素表示 ruby註釋（中文註音或字元），這也是HTML5中新增的功能。
<ruby>漢 <rt><rp>(</rp>...<rp>)</rp></rt></ruby>
rt元素，rt元素表示字元（中文註音或字元）的解釋或發音。
rp元素，rp元素在ruby註釋中使用，以定義不支持ruby元素的瀏覽器所顯示的內容。
wbr元素，wbr元素表示軟換行。wbr元素與br元素的區別是: br元素表示此處必須換行，而wbr元素的意思是瀏覽器視窗或父級元素的寬度足夠寬時不進行換行，而當寬度不夠時，主動在此處換行。
<p>... <wbr></p>
canvas元素，canvas元素表示圖形， 比如圖標和其他圖像，僅提供畫布，但它把一個繪圖API展現給客戶端javascript，以使腳本想把繪製的東西繪製到這塊畫布上。
//HTML5中的代碼示例 <canvas id="myCanvas" width="200" height="200"> </canvas> //HTML4中的代碼示例 <object data="inc/exm.svg" type="image/svg/svg+xml" width="200" height="200"></object>
command元素，command元素表示命令按鈕，比如單選按鈕、覆選框或按鈕，這是HTML5中新增的功能。
<command onclick="cut()" label="cut">
details元素，details元素表示用戶要求得到並且可以得到的細節信息。它可以與summary元素配合使用。summary元素提供標題或圖例, 這是HTML5中新增的功能。
<details> <summary>HTML 5</summary> ... </details>
datalist元素，datalist元素表示可選數據的列表，與input元素配合使用，可以製作輸出值的下拉列表。這是HTML5中新增的功能。
<datalist></datalist>
datagrid元素，datagrid元素表示可選數據的列表，它以樹形的形式來顯示，這是HTML5中新增的功能。
<datagrid></datagrid>
keygen元素，keygen元素表示生成密鑰，這是HTML5中新增的功能。
<keygen>
output元素,output元素表示不同類型的輸出，比如腳本的輸出。
//HTML5中的代碼示例 <output></output> //HTML4中的代碼示例 <span></span>
source元素，source元素為媒介元素（比如<video>和<audio>）定義媒介資源。
//HTML5中的代碼示例 <source> //HTML4中的代碼示例 <param>
menu元素，menu元素表示菜單列表，當希望列出表單空間時使用該標簽，在HTML4中不被推薦使用。
<menu> <li><input type="checkbox">RED</li> <li><input type="checkbox">blue</li> </menu>
新增的input元素的類型
email、url、number、range、Date Pickers
Date Pickers：
date（年、月、日）
month（月、年）
week（周和年）
time（時間小時和分鐘）
datetime（選擇時間、日、月、年(UTC時間)）
datetime-local（選取時間、日、月、年（本地時間））。
HTML5中新增屬性
表單相關的屬性
1. 可以對input（type=text）、select、textarea與button元素指定autofocus屬性。它是以指定屬性的方式讓元素在畫面打開時自動獲得焦點。
2. 可以對input（type=text）與textarea元素指定placeholder屬性,它會對用戶的輸入進行提示，提示用戶可以輸入的內容。
3. 可以對input（type=text）與textarea元素指定required屬性，該屬性表示在用戶提交的時候進行檢查，檢查該元素內一定要有輸入內容。
4. 對input新增的屬性：autocomplete、min、max、multiple、pattern與step。
5. 對input和button元素新增新屬性：formaction、formenctype、formmethod、formnovalidate與formtarget。為fieldset元素增加了disabled屬性，可以把它的子元素設為disabled狀態。
6. 為input、button、form元素增加了novalidate屬性，該屬性可以取消提交時進行的有關檢查，表單可以被無條件地提交。
鏈接相關屬性
1. 為a與area增加了media屬性，該屬性規定目標URL是什麼類型的媒介/設備進行優化的，在鞥在href屬性存在時使用。
2. 為area元素增加了hreflang屬性與rel屬性，以保持與a元素、link元素的一致。
3. 為link元素增加了新屬性sizes。
4. 為base元素增加了target屬性，主要目的是保持與a元素的一致性。
其他屬性
1. 為ol元素添加reversed,指定列表倒序顯示。
2. 為meta元素增加charset屬性。
3. 為menu增加 type和label屬性。
4. 為style元素增加scoped屬性，用來規定樣式的作用範圍。
5. 為script增加async屬性 ，定義腳本是否非同步執行。
6. 為html元素增加屬性manifest，開發離線web應用程式時它與其他API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息。
7. 為iframe元素增加sandbox、seamless、srcdoc,用來提高頁面安全性，防止不信任的web頁面執行某些操作。
幾個常用的全局屬性
全局屬性
全局屬性的概念是HTML5中新增的，是指可以對任何元素都使用的屬性。
contentEditable
contentEditable是一個布爾值屬性，主要功能是允許用戶編輯元素中的內容，所以該元素是可以獲得滑鼠焦點的元素，而且在點擊滑鼠後要向用戶提供一個插入符號，提示該元素中的內容允許編輯。
designMode
designMode屬性有2個值，"on"和"off",用來指定整個頁面是夠可編輯，當頁面編輯時，任何支持上文的contentEditable屬性的元素都變成可編輯狀態。
document.designMode = "on";hidden
hidden屬性類似於input元素中的hidden元素，功能是通知瀏覽器不渲染該元素，使該元素處於不可見狀態。
spellcheck
spellcheck是HTML5針對input（type=text）與textarea這2個文本輸入框提供的一個新屬性，它對用戶輸入的文本內容進行拼寫和語法檢查。 spellcheck屬性是一個布爾屬性值，特別的是使用這個屬性時必須聲明屬性值為true或false。
註意！！！ 元素為readOnly屬性或disabled屬性設為true時，不執行拼寫檢查。
tabindex
tabindex是開發中的一個基本概念，當不斷敲擊Tab鍵讓視窗或頁面中的控制項獲得焦點，對視窗或頁面中的所有控制項進行遍歷的時候，每一個控制項的tabindex表示該控制項是第幾個被訪問到的。作用二是在預設情況下，只有鏈接元素與表單元素可以通過按鍵獲得焦點。但是有副作用，腳本中執行focus()語句可以獲得焦點，該元素也可以通過按Tab鍵獲得焦點。所以把元素tabindex值設為負數（-1）。
參考資料：
【中】陸凌牛 著 機械工業出版社《HTML5 與 CSS3 權威指南》
