html - HTML 5's "progress"或 "meter"的良好用法?

标签 html semantics

假设您有一份 10 页的调查(每页一个问题)。在每一页的顶部,您都包含文本“第 2 题,共 10 题”。这种东西适合“progress”或“meter”吗?

从语义上讲,“progress”最初似乎是最合适的。但是,我阅读和查看示例的次数越多,我认为“米”可能更合适。

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

最佳答案

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

The progress element represents the completion progress of a task.

鉴于

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

编辑 - 由于呈现和样式似乎是一个问题,使用其他标签可能会更幸运。例如,一个性感的进度导航器可以编码为:

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

并用一些东西来设计风格 like this .

关于html - HTML 5's "progress"或 "meter"的良好用法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6552100/

相关文章:

html - 哪些 HTML 标签更适合金钱?

HTML5 <section> 的内部 <article> 和标题

delimiter - 何时使用术语 “delimiter,” “terminator,”和 “separator”

python - 您是否应该在Python的非库代码中使用下划线_作为“访问修饰符指示符”?

php - 输入字段值在选择不同的下拉菜单选项时更改

html - Logo 未被悬停替换

html - 在页面中心彼此相邻的位置按钮

html - 在移动设备上调整顶部导航栏大小时出现问题

sql - 如何高效构建和存储语义图?

html - 在不应该的时候 flex child 包裹; flex 包装 : nowrap not working