21 世纪，2016 年 6 月，HTML 5.1 从工作草案变为了候选标准。正如你了解的那样，这是将提案变为标准的第二步，Web 的如此发展也将影响我们的日常生活。作为候选标准，W3C 认为 HTML 5.1 已经通过了 review 并且能够满足工作组的技术需求了。

几天前，HTML 5.1 被提案进入第三阶段：推荐标准（PR）。这意味着这个规范只需要进行微量的修改就可以进入 W3C 标准的最后一阶段了。

随着 HTML 5.1 接近最后阶段，工作组开始关注于未来。于是工作组正式开始研究 HTML 5.2 工作草案，因此，W3C 在社区中发布了HTML 5.2 规范来让 W3C 成员、公众以及其他组织进行 review。

HTML5 凭借语义性、兼容性和不需要第三方依赖的 API 迅速席卷了整个互联网。这是一场革命性的技术变革。HTML 5.1 保留了先前版本全部优良的特性又引入了一些语义元素的重大改进。想想 HTML 5.1 都带来了什么，可想而知 HTML 5.2 会更为惊艳。

在本文中，我将做一个关于 HTML 发展的简短的概述，包括 HTML 5，HTML 5.1，和 HTML 5.2 中引入和废除的特性。

以下是本文的重点：

  • HTML 5 引入的语义元素概述；
  • 关于 HTML 5 和 HTML 5.1 中新特性和未定案特性的变化；
  • HTML 5.2 的介绍以及对于接下来可能发生的事的猜想；

HTML 5 新的语义元素

HTML 5.1 最伟大的创新之一就是引入了新的语义元素。它们也许（很有可能）会成为你如今日常写码的一部分。就是因为有了标记性的结构和语义，才使我们的站点有了很大改善。

我将主要提到的元素有：

  •  定义主要内容;
  •  包含独立于页面其他部分的内容；
  •  包含介绍部分或者是导航链接的集合；
  •  定义了整个页面或其中一部分的页脚（并且通常包含原创作者，版权信息，联系方式和站点地图）；

将两个革命性的元素单独拿出来说，它们帮助我们解决了 Flash 等技术难题：

在上面提到的所有元素中，最有争议的无非是

元素。在 W3C 规范的描述中它是页面中的主要内容，然而万维网超文本应用技术工作组(WHATWG)却定义
元素为其他元素主要内容的容器。由于这个区别，WHATWA 没有限制一个文档中
元素出现的次数。按 WHATWA 的定义，如果你在一个页面中定义了多个
元素，你就可以给每个
标记
元素。

两种规范在其他方面也有一些不同，例如

的存在（W3C 标准中删除了此元素，但它仍旧存在于 WHATWG 中–译者注）。这篇文章中不会详细讲解这部分内容，如果你感兴趣可以阅读 Aurelio De Rosa 的这篇文章，W3C vs. WHATWG HTML5 规范 – 文档中的不同，你可以从中了解到很多。

现在我们来看一下 HTML 5 和 HTML 5.1 中的不同。

HTML 5 和 HTML 5.1 的不同之处

这部分将主要介绍 HTML 5.1 中一些尚未确定的元素、方法和属性。我将就其概念和优点进行介绍，并且提供了一些其他资料，如果感兴趣可以进行扩展阅读。需要注意的是，这里提到的大部分新元素都在 HTML5 中被提出却因为某些原因没有通过提案，所以对你来说也许并不陌生。例如  

  和就是从 HTML 5 转移至 HTML 5.1 规范中的。

就像其他规范一样，HTML 5.1 也引入了一些被移除不久的特性。其中之一就是inert属性，它在 2014 年被提出。正如Github 上这个 discussion 中所提到的，这个属性自从被归入

元素后就被遗弃了。

开始使用新的元素吧~

HTML 5.1 引入的新元素

第一个准备讲的就是元素。它的用处就是把source元素和srcset属性结合到一起，更方便的是当网页展示在小屏幕（例如移动设备）上时，它可以提供内存和尺寸较小的图片。

元素的另一个功能就是当页面加载在高分辨率屏幕上的时候就提供高密度的图片。由于这个元素的存在，你可以更好的给用户展示图片并且很好的避免过大的高密度图片与网站不相称。如果你想更多的了解，可以阅读我的另外两篇文章：使用 Picture 元素提升响应式图片  和  响应式图片第一步：使用 srcset。当然也有一些人主张picture 元素的不必要的 (大多数时候)。不管怎样，这都取决于你的选择。

接下来介绍

元素，当下有 Chrome 和 Opera 已经对其进行支持，微软 Edge 则仍在考虑中。这个元素可以用来作为对话框，确认框或者窗体。可以通过把
元素的 method 属性设置为dialog来把其合并到元素中。这样这个 form 表单提交的时候，这个对话框就会关闭同时把提交按钮返回的值设置为returnValue。这里有一个在线的 demo，代码来自 MDN, 由 JSFiddle 展示。

同时

和也是值得推荐的新增元素。
展示给用户 在这个组件上可以获取额外的信息或者控件。元素作为总结，标题，或是图例放在
的内容中，二者互相配合。目前有 Chrome，Firefox（版本 49+），Opera，Safari 支持了
元素。我认为这两个元素未来会在折叠/展开组件上起很大作用。

HTML 5.1 其他新增

除了这些元素，HTML 5.1 还添加了如下新增：

  • 元素的type属性新增了month和week两个值。正如它们名字所表示的那样，它们定义控件将元素的值设置为代表一个月或者一周的字符串。
  • forceSpellcheck()方法加入到HTMLElement接口中，并且允许开发者通过在元素上调用此函数强制用户执行拼写和语法检查，即使用户没有聚焦这个单词。其中一个用途就是**inputElement.forceSpellcheck()**。不幸的是还没有浏览器支持这个特性。
  • allowfullscreen是iframe元素的一个布尔类型属性，它指定了当调用 requestFullScreen()方法时，iframe是否接受全屏。当该属性未被指定时，默认元素不接受全屏模式。
  • reportValidity()方法被调用时，强制用户进行元素的约束校验。比如当一个必填元素没有被填写或者一个字段涉及到它的pattern属性时。如果约束的校验返回正确的结果时，这个函数会返回true，反之则返回false。目前有 Chrome 和 Opera 支持了这个方法。

未定案的特性

HTML 5.1 规范中也描述了一些当前被认为“at risk”的特性。

我要提的第一个未定案的特性就是

元素。它代表了菜单指令的集合，它原本是被设计用来创建工具栏和弹出菜单的。当下 Chrome 和 Opeara 只有在实验性网络平台（Experimental Web Platform features）打开后才能支持，并且只支持 context menu，不支持 button menu。Firefox 的近期版本也是同样，目前的其他浏览器没有可以支持的。

接下来要介绍的特性是元素，定义了用户可以从弹出菜单中调用的命令。在变种包含了 context menu，同时 menu 可能关联了一个 menu button。当下 Chrome 和 Opeara 只有在实验性网络平台（Experimental Web Platform features）打开后才能支持，并且只支持type=”command”。在 Firefox 中也只有当关闭 tag 后才能支持带有contextmenu属性的

。IE 和 Edge 都没有支持该元素。

另一个未定案的特性则是。这个元素会在控件的表单提交的时候生成一对密钥，私有密钥会存储在本地的 keystore 中，公有密钥则会被打包发送到服务器。 In addition to these elements, the following features are also considered at risk: 除了上面提到的这些元素，下面这些特性也同样没有确定：

  • 元素的type的datatime和datatime-local两个值。前者用来定义一个特定地区的日期和时间，候着则是代表本地日期和时间，没有时区偏移量信息。
  • context属性为
    指定了一个 context menu，并且当用户右键点击 div 时会显示菜单。所有的浏览器中，只有 Firefox 支持了这个属性。
  • inputmode属性。它指定了当用户在表格控件中输入内容时，输入机制会提供更多的帮助。

好了，现在你已经知道了 HTML 5.1 做了哪些改变，可以进一步了解工作组现在在研究的规范内容了。

HTML 5.2 会带来什么

HTML 5.2 规范的制定工作才刚刚开始，所以此时此刻还没办法猜测出很多东西。

最重要的特性之一就是