Html5和html4的区别

语法

HTML定义了“HTML语法”，他主要是兼容已在web上发布的HTML4和XHTML1文档，但是不兼容HTML4的那些深奥的SGML特性，例如处理说明 processing instructions和简写标记 shorthand markup这些，大部分的用户代理都不支持他们。使用text/html媒介类型的文档使用HTML语法。

HTML也定义了解析规则的细节（包括错误处理）的相关语法，这主要是为了兼容HTML4时代的实现。对于有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。这种语法兼容XHTML1文档和实现。使用这种语法的文档需要和XML媒介类型（例如application/xhtml+xml或者application/xml）搭配，且元素需要根据XML规范设定的规则放在 http://www.w3.org/1999/xhtml 命名空间中。XML XMLNS

下面的示例文档就是兼容XML语法的HTML。

<?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语法，Web开发者需要声明字符编码。有三种方式来设置：

  • 在传输层；例如，通过使用HTTP的Content-Type头。

  • 在文件开始的地方使用Unicode BOM(Byte Order Mark) 字符。这个字符提供使用编码的标记。

  • 使用在文档的前1024字节中带有指定编码的charset属性的meta元素；例如，<meta charset="UTF-8">能用来指定UTF-8编码。他替换了<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（尽管该语法仍然可以使用）的需求。

对于XML语法，Web开发者必须使用在XML规范中设定的规则来指定字符编码。

Doctype

HTML语法需要指定doctype来确保浏览器在标准模式下渲染页面。doctype没有其他的用途。Doctype

HTML语法中doctype声明是<!DOCTYPE html>这样的，且不区分大小写。HTML早先的doctype版本更长，这是因为HTML语言是基于SGML的，因此需要引用一个DTD。现在情况已不是这样了，doctype仅仅用来触发使用HTML语法书写的文档的标准模式。浏览器已经支持了<!DOCTYPE html>。

在HTML语法中，为了支持不能生成最短doctype的传统的标记生成器，<!DOCTYPE html SYSTEM "about:legacy-compat">这个doctype也是允许的。

在HTML的语法中，HTML4.0、HTML4.01、XHTML1.0以及XHTML1.1的标准的doctype也是允许的。

在XML语法中，可能会使用任意的doctype声明，或者可能完全省略掉。带有XML媒介类型的文档往往以标准模式处理。

MathML和SVG

HTML语法允许在文档中使用MathML和SVG元素。math或者svg起始标签能使得HTML解析器切换到特殊的插入模式，这种模式会将元素和属性放进合适的命名空间中，且会修正有大小写混合的元素和属性，以及支持像在XML中的空元素语法。这种语法仍然是不区分大小写的且属性语法如同HTML元素的属性的语法。命名空间的声明可以省略。在插入模式中CDATA段落也是支持的。

一些MathML和SVG元素使得解析器切回到“HTML模式”，例如：mtext和foreignObject，因此你能使用HTML元素或者新的math或者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>

其他

在HTML语法中，也有涉及一些其他的几个改动：

  • &lang;和&rang;命名字符引用现在拓展到了 U+27E8 和 U+27E9（数学上的左/右角度括号） ，分别替代了 U+2329 和 U+232A （left/right-pointing角度括号）。

  • 增加了很多新的命名字符引用，包括在MathML中的所有命名字符引用。

  • 可空元素（在HTML4中是空元素）允许有一个尾斜杠。

  • 和HTML4相比，&在更多情况下可以不转义。

  • 属性之间必须至少有个空格符分割。

  • 值为空的属性可以仅仅只有属性名，等号和值都是可以省略的，即使属性不是一个布尔属性也一样如此。（在HTML4中，普遍允许的省略的情况是该属性是一个布尔属性。实际上，对于可枚举的属性，HTML4允许仅使用属性值且省略属性名，但是没有浏览器支持。）

  • 和HTML4相比，属性值可以省略引号，这样就能使用更大字符集。

  • HTML解析器不会给属性值做任何的空白做归一化处理；例如，id属性的前导和结尾空白是不能被忽略的（因此现在就是无效的），且换行符能在不用字符引用的情况下在input元素的value值中使用。

  • optgroup的结束标签是可以省略的。

  • colgroup的起始标签现在是可以省略的，且会由HTML解析器自动推断出来。

语言

本段落分成了几个小段落，这样可以更加清楚的阐述和HTML4各个方面的不同。

新元素

下边介绍一些为了更好的结构化而生的元素：

  • section代表了一般文档或者应用段落。他可以和h1、h2、h3、h4、h5以及h6元素一起使用来表明文档结构。

  • article代表了一个文档中的独立的内容片段，例如博客条目或者报纸文章。

  • main代表了一个文档或者应用的body的主要内容。

  • aside代表了一块仅仅稍微和页面其余部分相关的内容。

  • header代表了一组介绍性或者导航性的内容，也就是页眉。

  • footer代表了一个段落的页脚，能包含作者、版权信息等。

  • nav代表了文档导航的段落。

  • figure代表了独立的流内容，一般是作为文档主流内容的一个单独的单元。

	<figure>
	 <video src="example.webm" controls></video>
	 <figcaption>Example</figcaption>
	</figure>

[figcaption](http://www.w3.org/TR/html5/single-page.html#the-figcaption-element)可以作为标题使用（可选）。
  • template能作为声明可以通过脚本来克隆和插入到文档中的HTML片段来使用。

然后还有一些其他的新元素：

  • video和audio来丰富多媒体内容。都会提供API，这样Web开发者能用脚本来自定义他们的用户界面，但是同样也有方式来触发用户代理提供的用户界面。如果有不同的类型的可用多媒体流使用的话，source元素是和这些元素一起使用。

  • track为video元素提供文本轨道。

  • embed用来嵌入内容。

  • mark元素代表文档中带有记号的文本或者引用高亮的目的，这取决于他和另外上下文关联性。

  • progress代表一个任务的进度，例如下载或者表现一系列复杂操作时。

  • meter代表了测量，例如磁盘使用情况。

  • time代表日期时间。

  • ruby、rt和rt用来标记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属性现在有如下新的值：

这些新的类型的想法是用户代理能够提供的用户界面，例如一个带有用户通讯簿的日历，且可以给服务器定义一个格式。这在将数据发送到服务端校验会省不少时间，给用户提供了一个更好的体验。

新的属性

部分是已经在HTML4中引进了各种各样的元素的属性：

  • area元素，为了和a和link元素保持一致，也有了hreflang、type和rel属性。

  • base元素现在也能有target属性了，主要是为了考虑和a元素保持一致。（这个已经被普遍支持了）

  • meta元素现在有了charset属性，这个现在已经被广泛支持了且提供了一种很好的方式来指定文档的_字符编码_。

  • 新的autofocus属性可以指定在input元素（除了当type属性是hidden）、select、textarea以及button元素上。他提供了一种声明式的方式在页面加载过程中聚焦到表单项上。使用这个特性可以提升用户体验（和利用脚本聚焦元素相比），例如，用户可以关闭它，如果用户不喜欢他的话。

  • 新的placeholder属性可以指定在input和textarea元素上。他代表了一个暗示（示意）来帮助用户输入数据。

<input type=search name=q placeholder="Enter search phrase..."> <button>Search</button>
<label>Email <input type=email name=email placeholder="john@example.com"></label>

placeholder属性不应该作为label元素的替代者。

<!-- Do not do this: -->
<input type=email name=email placeholder="Email">

<table>
 <tr>
  <th>Key
  <th>Value
  <th>Action
 <tr>
  <td><form id=1><input name=1-key></form>
  <td><input form=1 name=1-value>
  <td><button form=1 name=1-action value=save>√</button>
      <button form=1 name=1-action value=delete>×</button>
 ...
</table>
  • 应用在input元素（除了当type属性是hidden、image或者一些按钮类型，例如submit），select以及textarea元素上的新的require，他指定用户必须输入内容才能提交表单。对于select，第一个option元素的值如果为空，那么必须有一个占位符。
<label>Color: <select name=color required>
 <option value="">Choose one
 <option>Red
 <option>Green
 <option>Blue
</select></label>

有一些在HTML4中的属性，现在应用到了所有元素上。这些称为全局属性accesskey、class、dir、id、lang、style、tabindex以及title。此外XHTML1.0仅允许在一些元素上有xml:space，这个现在在XHTML文档中在所有元素上都是不允许的了。

也有一些新的全局属性：

  • contenteditable属性指定了元素是一个可编辑区域。用户能改变这个元素的内容且能操作标记。

  • data-*是Web开发者定义属性集合。Web开发者能定义任意的属性，多长都可以，只要是以data-开始的，这样来避免和未来的HTML的冲突。这些主要是用来存储Web页面或者应用自身使用的自定义数据。他们不是为了其他部分使用的数据的（例如，用户代理）。

  • hidden属性指定了一个元素还不是或者已经不是有意义的了。

  • role和aria-*属性集合能用来指示辅助性质的技术。

  • spellcheck属性允许暗示内容是否通过拼写检验。

  • translate属性暗示内容是否应该被翻译。

HTML也有HTML4中的所有的事件属性，也就是onevent全局属性，且增加了他定义的新的事件对应的新的事件属性；例如，onplay事件处理属性是为了媒介元素（video和audio）的play事件API增加的。本规范有所有事件索引。

变动的元素

在HTML中，这些元素有一点意义上的改动，是为了更多的表现他们是怎么样在Web上使用的或者使得他们更有用：

  • address元素现在作用在最近的article或者body祖先元素。

  • b现在代表一小段关注于以绘制为目的的文本，而不代表任何额外的重要性和没有任何关于语音和情绪的含义。好像是文档抽象上的关键字，在检阅中的产品名字，在交互式文本驱动软件中可操作单词或者一篇文章开头。

  • blockquote元素依旧代表了引用自另一个资源的内容，但是现在允许包含footer或者cite元素的引用，以及内嵌变化，如注释和缩写。

  • dl元素现在代表了一个名字-值对相关联的列表，也就是说不再适用于对话。

  • hr元素现在代表了一个段落级的主题间隔。

  • i元素现在代表了一段关于语音或者情绪的文本，或者其他偏离正常的文本中的不同的权重，例如分类名称、技术术语、另一种语言的习语、一个想法或者一个在西方文字中船的名字。

  • 对于label元素而言，浏览器不应该将焦点从标签移动到控件上，除非这种行为是基础平台的用户界面的标准。

  • noscript元素不再是当用户代理不支持早期文档中调用的的脚本script语言渲染的。

  • s元素代表的不再是标准的或者相关的内容。

  • script元素现在能用于脚本或者自定义数据块。

  • small元素现在代表的是侧面评论，例如小号印记。

  • strong元素现在代表的是重要性而不是强烈的强调。

  • u元素现在代表了一段未阐明的、虽然明确渲染、非文本注释的（例如在中文中的专有名词-一种名称标记）或者错误的文本。

变动的属性

一些属性以不同的方式发生了变化。

  • img元素上的alt 属性有更多详尽的需求，且在一些情况下也是可以省略的。细节请看这个规范。

  • input元素上的accept属性现在允许audio/*、video/*和image/*这些值。

  • accesskey全局属性现在允许指定多个字符，用户代理可以从中选择。

  • form元素的action属性的值不允许是空的URL了。

  • table元素的border属性只允许值要么为”1”要么为空字符串。

  • td和th元素上的colspan现在的值必须比0大。

  • area元素上的coords属性，当这个元素在一个圆的状态时不再允许百分比的半径值。

  • object上的data属性不再说相对于codebase属性了。

  • script元素上的defer属性现在明确了当页面完成解析后执行脚本。

  • dir全局属性现在允许设置auto值了。

  • form元素上的enctype属性现在支持text/plain值了。

  • img、iframe和object元素上的width和height属性允许包含百分比了。他们禁止用于拉伸图片到一个不同的宽高比。

  • link元素上的href属性不再允许空的URL了。

  • base元素上的href属性现在允许包含一个相对的URL了。

  • 所有带有URL的属性，例如如果文档的编码是UTF-8或者UTF-16的话，a元素上的href属性现在支持IRI了。

  • meta元素上的http-equiv属性不再说用于HTTP服务器在响应时创建一个HTTP头。作为替代，现在说他是一个用于用户代理的编译指令。

  • id全局属性现在允许设置任何值，只要他是唯一的、非空的字符串且不包含任何空字符。

  • lang全局属性接收空字符串，意味着一个有效的语言标识，如同在XML中的xml:lang一样。

  • link元素行的media属性现在接受一个媒介查询列表，默认是”all”。

  • 事件处理属性（例如，onclick）现在一直使用JavaScript作为脚本语言。

  • li元素上的value属性不再因为他不是表象的而弃用了。在ol元素上的start和type属性也一样。

  • style全局属性现在总是使用CSS作为样式语言。

  • tabindex全局属性现在允许负值了，表示的是这个元素可以接受聚焦，但是不能通过Tab切换到。

  • a和area元素上的的target属性不再弃用了，因为在Web应用中他是非常有用的。例如，和iframe结合的时候。

  • script和style元素上的type属性不再是必须的了，如果脚本语言是JavaScript且样式语言是CSS的话。

  • img元素上的usemap属性不再接受URL了，但是作为替代接受一个map元素的有效的hash-name的引用。

废弃的元素

PS：不再细述了

主要有：

废弃的属性

PS：不再细述了

建议的替换列表。

主要有：

可以利用CSS代替的属性们：

下边的属性是允许的，但是不建议Web开发者使用它们且作为替代强烈建议使用可选择的方案：

  • img元素上的border属性。当出现的时候，值应该为”0”。Web开发者可以使用CSS替代。

  • script元素上的language属性当出现的时候值必须有”JavaScript“（不区分大小写）且不能和type属性冲突。Web开发者能简单省略，因为他没有任何功能。

  • a元素上的name属性。Web开发者能用id属性代替。

内容模型

内容模型就是定义元素间是怎样嵌套的——一个确定了的元素的那些是允许作为他的孩子的（子孙节点）。

总的来说，HTML4主要有两种类型的元素：行内元素（例如：span、img、文本text）和块级元素（例如：div、hr、table）。有一些元素不属于任何一种类型。

一些元素（例如：p）允许行内元素，一些（例如：body）允许块级元素，有些（例如：div）两者都可以，然而也有其他元素不允许任何类型元素除了其他特殊元素（例如：dl、table）或者不允许有任何孩子（例如：link、img、hr）。

注意在一个确定类型中的元素自身和有确定类型内容模型之间的区别；例如，p元素自身是一个块级元素，但是却有行内的内容模型。

更复杂混乱的是，HTML4在他的标准、过渡和框架集模式下有不同的内容模型规则；例如，在标准模式下，body元素只允许块级元素，但是在过渡模式下，行内和块级元素都是允许的。

更更甚者，混乱的还有，CSS为其可视化格式模式使用了“块级元素”和“行内级元素”术语，而可视化格式模式只和CSS的display有关，而和HTML的内容模型规则一点关系都没有。

HTML没有私有“块级”或者“行内”作为他的内容模型规则里的术语，俄日了避免和CSS混淆。然而，相比HTML4，他有更多类型，且元素可能是他们之中的一个、多个或者不是任何一个。

  • 元数据metadata内容，例如：link、script。

  • 流内容，例如：span、div、text。这个有点近似于HTML4中块级和行内两者合集。

  • 片段内容，例如：aside、section。

  • 标题内容，例如：h1。

  • Phrasing（短句？）内容， 例如：span、img、text。这个有点近似于HTML4中行内。是phrasing内容的元素也是流内容。

  • 嵌入内容，例如：img、iframe、svg。

  • 交互内容，例如：a、button、label。交互内容不允许嵌套。

明显区别于HTML4的是，HTML不再接受除了块级元素的任何元素，例如：body元素现在只允许流内容。因此，这更趋近于HTML4的过渡模式而不是标准模式。

进一步变化包括：

  • address元素现在允许流内容，除了没有标题内容子孙、没有分段内容的子孙以及没有header、footer、address元素的子孙。

  • HTML4允许head中有object。HTML不允许。

  • 在HTML4中，noscript元素是块级元素，但是在HTML中是phrasing内容。

  • 在HTML中，table、thead、tbody、tfoot、tr、ol、ul和dl元素可以为空。

  • 表格table元素必须遵从表格模型（例如：两个单元格不允许覆盖）。

  • table不允许有直接col子元素。但是HTML解析器会暗含一个colgroup元素，所以这个变动不会影响text/html内容。

  • table元素现在允许tfoot元素作为他的最后一个孩子。

  • caption元素现在允许流内容，除了没有子孙的table元素。

  • th元素现在允许流内容，除了没有header、footer、分段content、标题内容的子孙。

  • a元素现在有一个透明的 transparent内容模型（除了他不允许有交互内容子孙），这意味着他和他的父元素有相同的内容模型。也就是说，如果a元素的父元素允许流内容的话，那么他能包含如div这样的元素了。

  • ins和del元素也有透明内容模型。HTML4中某些文章中有类似规则但是不能在DTD中体现。

  • 在object元素的param孩子后也有透明内容模型。

  • map元素也有透明内容模型。如果area元素有一个map祖先元素的话，就认为他是phrasing内容，这意味着他们没必要是map元素的直接孩子。

  • fieldset元素现在不再需要legend子元素了。

API

HTML有很多新的API且扩展、改变或者废弃了一些已存在的API。

新的API

HTML为帮助创建Web应用介绍了很多API。这些能和为了应用而成的新元素一起使用：

变化的API

下边的基于DOM2特性也有各式各样的变化：

Document的扩展

DOM2有一个HTMLDocument接口，他是继承自Document且提供了文档中特有的HTML的数量。HTML将这些成员移动到了Document接口上，且有多重方式拓展他。由于所有文档使用Document接口，特有的HTML成员现在在所有的文档上都是可用的，所以他们也可以用在如SVG文档中。他也有集合新的成员：

存在修改HTMLDocument的原型脚本应当继续能工作，因为window.HTMLDocument现在返回的是Document接口对象。

HTMLElement的扩展

在HTML中HTMLElement的接口现在也增加了几个：

有一些成员之前是定义在HTMLElement上，现在已移动到了DOM标准中的Element接口上：[DOM]

  • id反映的是id内容属性。

  • className反映的是class内容属性。

  • classList是一个为了转换className的访问器。返回的对象暴露了一些方法（contains()、add()、remove()、和toggle()）用后来操作元素的class。

  • getElementsByClassName()返回的是带有指定class的元素列表。

其他接口的扩展

DOM2中的一些接口做了扩展。

总的来说，大多数的内容属性也有相应的IDL属性（在元素接口上），例如：在HTMLLinkElement上的sizesIDL属性反映了内容属性的sizes大小。

废弃API

一些API现在一并移除了，或者标记为废弃了。

所有的废弃了的反映内容属性所对应的IDL属性，现在一样也废弃了；例如，HTMLBodyElement上的bgColor废弃了，那么对应的的IDL属性接口bgcolor也已废弃。

由于元素被废弃了，接下来的接口标记为废弃了： HTMLAppletElement、HTMLFrameSetElement、HTMLFrameElement、HTMLDirectoryElement和HTMLFontElement。

HTMLIsIndexElement接口现在也一并移除了，这是因为HTML解析器现在扩展了isindex标记到所有的元素上了。HTMLBaseFontElement也因元素没有任何效果而被移除了。

HTMLDocument接口（移到了Document）接下来的成员也被废弃了：anchors和applets。

原文：NOTE-html5-diff

发布于: 2014年 12月 10日