Meisterhaftigkeit in der HTML Skalaren Messung

Einführung

Das HTML <meter>-Tag wird verwendet, um eine skalare Messung innerhalb eines bekannten Bereichs anzuzeigen. Es kann sowohl gebrochene Werte als auch skalare Werte darstellen.

In diesem Lab werden Sie lernen, wie das <meter>-Tag in HTML mit seiner Syntax und seinen Attributen verwendet wird. Sie werden auch ein einfaches Beispiel sehen, um die Funktionalität des <meter>-Tags zu veranschaulichen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) 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 Skalare Messung"}} html/head_elems -.-> lab-70798{{"HTML Skalare Messung"}} html/doc_flow -.-> lab-70798{{"HTML Skalare Messung"}} html/access_cons -.-> lab-70798{{"HTML Skalare Messung"}} html/forms -.-> lab-70798{{"HTML Skalare Messung"}} html/form_access -.-> lab-70798{{"HTML Skalare Messung"}} html/inter_elems -.-> lab-70798{{"HTML Skalare Messung"}} html/custom_attr -.-> lab-70798{{"HTML Skalare Messung"}} end

Setzen Sie die HTML-Datei auf

In diesem Schritt erstellen Sie eine HTML-Datei namens index.html und fügen die grundlegende HTML-Struktur hinzu.

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

Fügen Sie das `<meter>`-Tag zur HTML-Datei hinzu

In diesem Schritt fügen Sie das <meter>-Tag mit seinen Attributen value, max und min zur HTML-Datei hinzu.

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

Fügen Sie eine Bezeichnung für das `<meter>`-Tag hinzu

In diesem Schritt fügen Sie eine Bezeichnung für das <meter>-Tag hinzu, um eine bessere Zugänglichkeit zu gewährleisten.

<label for="meter">Mein Zähler:</label>
<meter id="meter" value="50" min="0" max="100"></meter>

Fügen Sie einen niedrigen Bereich zum `<meter>`-Tag hinzu

In diesem Schritt fügen Sie das Attribut low hinzu, um den Bereich anzugeben, der als niedriger Wert betrachtet werden muss.

<label for="meter">Mein Zähler:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>

Fügen Sie einen hohen Bereich zum `<meter>`-Tag hinzu

In diesem Schritt fügen Sie das Attribut high hinzu, um den Bereich anzugeben, der als hoher Wert betrachtet werden muss.

<label for="meter">Mein Zähler:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>

Fügen Sie einen optimalen Wert zum `<meter>`-Tag hinzu

In diesem Schritt fügen Sie das Attribut optimum hinzu, um den optimalen Wert der Anzeige festzulegen.

<label for="meter">Mein Zähler:</label>
<meter
  id="meter"
  value="50"
  min="0"
  max="100"
  low="30"
  high="80"
  optimum="50"
></meter>

Beenden Sie die HTML-Datei

In diesem Schritt beenden Sie die HTML-Datei, indem Sie ein Schließtag für die <body>- und <html>-Tags hinzufügen.

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body>
    <label for="meter">Mein Zähler:</label>
    <meter
      id="meter"
      value="50"
      min="0"
      max="100"
      low="30"
      high="80"
      optimum="50"
    ></meter>
  </body>
</html>

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie das HTML <meter>-Tag verwenden, um skalare Messwerte innerhalb eines bekannten Bereichs anzuzeigen. Sie haben gesehen, wie Sie das <meter>-Tag zu einer HTML-Datei hinzufügen und seine Attribute verwenden, um den Bereich von Werten anzugeben, die als niedrig, hoch und optimal betrachtet werden sollten. Sie haben auch ein Label zum <meter>-Tag hinzugefügt, um eine bessere Zugänglichkeit zu gewährleisten. Jetzt können Sie das <meter>-Tag verwenden, um skalare Messwerte in Ihren HTML-Dokumenten anzuzeigen.

HTML Skalare Messung

Einführung

Skills Graph

Setzen Sie die HTML-Datei auf

Fügen Sie das <meter>-Tag zur HTML-Datei hinzu

Fügen Sie eine Bezeichnung für das <meter>-Tag hinzu

Fügen Sie einen niedrigen Bereich zum <meter>-Tag hinzu

Fügen Sie einen hohen Bereich zum <meter>-Tag hinzu

Fügen Sie einen optimalen Wert zum <meter>-Tag hinzu