原文链接：https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0
作者：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>标签。
输入
这可能是我们最了解的部分，使用文本、密码等输入类型。输入类型的特殊用法很少。
将输入字段标记为必填字段
自动对焦
通过将光标放在输入元素上，自动将焦点放在输入元素上。
使用正则表达式进行验证
您可以使用正则表达式指定模式来验证输入。
颜色选取器
一个简单的颜色选择器。
