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 權威指南》

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/17840.html

標籤：其他

上一篇：博客園文章著作權宣告(js自動生成)

下一篇：HTML 事件屬性

HTML5與HTML4的區別