html5_滑条等其他标签

 1. meter范围

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签

几个重要的属性：

Min为最小范围

Max为最大范围

High的值被视为比较高的取值

Low的值被视为比较低的取值

Value为当前具体的值

例如：

<meter value="20" min="0" max="100" high="80" low="60"></meter>

可以理解为满分100，80分为高分，60分为低分，当value在不同区间时显示的颜色是不同的。

如，当value为90时：

 

当value为70时：

 

当value为40时：

 

 

2. progress进度条

进度条使用progress标签，它有两个属性，value和max，如：

<progress value="20" max="100"></progress>

 

注：如果一个属性都不写，如下：

<progress></progress>

效果是进度条一直在那里循环动：

 

 

不同浏览器效果也不同：

 

 

 

3. range滑条

Range不是标签，是input标签的一种取值类型：

<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">

0<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

 

4. Number数字框

数字框和上面的range一样，是input标签的一个取值类型，例子见range。

 

5. 文本输入框默认文字

一个文本框，还没有输入任何内容前，在框内显示一些文字，可用于提示用户输入。

<input type="text" placeholder="请输入账号"></input>