原文链接：

作者：Tapas Adhikary

如有翻译不准，请多指正。

HTML5经常出现在工作中，但以下某些简便的小功能我们可能会忽略。

<details>标签

<details>标签向用户提供了详细信息，与<summary>一起用于为其指定一个可见的标题。默认情况下，该小部件是关闭的。打开时，它才会展开并显示内容。

像这样：html5-tips.netlify.app/details/index.html

提示：

你可以在GitHub 自述文件中使用它，还能隐藏不少react 组件属性，对吧？

内容可编辑

Contenteditable是一个可以在元素上设置的属性，使内容可以编辑。它适用于DIV、P、UL等元素。但必须像<elementcontenteditable="true|false">一样指定它。并且，当未在元素上设置contenteditable属性时，它将从其父元素继承。

像这样：html5-tips.netlify.app/content-editable/index.html

提示：

你可以使用它来编辑span 或 div元素，并且可以使用CSS 样式向其添加丰富的内容。这将比使用输入字段处理它更好。试一试吧！

<map>标签

<map>标签可以与<area>标签一起确定可点击区域，有助于定义图像映射。图像映射是包含一个或多个可单击区域的图像。

可单击的区域可以是这些形状、矩形、圆形或多边形区域之一。你可以将其用于视觉演示，但需要注意的是如果未指定任何形状，则会考虑整个图像。

标记内容

使用<mark>标签突出显示任何文本内容

像这样：html5-tips.netlify.app/mark/index.html

另外，你可以随时使用css更改突出显示颜色。

data-*属性

data-*属性用于存储页面或应用程序的私有自定义数据。存储的数据可以在JavaScript代码中使用，以创建进一步的用户体验。

data*属性由两部分组成：

·属性名称不应包含任何大写字母，并且必须在前缀“data-”之后至少有一个字符

·属性值可以是任何字符串

然后在JavaScript 中

注意：为了在JavaScript中读取这些属性的值，您可以使用带有完整HTML名称（即data-custom-attr）的getAttribute()，但是，该标准定义了一种更简单的方法：使用数据集属性。

像这样：html5-tips.netlify.app/data-attribute/index.html

你可以使用它在页面上存储一些数据，然后使用REST 调用将其传递给服务器。

<output>标签

<output>标签表示计算结果。通常，此元素定义了一个区域，用于显示某些计算的文本输出。

像这样：html5-tips.netlify.app/output/index.html

提示：

如果你正在客户端JavaScript中执行任何计算，并希望结果反映在页面上，可以使用<output>标签。这样就不必走getElementById()来获取元素的额外步骤。

数据列表

数据列表指定了预定义选项列表，并允许用户向其中添加更多内容。它提供了一个自动完成功能，允许您提前获得所需的选项。

像这样：html5-tips.netlify.app/datalist/index.html

提示：

数据列表是自动完成支持的高级功能。它与传统的<select>-<option>标签有何不同？可以选择标签用于从您需要浏览列表的选项中选择一个或多个项目。

Range（Slider）

range是给定滑块类型的范围选择器的输入类型。

像这样：html5-tips.netlify.app/range/index.html

请注意：HTML5中没有调用任何内容！

Meter标签

使用<meter>标签测量给定范围内的数据。

像这样：html5-tips.netlify.app/meter/index.html

但需要注意的是，不要将<meter>标签用于进度指示器类型的用户体验。我们有来自HTML5的<Progress>标签。

输入

这可能是我们最了解的部分，使用文本、密码等输入类型。输入类型的特殊用法很少。

将输入字段标记为必填字段

自动对焦

通过将光标放在输入元素上，自动将焦点放在输入元素上。

使用正则表达式进行验证

您可以使用正则表达式指定模式来验证输入。

颜色选取器

一个简单的颜色选择器。