HTML 标量测量

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <meter> 标签用于在已知范围内显示标量测量值。它既可以表示分数值,也可以表示标量值。

在本实验中,你将学习如何在 HTML 中使用 <meter> 标签及其语法和属性。你还将看到一个基本示例,以说明 <meter> 标签的功能。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 选项卡以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/LayoutandSectioningGroup -.-> html/access_cons("`Accessibility Considerations`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70798{{"`HTML 标量测量`"}} html/head_elems -.-> lab-70798{{"`HTML 标量测量`"}} html/doc_flow -.-> lab-70798{{"`HTML 标量测量`"}} html/access_cons -.-> lab-70798{{"`HTML 标量测量`"}} html/forms -.-> lab-70798{{"`HTML 标量测量`"}} html/form_access -.-> lab-70798{{"`HTML 标量测量`"}} html/inter_elems -.-> lab-70798{{"`HTML 标量测量`"}} html/custom_attr -.-> lab-70798{{"`HTML 标量测量`"}} end

设置 HTML 文件

在这一步中,创建一个名为 index.html 的 HTML 文件,并添加基本的 HTML 结构。

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body></body>
</html>

<meter> 标签添加到 HTML 文件中

在这一步中,将 <meter> 标签添加到 HTML 文件中,并设置其 valuemaxmin 属性。

<meter value="50" min="0" max="100"></meter>

<meter> 标签添加标签

在这一步中,为 <meter> 标签添加一个标签,以提供更好的可访问性。

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100"></meter>

<meter> 标签添加低值范围

在这一步中,添加 low 属性以指定被视为低值的范围。

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>

<meter> 标签添加高值范围

在这一步中,添加 high 属性以指定被视为高值的范围。

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>

<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> 标签来显示标量测量值。

您可能感兴趣的其他 HTML 教程