html5和html4有什么區(qū)別

本篇文章給大家分享的是有關(guān)html5和html4有什么區(qū)別，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1 HTML5中的標(biāo)記方法

1.1 內(nèi)容類型（ContentType）

• HTML5的文件擴(kuò)展符與內(nèi)容類型保持不變。即擴(kuò)展符仍然為".html"或".htm"，內(nèi)容類型仍然為“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>（不區(qū)分大小寫）

在H5中，刻意不使用版本聲明，一份文檔將會適用所有版本的HTML。

另外，當(dāng)使用工具時，也可以在DOCTYPE聲明方式中加入SYSTEM識別符，聲明方法如下：

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

1.3 指定字符編碼

• HTML4

使用meta元素的形式指定文件中的字符編碼(通過 content元素的屬性來指定)，如下所示：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

• HTML5

使用對<meta>元素直接追加charset屬性的方式來指定字符編碼。

<meta charset="UTF-8">

注意：兩種方法都有效，但是不能同時混合使用兩種方式，從H5開始，對于文件的字符編碼推薦使用UTF-8。

2 HTML5確保的兼容性

2.1 可以省略標(biāo)記的元素

（1）不允許寫結(jié)束標(biāo)記的元素（即不允許使用開始標(biāo)記與結(jié)束標(biāo)記將元素括起來的形式,只允許使用“<元素/>”的形式 ）

area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

（2）可以省略結(jié)束標(biāo)記的元素

li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

（3）可以省略全部標(biāo)記的元素（指該元素可以完全被省略）

html、head、body、colgroup、tbody

 注意：即使標(biāo)記被省略了，該元素還是以隱式的方式存在。例如省略不寫body元素時，再文檔結(jié)構(gòu)中它還是存在的，可以使用document.body訪問。

2.2 具有boolean值的屬性

<!--只寫屬性不寫屬性值代表屬性為true-->

<input type="checkbox" checked>

<!--不寫屬性代表屬性為false-->

<input type="checkbox">

<!--，屬性值=屬性名,代表屬性為true-->

<input type="checkbox" checked="checked">

<!--，屬性值=空字符串，代表屬性為true-->

<input type="checkbox" checked=" ">

2.3 省略引號

（1）在指定屬性值的時候，屬性值兩邊加引號時，既可以用雙引號也可以用單引號。

（2）H5在此基礎(chǔ)上做了一些改進(jìn)，當(dāng)屬性值不包括空字符串、”<“、”>“、”=“、單引號、雙引號等字符時，屬性值兩邊的引號可以省略。 如下所示

<input type="text">     <input type='text'>       <input type=text>

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

3.1新增的結(jié)構(gòu)元素

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：表示必須輸入數(shù)值的文本輸入框

（4）range：表示必須輸入一定范圍內(nèi)數(shù)字值的文本輸入框

（5）Date Pickers：H5擁有多個可供選擇日期和時間的新型輸入文本框

1. date：選取日、月、年

2 .month：選取月、年

3. week：選取周和年

4. time：選取時間（小時和分鐘）

5. datetime：選取時間、日、月、年（UTC時間）

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屬性進(jìn)行代替。

（2）不再使用frame框架

如：frameset、frame、noframes。

由于frame框架對網(wǎng)頁可用性存在負(fù)面影響，在H5中已不支持frame框架，只支持iframe框架或者由服務(wù)器方創(chuàng)建的由多個頁面組成的復(fù)合頁面的形式，同時將這三個元素廢除。

（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元素相結(jié)合的方式代替

5 .listing.元素，由pre元素代替

6. xmp元素，由code元素代替

7. nextid元素，由GUIDS元素代替

8. plaintext元素，使用“text/plain”MIMEL類型代替

》

4.全局屬性

所謂全局屬性，是指可以對任何元素都使用的屬性。

4.1 contentEditable屬性

（1）主要功能

允許用戶編輯元素中的內(nèi)容，所以該元素必須是可以獲得鼠標(biāo)焦點(diǎn)的元素，而且在點(diǎn)擊鼠標(biāo)后要向用戶提供一個插入符號，提示用戶該元素中的內(nèi)容循序編輯

（2）值

該屬性為一個布爾值屬性，可以被指定被true或false。

（3）隱藏的inhert狀態(tài)

當(dāng)該屬性未被指定時，則由inherit狀態(tài)來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。

（4）isContentEditable屬性

當(dāng)元素可編輯時，該屬性值為true，否則為false。

4.2 designMode屬性

（1）功能

用來指定整個頁面是否可編輯，當(dāng)頁面可編輯時，頁面中任何支持contentEditable屬性的元素都變成了可編輯狀態(tài)。

（2）值

該屬性有兩個值，“ on ”（頁面可編輯）和“ off ”（頁面不可編輯）。

（3）該屬性只能在Javascript腳本中被編輯修改

document.designMode = " on ";

（4）瀏覽器支持

1.IE8：出于安全考慮，不允許使用該屬性讓頁面進(jìn)入編輯狀態(tài)。

2.IE9：允許使用該屬性讓頁面進(jìn)入編輯狀態(tài)。

3.Chorme3 和 Safari：使用 。內(nèi)嵌frame的方式，該內(nèi)嵌frame是可編輯的。

4.Firefox 和 Opera：允許使用該屬性讓頁面進(jìn)入編輯狀態(tài)。

4.3 hidden屬性

（1）功能

通知瀏覽器不渲染該元素，使該元素處于不可見狀態(tài)。

（2）值

布爾值屬性，為 true 或 false。

4.4 spellcheck屬性

spellcheck屬性是H5針對input元素（type=text）與textarea這兩個文本輸入框提供的一個新的屬性。

（1）功能

對用戶輸入的文本內(nèi)容進(jìn)行拼寫和語法檢查.

（2）值

布爾值，true 或 false。

（3）注意

1.必須聲明屬性值為true或false。

2.如果元素的 readOnly 屬性或 disabled 屬性設(shè)為 true，則不執(zhí)行拼寫檢查。

（4）瀏覽器支持情況

目前除了IE之外，F(xiàn)irefox、Chorme、Safari、Opera等瀏覽器都對該屬性提供了支持。

4.5 tabindex屬性

每一個控件的tabindex表示該控件是第幾個被訪問到的。（敲擊Tab鍵）

（1）如今控件的遍歷順序是由元素在頁面上所處位置決定的，所以就不再需要了。

（2）另一個作用

在默認(rèn)情況下，只有鏈接元素與表單元素可以通過按鍵獲取焦點(diǎn)。如果對其他元素使用該屬性后，也能讓該元素獲得焦點(diǎn)。把元素的tabindex值設(shè)為負(fù)值（通常為-1）后，可以通過編程的方式讓元素獲得焦點(diǎn)，并且在按下Tab鍵時該元素不會獲得焦點(diǎn)。

以上就是html5和html4有什么區(qū)別，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。