HTML5與HTML4的區別

時間 2020-07-25

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

原文原文鏈接

HTML5與HTML4的區別
HTML5中的語法改變
一、內容類型（ContentType）
　　首先，HTML5的文件擴展符與內容類型保持不變。也就是說，擴展符仍然爲「.html」或者「.htm」,
內容類型（ContentType）仍然爲「text/html」。
二、DOCTYPE聲明
　　DOCTYPE聲明是HTML文件中必不可少的，它位於文件第一行。在HTML4中，她的聲明方法以下：html

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

在HTML 5中，刻意不使用版本聲明，一份文檔將會適用全部版本的HTML。HTML 5中的DOCTYPE聲明方法（不區分大小寫）以下：編程

<!DOCTYPE html>

二、指定字符編碼
在HTML 4中，使用meta元素的形式指定文件中的字符編碼，以下所示：canvas

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

在HTML 5中，可使用對<meta>元素直接追加charset屬性的方式來指定字符編碼，以下所示：瀏覽器

<meta charset="UTF-8">

兩種方法都有效，能夠繼續使用前面一種方式（經過content元素的屬性來指定），可是不能同時混合使用兩種方式。
從HTML 5開始，對於文件的字符編碼推薦使用UTF-8。緩存

新增的元素和廢除的元素
一、新增的結構元素
在HTML 5中，新增如下與結構相關的元素。
(1) section元素
section元素表示頁面中的一個內容區塊，好比章節、頁眉、頁腳或頁面中的其餘部分。
它能夠與h一、h二、h三、h四、h五、h6等元素結合使用，標示文檔結構。
HTML 5中的代碼示例：安全

<section>...</section>

HTML4中的代碼示例：ruby

<div>...</div>

(2) article元素
article元素表示頁面中的一塊與上下文不相關的獨立內容，譬如博客中的一篇文章或報紙中的一篇文章。
HTML 5中的代碼示例：服務器

<article>...</article>

HTML4中的代碼示例：app

<div>...</div>

(3) aside元素
aside元素表示article元素的內容以外的、與article元素的內容相關的輔助信息。
HTML 5中的代碼示例：框架

<aside>...</aside>

HTML4中的代碼示例：

<div>...</div>

(4) header元素
header元素表示頁面中一個內容區塊或整個頁面的標題。
HTML 5中的代碼示例：

<header>...</header>

HTML4中的代碼示例：

<div>...</div>

(5) footer元素
footer元素表示整個頁面或頁面中一個內容區塊的腳註。
通常來講，它會包含創做者的姓名、創做日期以及創做者聯繫信息。
HTML 5中的代碼示例：

<footer>...</footer>

HTML4中的代碼示例：

<div>...</div>

(6) nav元素
nav元素表示頁面中導航連接的部分。
HTML 5中的代碼示例：

<nav>...</nav>

HTML4中的代碼示例：

<div>...</div>

(7) figure元素
figure元素表示一段獨立的流內容，通常表示文檔主體流內容中的一個獨立單元。
使用figcaption元素爲figure元素組添加標題。
HTML 5中的代碼示例：

<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949...</p>
</figure>

HTML4中的代碼示例：

<dl>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</dl>

(8) main元素
main元素表示網頁中的主要內容。
主內容區域意指與網頁標題或應用程序中本頁面主要功能直接相關或進行擴展的內容。
HTML 5中的代碼示例：

<main>...</main>

HTML4中的代碼示例：

<div>...</div>

新增的其餘元素
除告終構元素外，在HTML5中，還新增如下元素。
(1) video元素
video元素用於定義視頻，好比電影片斷或其餘視頻流。
HTML 5中的代碼示例：

<video src="movie.ogg" controls="controls">video元素</video>

HTML 4中的代碼示例：

<object type="video/ogg" data="movie.ogv">
       <param name="src" value="movie.ogv">
</object>

(2) audio元素
audio元素用於定義音頻，好比音樂或其餘音頻流。
HTML 5中的代碼示例：

<video src="someaudio.wav">audio元素</video>

HTML 4中的代碼示例：

<object type="application/ogg" data="someaudio.wav">
        <param name="src" value="someaudio.wav">
</object>

(3) embed元素
embed元素用來插入各類多媒體，格式能夠是Midi、Wav、AIFF、AU、MP3等。
HTML 5中的代碼示例：

<embed src="horse.wav" />

HTML 4中的代碼示例：

<object data="flash.swf" type="application/x-shockwave-flash"></object>

(4) mark元素
mark元素主要用來在視覺上向用戶呈現那些須要突出顯示或高亮顯示的文字。
mark元素的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。
HTML 5中的代碼示例：

<mark></mark>

HTML 4中的代碼示例：

<span></span>

(5) progress元素
progress元素表示運行中的進程，可使用progress元素來顯示JavaScript中耗費時間的函數的進程。
HTML 5中的代碼示例：

<progress></progress>

這是HTML 5中的新增功能，故沒法用HTML 4代碼來實現。

(6) mark元素
meter元素表示度量衡，僅用於已知最大值和最小值的度量。
必須定義度量的範圍，既能夠在元素的文本中，也能夠在min/max屬性中定義。
HTML 5中的代碼示例：

<meter></meter>

HTML 4中的代碼示例：
這是HTML 5中的新增功能，故沒法用HTML 4代碼來實現。

(7) time元素
time元素用於表示日期或時間，也能夠同時表示二者。
HTML 5中的代碼示例：

<time></time>

HTML 4中的代碼示例：

<span></span>

(8) ruby元素
ruby元素表示ruby註釋（中文註音或字符）。
HTML 5中的代碼示例：

<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

這也是HTML 5中的新增功能。

(9) rt元素
rt元素表示字符（中文註音或字符）的解釋或發音。
HTML 5中的代碼示例：

<ruby>漢 <rt> ㄏㄢˋ </rt></ruby>

這是HTML 5中的新增功能。

(10) rp元素
rp元素在ruby註釋中使用，以定義不支持ruby元素的瀏覽器所顯示的內容。
HTML 5中的代碼示例：

<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

這是HTML 5中的新增功能。

(11) wbr元素
wbr元素表示軟換行。wbr元素與br元素的區別是：br元素是此處必須換行，而wbr元素意思就是瀏覽器窗口或
父級元素的寬度足夠寬時（不必換行時），不進行換行，而當寬度不夠時，主動在此處進行換行。
wbr元素好像對字符型的語言用處比較大，可是對於中文，貌似沒多大用處。
HTML 5中的代碼示例：

<p> To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object. </p>

這是HTML 5中的新增功能。

(12) canvas元素
canvas元素表示圖形，好比圖表和其餘圖像。這個元素自己沒有行爲，僅提供一塊畫布，但把一個繪圖API展示給客戶端JavaScript，以使腳本可以把想繪製的東西繪製到這塊畫布上。
HTML 5中的代碼示例：

<canvas id="myCanvas" width="200" height="200"></canvas>

HTML 4中的代碼示例：

<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200">
</object>

(13) command元素
command元素表示命令按鈕，好比單選按鈕、複選框或按鈕。
HTML 5中的代碼示例：

<command onclick=cut()" label="cut">

這是HTML 5中的新增功能。

(14) details元素
details元素表示用戶要求獲得而且能夠獲得的細節信息。它能夠與summary元素配合使用。summary元素提供標題或圖例。
標題是可見的，用戶點擊標題時，會顯示細節信息。summary元素應該是details元素的第一個子元素。
HTML 5中的代碼示例：

<details>
   <summary>HTML5</summary> This document teaches you everything you have to learn about HTML5. </details>

(15) datalist元素
datalist元素表示可選數據的列表，與input元素配合使用，能夠製做出輸入值的下拉列表。
HTML 5中的代碼示例：

<datalist></datalist>

這是HTML 5中的新增功能。

(16) datagrid元素
datagrid元素表示可選數據的列表，它以樹形列表的形式顯示。
HTML 5中的代碼示例：

<datagrid></datagrid>

這是HTML 5中的新增功能。

(17)keygen元素
keygen元素表示生成密鑰。
HTML 5中的代碼示例：

<keygen>

這是HTML 5中的新增功能。

(18)output元素
output元素表示不一樣類型的輸出，好比腳本的輸出。
HTML 5中的代碼示例：

<output></output>

HTML 4中的代碼示例：

<span></span>

(19)source元素
source元素爲媒介元素（好比<video>和<audio>）定義媒介資源。
HTML 5中的代碼示例：

<source>

HTML 4中的代碼示例：

<param>

(20) menu元素
menu元素表示菜單列表。當但願列出表單控件時使用該標籤。
HTML 5中的代碼示例：

<menu>
  <li><input type="checkbox" />Red</li>
  <li><input type="checkbox" />blue</li>
</menu>

在HTML 4中，menu元素不被推薦使用。

(21) dialog元素
dialog元素表示對話框。
HTML 5中的代碼示例：

<dialog></dialog>

新增的input元素的類型
HTML 5中新增不少input元素的類型，現列舉以下：
·email：email類型表示必須輸入e-mail地址的文本輸入框。
·url：url類型表示必須輸入URL地址的文本輸入框。
·number：number類型表示必須輸入數值的文本輸入框。
·range：range類型表示必須輸入必定範圍內數字值的文本輸入框。
·Date Pickers：HTML 5擁有多個可供選取日期和時間的新型輸入文本框。
·date：選取日、月、年。
·month：選取月、年。
·week：選取周和年。
·time：選取時間（小時和分鐘）。
·datetime：選取時間、日、月、年（UTC時間）。
·datetime-local：選取時間、日、月、年（本地時間）。

廢除的元素
因爲各類緣由，在HTML 5中廢除了不少元素，簡單介紹以下。
1.能使用CSS替代的元素
對於basefont、big、center、font、s、strike、tt、u等元素，因爲它們的功能都是純粹爲畫面展現服務的，而HTML 5中提倡把畫面展現性功能統一放在CSS樣式表中統一編輯，因此將這些元素廢除，使用編輯CSS、添加CSS樣式表的方式進行替代。其中font元素容許由「所見即所得」的編輯器進行插入，s元素、strike元素能夠由del元素進行替代，tt元素能夠由CSS的font-family屬性進行替代。
2.再也不使用frame框架
對於frameset元素、frame元素與noframes元素，因爲frame框架對網頁可用性存在負面影響，在HTML 5中已不支持frame框架，只支持iframe框架，或者由服務器方建立的由多個頁面組成的複合頁面的形式，同時將這三個元素廢除。
3.只有部分瀏覽器支持的元素
對於applet、bgsound、blink、marquee等元素，因爲只有部分瀏覽器支持這些元素，特別是bgsound元素以及marquee元素，只被Internet Explorer所支持，因此在HTML 5中被廢除。其中applet元素可由embed元素或object元素進行替代，bgsound元素可由audio元素進行替代，marquee能夠由JavaScript編程的方式所替代。
4.其餘被廢除的元素
其餘被廢除元素還有：
·廢除rb元素，使用ruby元素替代。
·廢除acronym元素，使用abbr元素替代。
·廢除dir元素，使用ul元素替代。
·廢除isindex元素，使用form元素與input元素相結合的方式替代。
·廢除listing元素，使用pre元素替代。
·廢除xmp元素，使用code元素替代。
·廢除nextid元素，使用GUIDS替代。
·廢除plaintext元素，使用"text/plian"MIME類型替代。

新增的屬性和廢除的屬性
新增的屬性
1.表單相關的屬性
新增的與表單相關的元素以下：
·能夠對input（type=text）、select、textarea與button元素指定autofocus屬性。它以指定屬性的方式讓元素在畫面打開時自動得到焦點。
·能夠對input元素（type=text）與textarea元素指定placeholder屬性，它會對用戶的輸入進行提示，提示用戶能夠輸入的內容。
·能夠對input、output、select、textarea、button與fieldset指定form屬性，聲明它屬於哪一個表單，而後將其放置在頁面上任何位置，而不是表單以內。
·能夠對input元素（type=text）與textarea元素指定required屬性。該屬性表示在用戶提交的時候進行檢查，檢查該元素內必定要有輸入內容。
·爲input元素增長了幾個新的屬性：autocomplete、min、max、multiple、pattern與step。同時還有一個新的list元素與datalist元素配合使用。datalist元素與autocomlete屬性配合使用。multiple屬性容許在上傳文件時一次上傳多個文件。
·爲input元素與button元素增長了新屬性formaction、formenctype、formmethod、formnovalidate與formtarget，它們能夠重載form元素的action、enctype、method、novalidate與target屬性。爲fieldset元素增長了disabled屬性，用於把它的子元素設爲disabled（無效）狀態。
·爲input元素、button元素、form元素增長了novalidate屬性，該屬性能夠取消提交時進行的有關檢查，表單能夠被無條件提交。
·爲全部可以使用標籤（label元素）的表單元素（包括非隱藏的input元素（type屬性值不等於hidden）、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素）定義一個labels屬性，屬性值爲一個NodeList對象，表明該元素所綁定的標籤元素所構成的集合。
·能夠在標籤（label元素）內部放置一個表單元素，而且經過該標籤的control屬性訪問該表單元素。
·針對input元素與textarea元素，在HTML 5中增長SelectionDirection屬性。當用戶在這兩個元素中用鼠標選取部分文字時，可使用該屬性來獲取選取方向。當用戶正向選取文字時，該屬性值爲「forward」，當用戶反向選取文字時，該屬性值爲「backward」。當用戶沒有選取任何文字時，該屬性值爲「forward」。
·對複選框（checkbox元素）添加indeterminate屬性，以說明覆選框處於「還沒有明確是否選取」狀態。
·對類型爲image的input元素添加用於指定圖片按鈕中圖片高度的height屬性與圖片寬度的width屬性。
·對textarea元素新增用於限定可輸入文字個數的maxlength屬性與用於指定表單提交時是否在文字換行處添加換行符的wrap屬性。

2.連接相關的屬性
新增的與連接相關的屬性以下：
·爲a與area元素增長了media屬性、download屬性以及ping屬性，其中media屬性規定目標URL是爲何類型的媒介/設備進行優化的，download屬性用於讓用戶下載目標連接所指向的資源，而不是直接打開該目標連接，這些屬性均只能在href屬性存在時使用。
·爲area元素增長了hreflang屬性與rel屬性，以保持與a元素、link元素的一致。
·爲link元素增長了新屬性sizes。該屬性能夠與icon元素結合使用（經過rel屬性），該屬性指定關聯圖標（icon元素）的大小。
·爲base元素增長了target屬性，主要目的是保持與a元素的一致性。

3.其餘屬性
除了上面介紹的與表單和連接相關的屬性外，HTML 5還增長了下面的屬性：
·爲ol元素增長start屬性與reversed屬性，其中start屬性定義列表的開始編號，reversed屬性指定列表倒序顯示。
·爲meta元素增長charset屬性，由於這個屬性已經獲得普遍支持，並且爲文檔的字符編碼的指定提供了一種比較良好的方式。
·爲menu元素增長了兩個新的屬性——type與label。label屬性爲菜單定義一個可見的標註，type屬性讓菜單能夠以上下文菜單、工具條、與列表菜單三種形式出現。
·爲style元素增長scoped屬性，用來規定樣式的做用範圍，譬如只對頁面上某個樹起做用。
·爲script元素增長async屬性，它定義腳本是否異步執行。
·爲html元素增長屬性manifest，開發離線Web應用程序時它與API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息。
·爲iframe元素增長三個屬性——sandbox、seamless與srcdoc，用來提升頁面安全性，防止不信任的Web頁面執行某些操做。