5个鲜为人知的HTML功能，你知道吗？

有一个事实我们必须承认：对非专业人士来说，现在网页开发工作也许是一团糟。经过多年演变，HTML、CSS和JavaScript等语言逐渐变得成熟和强大，但对于如何使用它们很多人都是模棱两可的。从结果来看，很容易就会使作品一团糟。书写标准和最新的功能改进虽然可以帮到你，并不能帮助你写出真正优秀的代码。

不管在哪种类型的软件开发中，代码的模块化和可维护性构建都是重中之重。因此，你需要关注Web组件的发展。尽管有些浏览器对组件的支持不佳，但适当使用可以帮你立即实现某种够能。这种发展方式是编程的未来，熟悉它是值得的。

HTML5引入了一些新元素，并弃用了很多旧元素，以鼓励实现更优秀的代码。你可能听说够，HTML5种加入了很多语义化标签，比如<article>和<firgure>来描述它的内容类型。

这可以真正帮你快速读懂代码，它们将帮助你立即识别菜单栏、内容、页脚等部分。

如果你使用最新的JavaScript标准，也会看到这类发展。虽然杂乱不堪的JS也广泛存在，但近年来JS使用变得更加容易了。大多浏览器都支持ES6语法，如指针函数和类等功能，可以帮助你更容易地实现某些功能，尽管很多开发者不熟悉或不愿意用它们。

现在JS也已经支持模块加载，这将更有助于你的管理。

01.识别和合成声音

曾经这是个很复杂的功能，需要专门的软件处理，但现在可以直接在浏览器中实现。Web Speech API具有支持语音和文本相互转化的组件。声音合成的功能可使用在线服务（如Chrome将使用Google Cloud Speech API）或设备搭载的语音识别服务。预计未来这个功能会在移动设备上广泛使用。

02.颜色选择器

听起来这个功能没什么大不了的，但可以作为HTML5简化常规任务的良好例子。以前这个功能需要复杂的UI组件，并使用自定义编码完成。现在，通过调用本地的颜色选择器，使用<input type=”color”>将在单击时显示可视的颜色选择器。对于HTML绘画工具来说这十分有用。在手机上除了Safari外，大部分浏览器都支持此功能。

03.调整浏览器UI颜色

在移动端这将塑造良好的美感。使用<meta name=”theme-color” content=”#FFFFFF” />，可指引浏览器在访问你的网站时将工具栏重新着色。不幸的是，这个写法的支持不佳，在Chrome、Firefox和Opera上运作良好，但在iOS上你需要使用apple-mobile-web-app-status-bar-style，即便如此也只适用于全屏模式。

04.根据屏幕调整图像

在实现响应式设计时，通常你的图像将被调整尺寸以适应屏幕，但这种方法并非完美，因为这仍需要用户下载最大尺寸的图像，并要求设备重新采样。而通过HTML5的<picture>元素，你可以直接根据设备的分辨率来显示不同尺寸的图片。

05.手机震动

通过vibrate()函数，你可以调用Vibration API，完成一些设备支持的工作。在函数支持的功能之中，震动也在其列。在Chrome、Firefox和Opera上可正常运行，但在Edge或Safari则无法使用。据说有些广告正在使用此功能吸引用户的注意力，所以这项功能是否应该存在是颇受争议的。

原文出自《Web Designer》第266期，作者Simon Jones。

翻译：卡米雷特