區別：HTML5中簡化了DOCTYPE、html、meta、script等標籤。 HTML5中增加了header、footer、section、article、nav、hgroup、aside、figure等語意標籤；增加了canvas標籤。
本教學操作環境：windows7系統、HTML5版、Dell G3電腦。
1 HTML5中的標記方法
#1.1 內容類型（ContentType）
- #HTML5的檔案副檔與內容類型保持不變。即擴充符仍然為".html"或".htm"，內容類型仍為“text/html”。
1.2 DOCTYPE
<！ DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<！ DOCTYPE html>（不區分大小寫）
在H5中，刻意不使用版本宣告，一份文件將會適用所有版本的HTML。
另外，當使用工具時，也可以在DOCTYPE宣告方式中加入SYSTEM識別符，宣告方法如下：
<！ DOCTYPE HTML SYSTEM "about:legacy-compat">(不區分大小寫，引號不區分是單引號還是雙引號)
1.3 指定字元編碼
使用meta元素的形式指定檔案中的字元編碼(透過content元素的屬性來指定)，如下：
使用對元素直接追加charset屬性的方式來指定字元編碼。
#注意：兩種方法都有效，但是不能同時混合使用兩種方式，從H5開始，對於文件的字符編碼推薦使用UTF-8。
2 HTML5確保的相容性
#2.1 可以省略標記的元素
# #（1）不允許寫結束標記的元素（即不允許使用開始標記與結束標記將元素括起來的形式,只允許使用“<元素/>”的形式 ）
area、 base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
（2）可以省略結束標記的元素
li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
（3）可以省略全部標記的元素（指該元素可以完全被省略）
html、head、body、colgroup、tbody
# 注意：即使標記被省略了，該元素還是以隱式的方式存在。例如省略不寫body元素時，再文檔結構中它還是存在的，可以使用document.body存取。
2.2 具有boolean值的屬性
#
#
#
#
#
2.3 省略引號
（1）在指定屬性值的時候，屬性值兩邊加引號時，既可以用雙引號也可以用單引號。
（2）H5在此基礎上做了一些改進，當屬性值不包括空字串、”<“、”>“、”=“、單引號、雙引號等字元時，屬性值兩邊的引號可以省略。如下圖
##3. HTML5新增的元素與已廢除的元素
3.1新增的結構元素
###section元素、article元素、aside元素、header元素、footer元素、 nav元素、figure元素、main元素###
3.2新增的其他元素
video元素、audio元素、embed元素、mark元素、progress元素、meter元素、time元素、ruby元素、rt元素、rp元素、wbr元素、canvas元素、commmand元素、details元素、datalist元素、datagrid元素、keygen元素、output元素、source元素、menu元素、dialog元素
3.3新增的input元素的類型
（1）email：表示必須輸入e-mail位址的文字輸入框
#（2）url：表示必須輸入URL位址的文字輸入框
（3）number：表示必須輸入數值的文字輸入框
（4）range：表示必須輸入一定範圍內數字值的文字輸入框
（5）Date Pickers：H5擁有多個可供選擇日期和時間的新型輸入文本框
1. date：選取日、月、年
2 .month：選取月、年
3. week：選取週及年
4. time：選取時間（小時和分鐘）
5. datetime：選取時間、日、月、年（UTC時間）##NUTC時間)
6. datetime-local：選取時間、日、月、年（本地時間）
（6）search：用於搜尋
#（7）tel：專用於電話
（8）color：顏色選擇文字方塊。選擇的值為”#000000“格式的文字。
3.4 廢除的元素
（1）能使用CSS取代的元素
如：basefont、big、center、font、s、strike 、tt、u 等元素
其中s、strike元素可以由del元素取代，tt元素由CSS的font-famliy屬性來取代。
（2）不再使用frame框架
如：frameset、frame、noframes。
由於frame框架對網頁可用性有負面影響，在H5中已不支援frame框架，只支援iframe框架或由伺服器方創建的由多個頁面組成的複合頁面的形式，同時將這三個元素廢除。
（3）只有部分瀏覽器支援的元素
如：applet、bgsound、blink、marquee等元素。
其中applet元素可由embed元素或object元素代替，bsground元素可由audio元素代替，marquee可以由javascript程式設計方式取代。
（4）其他被廢除的元素
1. rb元素，由ruby元素取代
2. acronym元素，由abbr元素取代
3. dir元素，以ul元素取代
4. isindex元素，由form元素與input元素結合的方式取代
5 .listing.元素，由pre元素取代
6. xmp元素，以code元素取代
7. nextid元素，由GUIDS元素取代
類型取代第 8. plaintextlain，使用「text/
## 類型取代#8. plaintextlain或
#推薦教學：《html影片教學》
4.全域屬性
所謂全域屬性，是指可以對任何元素都使用的屬性。
4.1 contentEditable屬性
（1）主要功能
允許使用者編輯元素中的內容，所以這個元素必須是可以取得滑鼠焦點的元素，而且在點擊滑鼠後要向使用者提供一個插入符號，提示使用者該元素中的內容循序編輯
#（2）值
該屬性為一個布林值屬性，可以被指定被true或false。
（3）隱藏的inhert狀態
當該屬性未被指定時，則由inherit狀態來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。
（4）isContentEditable屬性
當元素可編輯時，屬性值為true，否則為false。
4.2 designMode屬性
（1）功能
用來指定整個頁面是否可編輯，當頁面可編輯時，頁面中任何支持contentEditable屬性的元素都變成了可編輯狀態。
（2）值
此屬性有兩個值，「 on 」（頁面可編輯）和「 off 」（頁面無法編輯）。
（3）此屬性只能在Javascript腳本中被編輯修改
document.designMode = " on ";
（4）瀏覽器支援
1.IE8：出於安全考慮，不允許使用此屬性讓頁面進入編輯狀態。
2.IE9：允許使用此屬性讓頁面進入編輯狀態。
3.Chorme3 與 Safari：使用 。內嵌frame的方式，此內嵌frame是可編輯的。
4.Firefox 與 Opera：允許使用此屬性讓頁面進入編輯狀態。
4.3 hidden屬性
（1）功能
通知瀏覽器不渲染該元素，使該元素處於不可見狀態。
（2）值
布林值屬性，為 true 或 false。
4.4 spellcheck屬性
spellcheck屬性是H5針對input元素（type=text）與textarea這兩個文字輸入框提供的一個新的屬性。
（1）功能
對使用者輸入的文字內容進行拼字和語法檢查.
（2）值
布林值，true 或false 。
（3）注意
1.必須宣告屬性值為true或false。
2.若元素的 readOnly 屬性或 disabled 屬性設為 true，則不執行拼字檢查。
（4）瀏覽器支援情況
目前除了IE之外，Firefox、Chorme、Safari、Opera等瀏覽器都對該屬性提供了支援。
4.5 tabindex屬性
每個控制項的tabindex表示該控制項是第幾個被存取到的。 （敲擊Tab鍵）
（1）如今控制項的遍歷順序是由元素在頁面上所處位置決定的，所以就不再需要了。
（2）另一個作用
在預設情況下，只有連結元素與表單元素可以透過按鍵取得焦點。如果對其他元素使用該屬性後，也能讓該元素獲得焦點。將元素的tabindex值設為負值（通常為-1）後，可以透過程式設計的方式讓元素獲得焦點，並且在按下Tab鍵時該元素不會獲得焦點。
更多程式相關知識，請造訪：程式設計影片！ ！
以上是html5和html4的差別有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
