HTML5详情之新标签（一）

本文介绍的新标签有：可以展开与收起子节点部分的 details；与 input 标签配合，实现模糊查询的 datalist；进度条标签 progress。

details 标签

此标签可以将一些信息包裹在标签标题下。

标准代码与状态如下：

其中：details 标签是标题与内容的父级元素；summary 标签是 details 标签的子标签，作用是修改 details 标签的标题，只要在details 标签的包裹内，位置关系不影响它的作用；p 标签是可替换内容，作用是 details 的详情内容。

    <details>
      <summary>details</summary>
      <p>hello, this is details</p>
    </details>

收起状态【默认状态】

展开状态                     

作用：替代了以前我们手写展开与收起按钮，省去了样式与功能的编写部分，标签化使得功能规范化。

推荐用法：日历等插件、以及按钮状态的修改。

datalist 标签

此标签与 input 标签配合可以快速实现模糊搜索栏，可以省去大量模糊搜索栏的逻辑代码的编写，规范化代码也使得使用成本大大降低。

<input list="cars" />
  <datalist id="cars">
	<option value="BMW">
	<option value="Ford">
	<option value="Volvo">
</datalist>

用法：配合 array 中的 filter 选择器使用，可以将数据批量导入到 datalist 中的 option 中的 value 属性中，直接完成模糊搜索栏的制作。

效果：

推荐配合： input + datalist + array.filter 实现模糊搜索栏制作。

progress 标签

作用：一个标签直接完成进度条功能，可以搭配简单的定时器完成简易的沙漏功能。

简易代码如下：

    <progress max="100" value="3" id="33"></progress>
  <script type="text/javascript">
      var i = 0;
      setInterval(function () {
        if (i == 100) {
        		i = 0;
        }
        document.getElementById('33').setAttribute('value', i);
      	i++;
      },100)
  </script>

其中 max 属性表示进度条的最大值， value 是当前显示值部分。我使用了基础的定时器功能完成一个十秒倒计时功能。

部分效果图