前言

本文将介绍一些不常见但有用且高效的 html5 标签，这些 HTML 标签在大多数现代浏览器中都有很好的支持，不需要借助第三方库或编写额外代码，就能实现不错的效果，将节省大量时间并提高工作效率。（还是很值得了解的🤔）

1. Details + Summary

detail 与 summary 标签组合使用，就能实现折叠面板（Collapse）的效果：

<details>
    <summary>Details👈</summary>
    Something small enough to escape casual notice.
</details>

值得一提的是，这在 Markdown 中也可以使用，掘金文章就支持，直接👇Details 试试：

2. Fieldset + Legend

<Fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素），如果其中有 <legend> 元素，会放在块级框起始处的边界上:

<fieldset>
  <legend>Choose your favorite monster</legend>

  <input type="radio" id="kraken" name="monster">
  <label for="kraken">Kraken</label><br/>

  <input type="radio" id="sasquatch" name="monster">
  <label for="sasquatch">Sasquatch</label><br/>

  <input type="radio" id="mothman" name="monster">
  <label for="mothman">Mothman</label>
</fieldset>

3. Meter

<meter> 元素用来显示已知范围的标量值或者分数值。简单来说，使用该元素，就能实现计量器的效果：

Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.

指定min和max属性就能确定区间，如果value不在区间内，value就会取最接近的一端的值。此外它也能和表单关联、设定上下限值等，更多用法请看 MDN

4. Progress

从其名字上就知道<progress>元素就是作为进度条展示。在不指定 value 的情况下，它将来回播放展示：

<progress></progress>

同样的，也可以为其指定 value 和最大值（max）：

<progress value="70" max="100">70 %</progress>

可以看到，在展示上和 meter 标签相似，对于简单的展示任务进度场景，使用它完全没问题。

5. Datalist

<datalist> 可以包含一组 <option> 元素，用于表示其它表单控件可选值。例如普通的文本输入框是没有可选输入值的，但借助 datalist 可以做到：

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

只需要为 input 标签指定 list 属性，其值为 datalist 元素的 id 就可以将二者关联起来。并且它本身就具备了模糊搜索🔍功能。如果在 option 标签内添加文本，也会展示在 datalist 中作为选项的描述信息：

<option value="Chocolate">Recommended today</option>

6. OptGroup

有时候需要为 <select> 元素中的选项创建分组，这时 <optgroup> 就派上用场了：

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

下面是在 Firefox 浏览器上的效果：

7. Input 系列

通过指定 <input> 的 type 属性可以得到不同的表单控件，这里只介绍两种不常见但是非常有用的——

2.1 ColorPicker

指定 type 为 color，就能创建一个颜色选择器（ColorPicker）：

<input type="color">

据 MDN 介绍，此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。在 93 版本 Chrome（Mac）上呈现的效果如下：

它甚至内置了屏幕取色器功能。有兴趣的小伙伴可以在不同平台、浏览器上看下，还是相当惊艳的。通过指定 value 属性可以指定默认颜色值，不指定的情况下默认是 #000000（全黑）。

2.2 Slider

当 type 为 range 时，就可以实现一个滑动输入条（Slider）：

<p>Audio settings:</p>

<div>
  <input type="range" id="volume" name="volume" min="0" max="11">
  <label for="volume">Volume</label>
</div>

<div>
  <input type="range" id="cowbell" name="cowbell" min="0" max="100" value="90" step="10">
  <label for="cowbell">Cowbell</label>
</div>

结语

本文所介绍的 HTML 标签虽然在绝大多数浏览器下都支持，并且多数都支持样式覆盖，但因为在不同浏览器下表现存在差异，因此不推荐你在正式项目上使用它们，现成的 UI 库已经足够。在一些简单场景下使用它们还是能节省很多时间的。

文中所有示例来自 MDN，有兴趣的小伙伴还可以在上面找找还有那些罕见却有用的标签，欢迎在评论区补充👏

本文由推啊前端团队 @Winter97 同学整理撰写