介绍
HTML <meter> 标签用于在已知范围内显示标量测量值。它既可以表示分数值，也可以表示标量值。
在本实验中，你将学习如何在 HTML 中使用 <meter> 标签及其语法和属性。你还将看到一个基本示例，以说明 <meter> 标签的功能。
注意：你可以在
index.html中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 选项卡以预览网页。
设置 HTML 文件
在这一步中，创建一个名为 index.html 的 HTML 文件，并添加基本的 HTML 结构。
<!doctype html>
<html>
<head>
<title>HTML Meter Tag Lab</title>
</head>
<body></body>
</html>
将 标签添加到 HTML 文件中
在这一步中，将 <meter> 标签添加到 HTML 文件中，并设置其 value、max 和 min 属性。
<meter value="50" min="0" max="100"></meter>
为 标签添加标签
在这一步中，为 <meter> 标签添加一个标签，以提供更好的可访问性。
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100"></meter>
为 标签添加低范围值
在这一步中，添加 low 属性以指定被视为低值的范围。
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>
为 标签添加高范围值
在这一步中，添加 high 属性以指定被视为高值的范围。
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>
为 标签添加最佳值
在这一步中，添加 optimum 属性以设置仪表的最佳值。
<label for="meter">My Meter:</label>
<meter
id="meter"
value="50"
min="0"
max="100"
low="30"
high="80"
optimum="50"
></meter>
完成 HTML 文件的编写
在这一步中，通过添加 <body> 和 <html> 标签的闭合标签来完成 HTML 文件。
<!doctype html>
<html>
<head>
<title>HTML Meter Tag Lab</title>
</head>
<body>
<label for="meter">My Meter:</label>
<meter
id="meter"
value="50"
min="0"
max="100"
low="30"
high="80"
optimum="50"
></meter>
</body>
</html>
总结
在本实验中，你学习了如何使用 HTML <meter> 标签来显示已知范围内的标量测量值。你了解了如何将 <meter> 标签添加到 HTML 文件中，并使用其属性来指定应被视为低值、高值和最佳值的范围。你还为 <meter> 标签添加了标签以提高可访问性。现在，你可以在 HTML 文档中使用 <meter> 标签来显示标量测量值。
