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命名空间中:
<?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标准来设置编码。
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.01、XHTML 1.0、XHTML 1.1之类严格的Doctype,在HTML5中可以使用,但不被提倡。
在XML语法中,可以使用任何Doctype声明或省略Doctype。使用XML媒体类型的文档永远会在标准模式中被解析。
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、colorform属性可用于在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及stepinput 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属性设置。
有这些新的全局属性:
contenteditabledata-*代表了开发定制的属性,这种格式可以避免与将来的新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, charsetarea废弃属性:nohrefform废弃属性:accepthead废弃属性:profilehtml废弃属性:versioniframe废弃属性:longdescimg废弃属性:nameinput废弃属性:usemaplink废弃属性:target, rev, charsetmeta废弃属性:schemeobject废弃属性:archive, classid, codebase, codetype, declare, standbyparam废弃属性:valuetype, typetable废弃属性:summarytd废弃属性:axis, abbr, scopeth废弃属性: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、scriptspan、div、文本节点。它接近于HTML4层面的block-level和inline的混合aside、sectionh1span、img、文本节点。它接近于HTML4的inline概念img、iframe、svga、button、label与HTML4有很大不一样的一点是,HTML5中不再出现仅仅允许嵌套"block-level"的类别了(译注:因为HTML5已经不存在"block-level"类别的标签了)。
比如,body允许Flow类别的内容。这个规则比起HTML4 Strict,它更接近HTML4 Transitional。
更多变化包括:
address元素允许嵌套Flow类别的标签,但不允许嵌套Heading、Section类别的元素,不允许嵌套header、footer、另一个addressobject出现在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及textareaHTMLSelectElement的add()接口允许第二个参数为数字HTMLSelectElement的remove()接口在参数越界的时候,将删除集合中第一个元素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()onreadystatechange是唯一一个在Document上才有效的接口在脚本中修改了HTMLDocument原型的那部分还是可以正常运转的,由于window.HTMLDocument也将返回Document接口。
HTMLElement接口也在HTML5中得到了扩展:
data-*的属性的接口datasetclick()、focus()、blur()接口允许脚本模拟用户点击与切换焦点accessKeyLabel给予UA赋予该元素的快捷键,开发可以通过accesskey属性来影响UA的该行为isContentEditable返回元素是否可以编辑translate、hidden、tabIndex、accessKey、contentEditable、spellcheck、styleHTMLElement上定义接口被移动到了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、HTMLBaseFontElementisindex替代为其他元素了,HTMLIsIndexElement接口被废弃HTMLDocument接口移动到了Document接口,因此在原来的HTMLDocument下被废弃:anchors和applets。