翻译：HTML5与HTML4的区别

 

  
Key
  
Value
  
Action
 

  

  

  
✓
      ✗
 ...

input、textarea元素可使用placeholder属性来帮助用户填写数据，注意，它不应当替代label元素的作用

非type="hidden"的input、select、textarea、button可使用autofocus元素来制定自动获得焦点的元素

input、select、textarea有新属性required，代表了用户需要填写该字段，才可以提交这个表单。select的第一个元素应当为没有值的元素，以作为空值的占位符

Color: 
 Choose one
 Red
 Green
 Blue

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，可以指定不同的大小的favicon

ol元素有了新的属性reversed，它代表着列表的顺序是逆序的

iframe元素有了sandbox和srcdoc属性以支持沙盒安全保护

object元素有了typemustmatch元素以保证更安全的嵌入顺序

img元素有crossorigin属性以在canvas中支持CORS

HTML4中有一些全部标签都可以使用的属性，在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有这些混乱的规则：

有两个大类"inline"和"block-level"元素，有一些元素不属于任何一个类别

有一些元素允许嵌套inline元素(如p)；
有些允许嵌套block-level元素(如body)；
有些都允许(如div)；
然而一些元素不根据类别、而仅仅允许嵌套特定元素(如table dl)；
或完全不允许嵌套元素

一个元素可能在一个类别中，而内容模型却在另外一个类别中。
比如p属于block-level，但内容模型为inline。

更加让人混淆的是，针对HTML4的不一样的DTD声明——Strict、Transitional或Frameset——有不一样的内容模型。
比如Strict下body元素仅仅允许嵌套block-level元素，但在Transitional下，body元素两种元素都允许嵌套

CSS的视觉格式化模型中也存在"block-level element"和"inline-level element"的区分，它跟CSS中的display属性相关，同时没有跟HTML的内容模型有任何关联

HTML5的内容模型不再使用"inline"和"block-level"的方式区分元素，为避免与CSS类似概念的混淆。然而，比起HTML4，它增加了更多类别，一个元素可以属于任意个数的类别。

HTML5中划分出来的类别如下：

Metadata，如link、script

Flow，如span、div、文本节点。它接近于HTML4层面的block-level和inline的混合

Sectioning，如aside、section

Heading，如h1

Phrasing，如span、img、文本节点。它接近于HTML4的inline概念

Embedded，如img、iframe、svg

Interactive，如a、button、label

与HTML4有很大不一样的一点是，HTML5中不再出现仅仅允许嵌套"block-level"的类别了（译注：因为HTML5已经不存在"block-level"类别的标签了）。
比如，body允许Flow类别的内容。这个规则比起HTML4 Strict，它更接近HTML4 Transitional。

更多变化包括：

address元素允许嵌套Flow类别的标签，但不允许嵌套Heading、Section类别的元素，不允许嵌套header、footer、另一个address

HTML4允许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元素。
此外，它不允许嵌套Interactive类别的元素

ins和del元素的内容模型为transparent。
HTML4有类似的规则，但无法在DTD中表达出

在object元素的param子元素以后，内容模型为transparent
（译注：这个规则应该是为了覆盖object内嵌套embed的场景）

map元素的内容模型为transparent
当有一个map作为祖先节点的时候，area元素被当作Phrasing类别的元素，同时area不再需要成为map的直接子节点

legend元素不再是fieldset必须的子节点了

HTML5引进、修改、扩展、废弃了很多API。

HTML5为了帮助创建Web App，引入了一些新的接口：

媒体标签video和audio的播放流程控制、同步多个媒体标签、字幕等接口

表单限制验证接口
（如setCustomValidity）

引入应用缓存机制，允许Web App离线的API

允许Web App注册为对应协议或媒体类型的处理应用的APP的API。
（即registerProtocolHandler和registerContentHandler）

引入contenteditable属性，允许编辑任意元素的接口

暴露会话历史、允许使用脚本无刷新更新页面URL
（History接口）

base64转换API
（atob()及btoa()）

处理搜索服务提供方的接口
（AddSearchProvider()及IsSearchProviderInstalled()）

External接口

打印文档的接口
（print()）

（译注：下列接口是很早就有，属于BOM中的共识部分，直到HTML5才加入标准）

暴露文档URL、允许使用脚本切换、刷新页面的接口
（Location接口）

基于时间的回调接口
（setTimeout()及setInterval()）

提供给用户的提示接口
（alert()，confirm()，prompt()）

Window接口

Navigator接口

如下DOM 2的接口已被改动：

document.title的返回值将会折叠多个空格符

document.domain允许赋值，因此可以改变文档的script origin

document.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()接口在参数越界的时候，将删除集合中第一个元素

在所有的HTML元素中都可以调用click()、focus()及blur()接口了

a及areastringify为它们的href属性
（译注：意味着HTMLAnchorElement和HTMLAreaElement对应的toString方法返回它们的href属性）

DOM Level 2中有个HTMLDocument接口，继承自Document接口，并提供了文档内部的元素（仅局限于HTML范畴内）访问接口。
HTML5将这些成员移动到了Document接口中，并在特定方向上拓展了它。由于各类文档（译注：XML、HTML5、SVG等等文档）都使用了Document接口，而HTML5范畴内的元素在所有类别的文档中都可用，因此这些接口在SVG等文档中都可以很好的运作。

此外，Document接口还有一些新成员：

location、lastModified及readyState：用于帮助管理文档的元数据(metadata)

dir、head、embeds、plugins、scripts：用于获取DOM树的不同部分

activeElement及hasFocus接口，用于判断一个元素是否获得了焦点

文档编辑接口：designMode、execCommand()、queryCommandEnabled()、queryCommandIndeterm()、queryCommandState()、queryCommandSupported()、queryCommandValue()

所有的IDL事件处理属性。此外，onreadystatechange是唯一一个在Document上才有效的接口

在脚本中修改了HTMLDocument原型的那部分还是可以正常运转的，由于window.HTMLDocument也将返回Document接口。

HTMLElement接口也在HTML5中得到了扩展：

用于得到data-*的属性的接口dataset

click()、focus()、blur()接口允许脚本模拟用户点击与切换焦点

accessKeyLabel给予UA赋予该元素的快捷键，开发可以通过accesskey属性来影响UA的该行为

isContentEditable返回元素是否可以编辑

全部的IDL事件处理属性

得到元素属性的接口如translate、hidden、tabIndex、accessKey、contentEditable、spellcheck、style
（译注：DOM Level 2仅建议采用Element接口上的setAttribute和getAttribute来获取或设置HTML Attribute，HTML5的这些定义扩展了HTML Attribute的范围，让它们可以像DOM Property一样set和get——UA早已广泛支持）

有些之前在HTMLElement上定义接口被移动到了Element接口中：id、className、classList、getElementsByClassName()
（译注：扩展了DOM Level 2上的Element接口定义，可以直接set/get id等属性值了——UA早已广泛支持）

DOM Level 2中的其它接口也得到了扩展。

此外：

HTMLLinkElement和HTMLStyleElement实现了CSSOM中的LinkStyle接口

HTMLAnchorElement、HTMLLinkElement和HTMLAreaElement实现了URLUtils接口

在HTML5中已被废弃的属性，其对应IDL属性接口也将被废弃。如bgColor已被废弃，那么HTMLBodyElement之上的IDL属性接口bgcolor也被废弃

在HTML5中已被废弃的元素，其对应接口也被废弃，包括HTMLAppletElement, HTMLFrameSetElement, HTMLFrameElement, HTMLDirectoryElement及HTMLFontElement、HTMLBaseFontElement

由于HTML解析器将isindex替代为其他元素了，HTMLIsIndexElement接口被废弃

一些成员属性从HTMLDocument接口移动到了Document接口，因此在原来的HTMLDocument下被废弃：anchors和applets。