示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ
五、折叠组件（Accordion）折叠列表的需求也是比较常见的，点击标题展开对应的信息内容，这时 <details> 标签就派上用场了，示例效果如下所示：
gif
项目地址：https://codepen.io/madarsbiss/pen/zYdOVPV
六、日期选择（Date Picker）日期选择组件可以说是项目中必备的组件，想必大家都有自己比较常用的日期组件，如果没有复杂的样式和交互需求，使用<input type="date"> 这个标签就能轻松的胜任，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE
七、滑块组件（Slider）滑块组件也是一个比较常见的组件，主要应用在数值范围的筛选上，方便用户进行选择，这时我们可以使用 <input type="range"> ，我们可以设置最小值、最大值以及当前值，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv
八、内容编辑（Content Editor）为了让内容具有编辑性，你可以不必使用表单组件，比如 input、textarea 标签，你可以在可编辑的容器(div) 上添加 contenteditable 属性，就能很轻松的完成当前容器及所见即所得的编辑，示例如下所示：
