HTML5與HTML4的區別

時間 2020-05-06

標籤 html5 html html4 區別欄目 HTML5 简体版

原文原文鏈接

HTML5和HTML4在基本語法上的區別？

1. 內容類型（ContentType）

HTML5中的文件擴展符仍然爲".html" 或 ".htm",內容類型仍然爲"text/html"。javascript

2. DOCTYPE聲明

HTML4：html

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

HTML5:java

<!DOCTYPE html>

//當使用工具時，也能夠在DOCTYPE聲明方式中加入SYSSTEM識別符，聲明方法以下：

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

3. 指定的字符編碼

HTML4中使用meta元素的形式指定文件中的字符編碼，以下所示：web

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

HTML5中，可使用<meta>元素直接追加charsetd屬性的方式來指定字符編碼，以下所示：canvas

<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>。ruby

header元素表示頁面中一個內容區塊或整個頁面的標題。<header>...</header>,HTML4中代碼示例<div>...</div>。app

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）。

參考資料：