HTML5的“进度”或“计量表”的良好用法？

Question

假设您有10页的调查（每页一个问题）。在每个页面的顶部，您包含文本“问题2 of 10”。这种事情是“progress”或“meter”的良好候选人吗？

从语义上讲，“进步”最初似乎是最合适的。但是，我阅读和看的例子越多，我认为“米”可能更合适。

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

Answer 1

根据latest HTML5 working draft，progress标记最适合用于显示手头特定任务的进度。 meter最适用于与任务无关的工具，例如磁盘空间或内存使用情况。

  

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

尽管

  

meter元素表示标量   在已知范围内的测量，或a   分数值;例如磁盘   用法，查询的相关性   结果，或投票的一部分   人口选择了一个   特别候选人。

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

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

并使用like this内容设置样式。

Answer 2

从语义上讲，progress似乎在这里使用是正确的。我还向HTML5 Doctor提出了问题，他们似乎也同意这一点。我的问题是progress is very poorly supported目前全面（2011年7月5日）。这使得它在今天的实际使用案例中非常难以使用。

作为一个止损，我打算使用新元素名称作为标准div元素（A.K.A. - 语义类名）中的类名的约定。有关详细信息，请参阅此提示：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>

Answer 3

由于这个值是确定的，所以看起来“米”会更好。 试试这个参考，看看它是否有帮助： http://peter.sh/examples/?/html/meter-progress.html

Answer 4

从视觉上讲，我认为仪表更合适。

Answer 5

IE不支持仪表。甚至不是IE10。

Answer 6

绝对是米;见demo here

Answer 7

标记定义已知范围或小数值内的标量测量。这也称为仪表。

在Google Chrome上，生成的仪表如下所示：

progress元素用于显示任务的完成进度。

在Windows 7上，生成的进度如下所示：

注意：标签不应用于指示进度（如进度条中所示）。对于进度条，请使用标记。