html5新特性详解

| 阅读数:--次| 作者:html5,css3
摘要:html5

 1.向后兼容

HTML5是这样被定义的:能向后兼容目前UA处理内容的方式。为了让语言更简单,一些老的元素和Attribute被舍弃。比如一些纯粹用于展现的元素(译注:即非语义化的元素,如big)或Attribute被舍弃,因为他们更适合用CSS来处理。
但UA依然可以支持老旧的属性和元素。这就是为什么HTML5标准清楚地划分了给开发的要求和给UA的要求。比如,开发者不应当使用plaintext元素,但UA需要兼容plaintext元素。
既然HTML5已区分对UA和对开发者的要求,再也不需将一些特性标记为deprecated(不赞成使用)了。

2. 语法

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+xmlapplication/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> 

2.1 符号编码

HTML标准中要求开发声明编码方式,有这些方式可以做到:

XML语法中,开发需要按照XML标准来设置编码。

2.2 Doctype

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媒体类型的文档永远会在标准模式中被解析。

2.3 MathML和SVG

HTML语法允许文档内嵌MathML和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> 

2.4 其它方面

3. 语言

3.1 新标签

以下标签的引入是为了用于更好的文档结构:

其它的新标签:

<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist> 

3.2 新属性

表单元素:

<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> 
<label>Color: <select name=color required> <option value="">Choose one <option>Red <option>Green <option>Blue </select></label> 

非表单元素的新属性:

HTML4中有一些全部标签都可以使用的属性,在HTML5中叫做全局属性,如:accesskey , class, dir, id, lang,style, tabindex 及title。此外,XHTML 1.0仅允许一些标签上的xml:space属性设置。
有这些新的全局属性:

3.3 修改的标签

3.4. 修改的属性

(译注:大部分是限制放宽,略)

3.5. 废弃的元素

开发不应当使用这些废弃的元素了,但是UA仍应当支持他们。

这些元素被废弃,因为他们仅仅是用于展现层面的标签,他们用CSS处理更好:basefontbigcenterfontstrikett

这些元素被废弃,因为他们有损可访问性与可用性:frameframesetnoframes

这些元素被废弃,因为他们罕有人使用、有其他元素替代或造成了迷惑:

最后,noscript仅仅可以在HTML语法中被使用,它不被XML语法允许。
因为需要在视觉上隐藏它内部的内容,同时不允许noscript内部内容有运行脚本、应用样式、拥有可以提交的表单、加载资源等行为,所以noscript内部的内容将被当作纯文本解析。

3.6. 废弃的属性

这些属性被废弃,你可以在这里找到你能够用以替代的属性或标签。

此外,HTML不再包含纯用于表现的属性,它们应当被CSS替代:

下列属性允许使用,但不鼓励被使用:

4. 内容模型

内容模型即元素的嵌套规则。

内容模型层面,HTML4有这些混乱的规则:

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

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

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

更多变化包括:

5. API

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

5.1 新增接口

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

(译注:下列接口是很早就有,属于BOM中的共识部分,直到HTML5才加入标准)

5.2 修改的接口

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

5.3 Document扩展

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

此外,Document接口还有一些新成员:

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

5.4 HTMLElement扩展

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

5.5 其它接口扩展

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

接口 新增接口
HTMLOptionsCollection legacy caller、setter creator、add()remove()selectedIndex
HTMLFormElement 通过name或index索引的getter、checkValidity()
HTMLSelectElement getter、setter creator、item()namedItem()labelsselectedOptions及各种validate接口函数
HTMLOptionElement 构造器new Option()
HTMLInputElement filesheightindeterminatelistvalueAsDatevalueAsNumberwidthstepUp()stepDown()labels、文本选取区域API及各种validate接口函数
HTMLTextAreaElement textLengthlabels、文本选取区域API及各种validate接口函数
HTMLButtonElement labels及各种validate接口函数
HTMLLabelElement control
HTMLFieldSetElement typeelements及各种validate接口函数
HTMLAnchorElement relListtext
HTMLLinkElement relList
HTMLAreaElement relList
HTMLImageElement 构造器new Image()naturalWidthnaturalHeightcomplete
HTMLObjectElement contentWindow、legacy caller及各种validate接口函数
HTMLMapElement images
HTMLTableElement createTBody()
HTMLIFrameElement contentWindow

此外:

5.6 废弃接口

返回顶部
学到老代码浏览 关闭浏览