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

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

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

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

在本教程中我们将探索 HTML 的pattern属性，用来帮助我们制定自定义表单验证的方式。表单验证对一个网站的安全性，以及可用性至关重要。验证过程就是在表单提交之前判断输入值是否匹配了正确的格式。例如，如果我们要在一个输入框内输入电子邮件地址，该值一定要是一个有效的电子邮件地址；应该以一个字母或数字开头，然后是@符号，最后以一个域名结束。HTML5规范对于一些新的input类型，如email、url、tel,也做出了一些更为简易的验证，并且也被打包成了预定义的验证。当给定的值不符合预期的格式时，这些输入类型就会抛出一条错误的消息从而阻止提交。

图片在响应式网页设计中是出了名的最具挑战性的方面之一。今天我们就来看看如何使用<picture>元素来处理响应式图片.固定宽度，像素完美的网站设计已经离我们远去了。在宽屏显示器，互联网电视，多尺寸的平板电脑和智能手机的今天，我们的设计必须应付一切可能，将宽由320px向7680px转变。伴随这种多分辨率风景而至的，是需要拉伸或收缩图像，以适应这些不同的要求。这可以被理解为如下问题，矢量图形出现异常时，绝大多数具有特定像素的图像宽度并不改变。所以，我们应该怎么做呢?

本文是根据HTML5 Boilerplate 官方文档所译，主要介绍了HTML5 Boilerplate的架构以及涉及到的相关知识。并且详细介绍了如何在基于HTML5 Boilerplate创建自己的项目。

因工作原因，最近在使用Node-Webkit做一个桌面高拍仪（摄像头）应用。这个应用本身也只是一个尝试性的东西，不太具有参考价值，就不在这里提供下载了。