2.3.3新增-两个特殊功能的元素(meter、progress)

最新推荐文章于 2023-03-15 09:37:47 发布

ssmoom

最新推荐文章于 2023-03-15 09:37:47 发布

阅读量766

点赞数 1

分类专栏： HTML5_CSS3_JavaScript

HTML5_CSS3_JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
		<title>2.3.3新增-两个特殊功能的元素(meter、progress)</title>
	</head>
	<body>
		HTML5还新增了如下两个具有特殊功能的元素。
		
		<p>
			1、meter：用于表示一个已知最大值和最小值的计数仪表。
			比如电池的剩余电量、速度表等。
			使用该元素时除了可指定id、style、class、hidden等通用属性之外，还可指定如下属性。<br>
			1)value：指定计数仪表的当前值。默认为0，可以为该属性指定一个浮点小数值。<br>
			2)min：指定计数仪表的最小值。默认为0，可以为该属性指定一个浮点小数值。<br>
			3)max：指定计数仪表的最大值。默认为1，可以为该属性指定一个浮点小数值。<br>
			4)low：指定计数仪表指定范围的最小值。该属性值必须大于等于min属性指定的值。<br>
			5)high：指定计数仪表指定范围的最大值。该属性值必须小于等于max属性指定的值。<br>
			6)optimum：指定计数仪表有效范围的最佳值。如果该值大于high属性指定的值，
			则意味着值越大越好；如果该值小于low属性指定的值，则意味着值越小越好。<br>
		</p>
		
		<p>
			2、progress：用于表示一个进度条。使用该元素时除了可指定id、style、class、hidden
			等通用属性之外，还可指定如下属性。<br>
			1)max：指定进度条完成时的值。<br>
			2)value：指定进度条当前完成的进度值。<br>
		</p>
		
		<p>
			Firefox暂时只支持progress元素，但Chrome、Opera等浏览器已经完全
			支持meter、progress这两个元素了。<br>
			eg：<br>
				当前行车速度是:<meter value="120" min="0" max="220" low="0" high="160">
				120</meter>千米/小时。<br/>
				任务完成比：<progress value="50" max="100">50/100</progress>
		</p>
		
	</body>
</html>