HTML5的"progress"或"meter"有什么好的使用方法？

Question

HTML5的"progress"或"meter"有什么好的使用方法？

20

假如你有一个包含10页的调查问卷（每页一个问题）。在每一页的顶部，你都加入了文本：“第2题，共10题”。这种情况适合选择“progress”还是“meter”元素呢？

从语义上来看，“progress”似乎最适合。但是，我越看越觉得“meter”更为恰当。

<meter max="10" value="1">Question 1 of 10</meter>
<progress max="10" value="1">Question 1 of 10</progress>

- Bart

6个回答

8

从语义上讲，progress 确实似乎是在这里使用的正确选择。我还向HTML5 Doctor提出了这个问题，他们似乎也同意这一点。我的问题是，目前（7/5/11），progress支持非常不好。这使得在实际用例中很难使用。

作为一个权宜之计，我计划使用将新元素名称作为标准div元素中的类名的约定（又称-语义类名）。有关此想法的更多详细信息：http://jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names 以下是我的代码示例。在另一年或两年后，当这个元素得到更好的支持时，我将回去用真正的progress标签替换它。

<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="10">
    Question 1 of 10
</div>

- Bart

3

<meter>标签定义在已知范围内或分数值中的标量测量，也称为仪表。

在Google Chrome中，结果看起来像这样:

<progress>标签用于显示任务完成进度。

在Windows 7上，结果看起来像这样:

请注意：<meter>标签不应用于表示进度（如进度条）。要使用<progress>标签显示进度条。

- Raja Rama Mohan Thavalam

1

这些图片已经过时了，我认为至少在我的Windows Chrome 87上，它们看起来与这些截图完全不同，基本上是相同的，除了一个是绿色的，另一个是蓝色的。 - gman

2

由于这个值是确定的，所以使用“meter”似乎更好。尝试参考以下链接，看看是否有帮助：http://peter.sh/examples/?/html/meter-progress.html

- Ray

1

米制单位在IE浏览器中不受支持，即使是IE10也不行。

- Cor

-1

从视觉上来看，我认为计量表更加合适。

- SBSTP

1

“Visually speaking”？能解释一下吗？ - Bart

11

从视觉上来说，你应该使用 CSS。 - robertc

1

这让我想起了那句经典的《捉鬼敢死队》台词，“听着，你闻到什么味道了吗？” - Bart

1

在我看来，实际上这样做更好。而且使用其中一个真的很重要吗？ - SBSTP

3

@SBSTP：当然可以。语义化。 - You

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tak · Accepted Answer

根据最新的HTML5工作草案，progress标签最适合用于显示特定任务的进度。meter最适合用于与任务无关的测量，例如磁盘空间或内存使用情况。

progress元素表示任务完成的进度。

而

meter元素表示已知范围内的标量测量或分数值；例如磁盘使用情况、查询结果的相关性或投票人口中选择特定候选人的比例。

编辑 - 由于渲染和样式似乎是一个问题，您可能会更幸运地使用其他标签。例如，可以使用以下代码编写一个性感的进度导航器：

<nav class="progress">
    <ol>
        <li class="active">Your Info</li>
        <li>General</li>
        <li>Detailed</li>
        <li>Last Step</li>
    </ol>
</nav>

并使用类似于这样的方式进行样式设置。