本文選譯自:W3C Working Group Note: HTML5 Differences from HTML4。html
解釋一下W3C Working Group Note,做爲「工做組筆記」 發佈,意味着它是一個草稿版文檔,可能被其它文檔更新、替換或廢棄。但因爲翻譯時草稿只發布了不到二十天,本文有很好的時效性。也做爲比較性質的文獻,比起HTML5的標準它更容易理解,可讓人快速地理解HTML5的變化輪廓。html5
本文檔覆蓋W3C的HTML5標準,它不包含W3C HTML5.1標準或WHATWG HTML標準。canvas
HTML5是這樣被定義的:能向後兼容目前UA處理內容的方式。爲了讓語言更簡單,一些老的元素和Attribute被捨棄。好比一些純粹用於展示的元素(譯註:即非語義化的元素,如big
)或Attribute被捨棄,由於他們更適合用CSS來處理。
但UA依然能夠支持老舊的屬性和元素。這就是爲何HTML5標準清楚地劃分了給開發的要求和給UA的要求。好比,開發者不該當使用plaintext
元素,但UA須要兼容plaintext
元素。
既然HTML5已區分對UA和對開發者的要求,不再需將一些特性標記爲deprecated(不同意使用)了。瀏覽器
HTML5定義了HTML5語法,日前已普遍兼容於網絡上HTML4和XHTML1的文檔,但不兼容大部分HTML4中的深奧SGML特性,大部分UA都不支持它們,好比處理指令 (processing instructions) 和標籤簡寫 (shorthand markup)。
HTML5語法中同時定義瞭解析規則——包括異常的處理方式。這種解析規則可以普遍支持HTML4領域的實現,UA可使用這些規則來解析媒體類型爲text/html
的資源。緩存
下面是一個可以說明HTML語法的示例文檔:安全
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
另一個能夠被用於HTML的語法是XML。XML語法可兼容於XHTML文檔或實現。使用XML語法的文檔須要配套XML文檔的媒體類型如application/xhtml+xml
或application/xml
來使用,同時,元素須要遵循XML規則,被放到http://www.w3.org/1999/xhtml
命名空間中:ruby
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
HTML標準中要求開發聲明編碼方式,有這些方式能夠作到:網絡
Content-Type
<meta charset="UTF-8">
能夠用於聲明UTF-8編碼。這個新聲明替代了<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
,儘管後者依然可使用。XML語法中,開發須要按照XML標準來設置編碼。app
HTML5語法要求聲明Doctype,以確保瀏覽器以標準模式渲染頁面。Doctype沒有其餘用途。
HTML5語法中的Doctype聲明爲<!DOCTYPE html>
,不區分大小寫。
以前HTML4標準中的Doctype更長,由於HTML4語法是基於SGML的,須要引用DTD。而在新的HTML5標準中,不再須要引用DTD了(譯註:由於HTML5再也不基於SGML)。所以,doctype只是爲了確保文檔以標準模式渲染。
爲了支持舊有的標籤,可使用<!DOCTYPE html SYSTEM "about:legacy-compat">
做爲Doctype聲明。
HTML4.0、HTML 4.0一、XHTML 1.0、XHTML 1.1之類嚴格的Doctype,在HTML5中可使用,但不被提倡。
在XML語法中,可使用任何Doctype聲明或省略Doctype。使用XML媒體類型的文檔永遠會在標準模式中被解析。dom
HTML語法容許文檔內嵌MathML和SVG元素。
math
和svg
的開始標籤將會致使HTML解析器轉爲特殊的插入模式,以將元素和屬性放入合適的命名空間,並轉化大小寫,並支持XML中的空元素語法xmlns="http://www.w3.org/2000/svg"
)mtext
和foreignObject
,在這些元素內部你可使用HTML元素或者新的math
/svg
元素。一個使用了svg功能的例子以下:
<!doctype html> <title>SVG in text/html</title> <p> A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> </p>
⟨
和⟩
分別表明U+27E8
和U+27E9
(數學意義上的左右尖括號〈、〉),而非U+2329
和U+232A
(尖括號的舊有表示方法〈、 〉)。(譯註,見維基百科的說明)br
)容許有一個結尾反斜槓(trailing slash)&
在更多場景下不轉義<input autofocus>
就至關於<input autofocus="autofocus">
),即便這個屬性並不是boolean屬性<input id=" a ">
中的id再也不有效,同時<input value="">
中的value中的空行字符能夠被使用,而不須要使用實體來替代optgroup
結束標籤可選填colgroup
開始標籤可選填,HTML解析器會根據上下文補完如下標籤的引入是爲了用於更好的文檔結構:
section
表明通常意義上的文檔/app區塊,它應當與h1
~h6
等元素搭配使用,以標示文檔層級article
表明了獨立於文檔的一塊內容,好比blog入口或報刊文章main
表明了文檔/app的主體內容aside
表明了一些與頁面其它部分關聯性不那麼大的內容header
表明了一組介紹性或導航性質的輔助內容footer
表明了一個區塊的底部,能夠包含做者、版權等信息nav
表明了文檔中能夠導航的區塊figure
表明了表明了一個獨立的內容流figcaption
能夠用做內容流的標題template
能夠用於聲明一塊可用於克隆與插入的HTML片斷textarea
、script type="text/html"
、script type="text/template"
)其它的新標籤:
audio
和video
表明了多媒體元素,它們也提供了相應的API用於開發者定製UI,同時也提供了觸發UA展現其默認控件的方式。source
元素跟他們一同使用,用於有多類型的內容流的情形track
提供了audio
的文本軌道(譯註:包含字幕等)embed
用於插件內容mark
表明了一個文檔中須要標記或高亮的引用部分progress
表明了一個任務的完成程度meter
表明了一個度量,好比對磁盤空間的度量time
表明了時間/日期ruby
、rt
、rp
爲ruby表達式bdi
表明了一段隔絕於周圍元素的雙向書寫文本格式wbr
表明了可能斷行的部分canvas
用於渲染動態位圖datalist
與input
的list
屬性共同使用,能夠用於建立下拉選擇框控件<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
keygen
表明生成的密鑰對output
表明了一種輸出內容表單元素:
input
的type
屬性有了更多新值:tel
、search
、url
、email
、date
、time
、number
、range
、color
form
屬性可用於在input
、output
、select
、textarea
、button
、label
、object
、fieldset
元素上指定關聯的<form>
元素的id,不侷限於常規的層疊關係<table> <tr> <th>Key <th>Value <th>Action <tr> <td><form id=a><input name=a-key></form> <td><input form=a name=a-value> <td><button form=a name=a-action value=save>✓</button> <button form=a name=a-action value=delete>✗</button> ... </table>
input
、textarea
元素可以使用placeholder
屬性來幫助用戶填寫數據,注意,它不該當替代label元素的做用type="hidden"
的input
、select
、textarea
、button
可以使用autofocus
元素來制定自動得到焦點的元素input
、select
、textarea
有新屬性required
,表明了用戶須要填寫該字段,才能夠提交這個表單。select
的第一個元素應當爲沒有值的元素,以做爲空值的佔位符<label>Color: <select name=color required> <option value="">Choose one <option>Red <option>Green <option>Blue </select></label>
fieldset
標籤容許使用disabled
屬性,這將禁止全部子元素的交互;它同時還可使用name
以方便腳本獲取input
元素有了用於指明輸入限制的屬性autocomplete
, min
,max
, multiple
, pattern
及step
input type="image"
的元素有width
和height
屬性input
與textarea
元素有了dirname
以指明書寫方向(譯註:ltr或rtl)textarea
元素有了新的屬性,如maxlength
、minlength
、wrap
來控制最大輸入長度與提交時的斷行行爲form
元素有了novalidate
屬性來禁止默認的表單驗證行爲input
與button
元素有了formaction
, formenctype
, formmethod
, formnovalidate
與formtarget
屬性,用於覆蓋繼承自form的action
, enctype
, method
, novalidate
及target
屬性input
元素有了minlength
和maxlength
屬性非表單元素的新屬性:
area
元素同a
和link
元素同樣有了新的hreflang
、type
、rel
屬性base
元素同a
同樣能夠有target
屬性meta
元素有了charset
屬性script
元素有了async
屬性將影響腳本的加載與運行html
元素有manifest
屬性,可用於指定緩存行爲link
元素有了新的屬性sizes
,能夠指定不一樣的大小的faviconol
元素有了新的屬性reversed
,它表明着列表的順序是逆序的iframe
元素有了sandbox
和srcdoc
屬性以支持沙盒安全保護object
元素有了typemustmatch
元素以保證更安全的嵌入順序img
元素有crossorigin
屬性以在canvas中支持CORSHTML4中有一些所有標籤均可以使用的屬性,在HTML5中叫作全局屬性,如:accesskey
, class
, dir
, id
, lang
, style
, tabindex
及title
。此外,XHTML 1.0僅容許一些標籤上的xml:space
屬性設置。
有這些新的全局屬性:
contenteditable
data-*
表明了開發定製的屬性,這種格式能夠避免與未來的新HTML屬性衝突hidden
屬性表明一個元素再也不與文檔相關role
及aria-*
用於支持無障礙訪問spellcheck
用於指定內容是否容許進行拼寫檢查translate
用於指定內容是否應當翻譯b
元素如今表示一段增強表示的文本,但並不表達額外的重要性、暗示須要加劇的語氣和聲調(譯註:與em
的語義區分開來)。好比文檔摘要裏的關鍵字、產品評價裏的產品名字、能夠與之交互的文本等等i
元素如今表明了一段須要使用不一樣的語氣或聲調的文本,或表明了不一樣品類的文本,如分類學名稱、科技術語、其餘語言中的方言或俚語等等s
元素表明了再也不準確/相關的元素small
元素表明了旁註,如免責聲明、注意事項、法律限制或版權聲明strong
元素表明了重要性,而非着重強調u
元素 represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.(譯註:沒理解這個元素的語義)address
元素的範圍現已由最近的祖先article
/body
元素決定,表明了後者的聯繫信息script
標籤能夠被用於自定義數據塊blockquote
元素依然表示從另一個來源裏摘錄的內容,但如今容許包含footer
或cite
元素dl
元素如今表明了有關聯的命名-值的列表,但再也不適用於對話了hr
元素表明了段與段之間的主題意義上的區隔(譯註:即暗示段落主題已經發生了變化)noscript
元素 represents nothing if scripting is enabled, and represents its children if scripting is disabled. It is used to present different markup to user agents that support scripting and those that don't support scripting, by affecting how the document is parsed.(譯註:沒看出來先後有什麼區別)(譯註:大部分是限制放寬,略)
開發不該當使用這些廢棄的元素了,可是UA仍應當支持他們。
這些元素被廢棄,由於他們僅僅是用於展示層面的標籤,他們用CSS處理更好:basefont
、big
、center
、font
、strike
、tt
。
這些元素被廢棄,由於他們有損可訪問性與可用性:frame
、frameset
、noframes
這些元素被廢棄,由於他們罕有人使用、有其餘元素替代或形成了迷惑:
acronym
被abbr
取代applet
被object
取代isindex
元素被表單元素取代dir
被ul
取代最後,noscript
僅僅能夠在HTML語法中被使用,它不被XML語法容許。
由於須要在視覺上隱藏它內部的內容,同時不容許noscript
內部內容有運行腳本、應用樣式、擁有能夠提交的表單、加載資源等行爲,因此noscript
內部的內容將被看成純文本解析。
這些屬性被廢棄,你能夠在這裏找到你可以用以替代的屬性或標籤。
a
廢棄屬性:shape
, coords
, rev
, charset
area
廢棄屬性:nohref
form
廢棄屬性:accept
head
廢棄屬性:profile
html
廢棄屬性:version
iframe
廢棄屬性:longdesc
img
廢棄屬性:name
input
廢棄屬性:usemap
link
廢棄屬性:target
, rev
, charset
meta
廢棄屬性:scheme
object
廢棄屬性:archive
, classid
, codebase
, codetype
, declare
, standby
param
廢棄屬性:valuetype
, type
table
廢棄屬性:summary
td
廢棄屬性:axis
, abbr
, scope
th
廢棄屬性:axis
此外,HTML再也不包含純用於表現的屬性,它們應當被CSS替代:
caption
, iframe
, img
, input
, object
, legend
, table
, hr
, div
, h1
, h2
, h3
, h4
, h5
, h6
, p
, col
, colgroup
, tbody
, td
, tfoot
, th
, thead
和tr
的align
屬性被廢棄body
的alink
, link
, text
, background
屬性被廢棄table
, tr
, td
, th
和body
的bgcolor
屬性被廢棄object
的border
屬性被廢棄table
的cellpadding
和cellspacing
屬性被廢棄col
, colgroup
, tbody
, td
, tfoot
, th
, thead
和tr
的char
和charoff
屬性被廢棄br
的clear
屬性被廢棄dl
, ol
和ul
的compact
屬性被廢棄table
的frame
屬性被廢棄iframe
的frameborder
屬性被廢棄td
和th
的height
屬性被廢棄img
和object
的hspace
和vspace
屬性被廢棄iframe
的marginheight
和marginwidth
屬性被廢棄hr
的noshade
屬性被廢棄td
和th
的nowrap
屬性被廢棄table
的rules
屬性被廢棄iframe
的scrolling
屬性被廢棄hr
的size
屬性被廢棄li
,和ul
的type
屬性被廢棄col
, colgroup
, tbody
, td
, tfoot
, th
, thead
和tr
的valign
屬性被廢棄hr
, table
, td
, th
, col
, colgroup
和pre
的width
屬性被廢棄下列屬性容許使用,但不鼓勵被使用:
img
元素上的border
屬性。若是使用,要求使用0做爲值。應當替代爲CSS控制script
元素上的language
屬性。若是使用,要求使用JavaScript
(不區分大小寫),同時不該當與type
屬性衝突。因爲它沒有實際意義,開發應當省略它a
的name
屬性。開發應當使用id
來替代它內容模型即元素的嵌套規則。
內容模型層面,HTML4有這些混亂的規則:
p
);body
);div
);table
dl
);p
屬於block-level,但內容模型爲inline。display
屬性相關,同時沒有跟HTML的內容模型有任何關聯HTML5的內容模型再也不使用"inline"和"block-level"的方式區分元素,爲避免與CSS相似概念的混淆。然而,比起HTML4,它增長了更多類別,一個元素能夠屬於任意個數的類別。
HTML5中劃分出來的類別以下:
link
、script
span
、div
、文本節點。它接近於HTML4層面的block-level和inline的混合aside
、section
h1
span
、img
、文本節點。它接近於HTML4的inline概念img
、iframe
、svg
a
、button
、label
與HTML4有很大不同的一點是,HTML5中再也不出現僅僅容許嵌套"block-level"的類別了(譯註:由於HTML5已經不存在"block-level"類別的標籤了)。
好比,body
容許Flow類別的內容。這個規則比起HTML4 Strict,它更接近HTML4 Transitional。
更多變化包括:
address
元素容許嵌套Flow類別的標籤,但不容許嵌套Heading、Section類別的元素,不容許嵌套header
、footer
、另外一個address
object
出如今head
內部,但HTML5不容許noscript
元素由block-level類別轉爲Phrasing類別table
, thead
, tbody
, tfoot
, tr
, ol
, ul
及dl
元素容許爲空table
元素容許tfoot
元素做爲它的最後一個子元素caption
元素容許嵌套Flow類別的元素,但不容許嵌套table
元素th
元素容許嵌套Flow類別的元素,但不容許嵌套header
元素、footer
元素、Sectioning類別或Heading類別的元素a
的內容模型爲transparent,它與它的父級擁有一樣的內容模型,這意味着在a
的父級容許Flow類別的子元素的時候,a
能夠嵌套div
元素。ins
和del
元素的內容模型爲transparent。object
元素的param
子元素之後,內容模型爲transparentobject
內嵌套embed
的場景)map
元素的內容模型爲transparentmap
做爲祖先節點的時候,area
元素被看成Phrasing類別的元素,同時area
再也不須要成爲map
的直接子節點legend
元素再也不是fieldset
必須的子節點了HTML5引進、修改、擴展、廢棄了不少API。
HTML5爲了幫助建立Web App,引入了一些新的接口:
video
和audio
的播放流程控制、同步多個媒體標籤、字幕等接口setCustomValidity
)registerProtocolHandler
和registerContentHandler
)contenteditable
屬性,容許編輯任意元素的接口History
接口)atob()
及btoa()
)AddSearchProvider()
及IsSearchProviderInstalled()
)External
接口print()
)(譯註:下列接口是很早就有,屬於BOM中的共識部分,直到HTML5才加入標準)
Location
接口)setTimeout()
及setInterval()
)alert()
,confirm()
,prompt()
)Window
接口Navigator
接口以下DOM 2的接口已被改動:
document.title
的返回值將會摺疊多個空格符document.domain
容許賦值,所以能夠改變文檔的script origindocument.open()
能夠清空文檔(若是調用時僅有兩個或如下參數),或像是window.open()
同樣表現(若是調用時有三個或四個參數)。在前種調用方式下,拋出一個XML異常document.close()
、document.write()
、document.writeln()
拋出一個XML異常。後二者容許可變參數,他們能夠在文檔解析階段往文檔流中加入文本,並隱式調用document.open()
。在一些情形下,他們均可能會被忽略document.getElementsByName()
將返回知足name
符合參數的全部HTML元素HTMLFormElement
的elements
接口將返回HTMLFormControlsCollection
,包括button
, fieldset
, input
, keygen
, object
, output
, select
及textarea
HTMLSelectElement
的add()
接口容許第二個參數爲數字HTMLSelectElement
的remove()
接口在參數越界的時候,將刪除集合中第一個元素click()
、focus()
及blur()
接口了a
及area
stringify爲它們的href
屬性HTMLAnchorElement
和HTMLAreaElement
對應的toString
方法返回它們的href屬性)DOM Level 2中有個HTMLDocument
接口,繼承自Document
接口,並提供了文檔內部的元素(僅侷限於HTML範疇內)訪問接口。
HTML5將這些成員移動到了Document
接口中,並在特定方向上拓展了它。因爲各種文檔(譯註:XML、HTML五、SVG等等文檔)都使用了Document
接口,而HTML5範疇內的元素在全部類別的文檔中均可用,所以這些接口在SVG等文檔中均可以很好的運做。
此外,Document
接口還有一些新成員:
location
、lastModified
及readyState
:用於幫助管理文檔的元數據(metadata)dir
、head
、embeds
、plugins
、scripts
:用於獲取DOM樹的不一樣部分activeElement
及hasFocus
接口,用於判斷一個元素是否得到了焦點designMode
、execCommand()
、queryCommandEnabled()
、queryCommandIndeterm()
、queryCommandState()
、queryCommandSupported()
、queryCommandValue()
onreadystatechange
是惟一一個在Document
上纔有效的接口在腳本中修改了HTMLDocument
原型的那部分仍是能夠正常運轉的,因爲window.HTMLDocument
也將返回Document
接口。
HTMLElement
接口也在HTML5中獲得了擴展:
data-*
的屬性的接口dataset
click()
、focus()
、blur()
接口容許腳本模擬用戶點擊與切換焦點accessKeyLabel
給予UA賦予該元素的快捷鍵,開發能夠經過accesskey
屬性來影響UA的該行爲isContentEditable
返回元素是否能夠編輯translate
、hidden
、tabIndex
、accessKey
、contentEditable
、spellcheck
、style
HTMLElement
上定義接口被移動到了Element
接口中:id
、className
、classList
、getElementsByClassName()
DOM Level 2中的其它接口也獲得了擴展。
接口 | 新增接口 |
HTMLOptionsCollection |
legacy caller、setter creator、add() 、remove() 、selectedIndex |
HTMLFormElement |
經過name或index索引的getter、checkValidity() |
HTMLSelectElement |
getter、setter creator、item() 、namedItem() 、labels 、selectedOptions 及各類validate接口函數 |
HTMLOptionElement |
構造器new Option() |
HTMLInputElement |
files 、height 、indeterminate 、list 、valueAsDate 、valueAsNumber 、width 、stepUp() 、stepDown() 、labels 、文本選取區域API及各類validate接口函數 |
HTMLTextAreaElement |
textLength 、labels 、文本選取區域API及各類validate接口函數 |
HTMLButtonElement |
labels 及各類validate接口函數 |
HTMLLabelElement |
control |
HTMLFieldSetElement |
type 、elements 及各類validate接口函數 |
HTMLAnchorElement |
relList 、text |
HTMLLinkElement |
relList |
HTMLAreaElement |
relList |
HTMLImageElement |
構造器new Image() 、naturalWidth 、naturalHeight 、complete |
HTMLObjectElement |
contentWindow 、legacy caller及各類validate接口函數 |
HTMLMapElement |
images |
HTMLTableElement |
createTBody() |
HTMLIFrameElement |
contentWindow |
此外:
HTMLLinkElement
和HTMLStyleElement
實現了CSSOM中的LinkStyle
接口HTMLAnchorElement
、HTMLLinkElement
和HTMLAreaElement
實現了URLUtils
接口bgColor
已被廢棄,那麼HTMLBodyElement
之上的IDL屬性接口bgcolor
也被廢棄HTMLAppletElement
, HTMLFrameSetElement
, HTMLFrameElement
, HTMLDirectoryElement
及HTMLFontElement
、HTMLBaseFontElement
isindex
替代爲其餘元素了,HTMLIsIndexElement
接口被廢棄HTMLDocument
接口移動到了Document
接口,所以在原來的HTMLDocument
下被廢棄:anchors
和applets
。