html5和html4的差別有哪些

區別：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

• #HTML4

 <！ DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

• ##HTML5

 <！ DOCTYPE html>（不區分大小寫）

在H5中，刻意不使用版本宣告，一份文件將會適用所有版本的HTML。

另外，當使用工具時，也可以在DOCTYPE宣告方式中加入SYSTEM識別符，宣告方法如下：

<！ DOCTYPE HTML SYSTEM "about:legacy-compat">(不區分大小寫，引號不區分是單引號還是雙引號)

1.3 指定字元編碼

• #HTML4

 使用meta元素的形式指定檔案中的字元編碼(透過content元素的屬性來指定)，如下：

•  HTML5

使用對元素直接追加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中文網其他相關文章！