figure和figcaption是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们，没有机会在项目中使用过他们，或者说现在对他们还是一无所知，这里就给大家讲一些如何正确使用他们的小技巧。

HTML没有给我们提供大量的标签去使用。其可选择的数量就像是街边的小商店而不是沃尔玛。我们有段落，列表和标题，但是我们不具有事件，新闻故事，或者说是配方。HTML提供给我们一个元素用于字符串的缩写标记，但是没有提供我们一个元素用于数字的价格标记。显然，从各种各样惊人的网站就可以看出，这一限制并没有得到很好的解决。虽然HTML并没有提供我们一个明确的元素用于内容价格的标记，但是他现在也已经变得十分灵活以至于“足够好”。这里套用Winston Churchill经常说的一句话，HTML是尝试过的标记形式中最糟糕的一种。

你可以只使用HTML属性实现表单验证的效果，可以使用CSS选择器带来简洁的用户体验。但是，你需要使用一些CSS技巧让效果更好。

思考许久才动笔写这篇文章。那么问题来了？为什么要写这篇文章呢？其实有一定的原因。自从录制前端视频上线之后，也有一些同学问我类似的问题，而且也有同学问，应不应该购买视频，或者说参加线下前端培训班，或者说还是自己自学等等。那么今天来聊聊这些个话题。

在几个星期前,W3C在2016年11月发布了新的 HTML 5.1 recommendation,HTML规范得到了重大改进，在最近的博客中,W3C将新的主版本称为黄金标准，因为HTML 5.1为我们提供了新的方法，我们可以使用HTML来创建更灵活的网络体验。

大多数的JavaScript表单验证类库体积都非常庞大，而且往往需要引入其他的库，像jQuery。 例如，MailChimp的嵌入式表单，包含了140kb的 验证文件(压缩后)。它引入了整个jQuery库，以及一个第三方的表单验证插件，还有一些原生的MaiChimp代码。实际上，正是MailChimp的嵌入式表单引发了我对于现代表单验证的一系列思考。我们现在有哪些新工具可以进行表单验证？哪些是可行的？哪些又是仍然需要的？

在上一篇文章中, 我向大家展示了如何通过组合输入类型 (例如, <input type='email'>) 和验证属性 (像required和 pattern)来使用原生的浏览器表单验证机制。诚然,这种方式非常的简单而且轻量级。但是它仍然具有一些缺点 。

在这个系列的上一篇文章中, 我们创建了一个轻量级的脚本 (6kb, 2.7kb缩小后) 使用这个 Validity State API 来提高原生的表单验证体验。 这个脚本可以在所有的现代浏览器上运行，并且支持 IE10版本以下的浏览器。但是，浏览器本身仍然具有一些缺陷。

在这个系列的上几篇文章中, 我们已经学会了如何使用输入类型和验证属性本地进行表单验证。我们也学会了如何使用约束验证 API 来提高浏览器原生的验证能力以提供更好的用户体验。 并且我们写了一个 polyfill 将支持一直延伸到IE9（并在一些较新版本中添加了几个功能）。现在, 让我们把学到的知识运用到一个真实的例子中:MailChimp注册表单。

昨天晚上，我在一个特别大的代码库中四处游荡，偶然发现了我们平时使用的normalize.css文件用于重置HTML元素在不同浏览器中的样式。在这个过程中，我发现了一个名为<output>的特殊元素的样式，这是我以前从未见过的，甚至从未听说过的。根据MDN上的相关描述，它代表计算或用户操作的结果，通常用于表单。让我感到尴尬的是，自从Chris在2011年在一篇文章中使用它之后，这并不是一个新的，花哨的附加功能。