本文选译自: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
。