Meisterung der HTML-Zeitdarstellung

Einführung

HTML bietet ein time-Tag, das es Entwicklern ermöglicht, menschenlesbare Zeit oder Datum darzustellen, das auch von Suchmaschinen im maschinenlesbaren Format gelesen werden kann. In diesem Lab werden wir lernen, wie das time-Tag in HTML verwendet wird, um einen Zeit- und Datumsstempel zu erstellen.

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/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70868{{"HTML-Zeitdarstellung"}} html/head_elems -.-> lab-70868{{"HTML-Zeitdarstellung"}} html/charset -.-> lab-70868{{"HTML-Zeitdarstellung"}} html/lang_decl -.-> lab-70868{{"HTML-Zeitdarstellung"}} html/inter_elems -.-> lab-70868{{"HTML-Zeitdarstellung"}} html/custom_attr -.-> lab-70868{{"HTML-Zeitdarstellung"}} end

Fügen Sie das HTML-Vorlagecode hinzu

Um eine HTML-Datei zu erstellen, müssen wir mit einem HTML-Vorlagecode beginnen. Kopieren und einfügen Sie den folgenden Code in die index.html-Datei.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Time Tag Lab</title>
  </head>
  <body></body>
</html>

Definieren Sie Datum und Zeit

Um ein Datum und eine Zeit zu definieren, müssen wir das time-Tag mit einem datetime-Attribut verwenden. Das datetime-Attribut gibt das Datum und die Zeit im maschinenlesbaren Format an. Fügen Sie den folgenden Code innerhalb des body-Tags hinzu, um das Datum und die Zeit zu definieren:

<p>
  Das aktuelle Datum und die aktuelle Zeit sind
  <time datetime="2022-07-23T18:30-05:00">23. Juli 2022, 18:30 Uhr</time>.
</p>

Fügen Sie eine gültige Zeitdauer hinzu

Das time-Tag kann auch verwendet werden, um eine gültige Zeitdauer darzustellen. Wir können einer gültigen Zeitdauer zum time-Tag mithilfe des datetime-Attributs hinzufügen. Fügen Sie den folgenden Code innerhalb des body-Tags hinzu, um die Zeitdauer zu definieren:

<p>
  Die Gesamtlaufzeit des Projekts betrug
  <time datetime="PT10M">10 Minuten</time>.
</p>

Speichern Sie die index.html-Datei und öffnen Sie sie in einem Webbrowser, um den Zeit- und Datumsstempel anzusehen, der mit dem time-Tag erstellt wurde.

Zusammenfassung

In diesem Lab haben wir gelernt, wie das time-Tag in HTML verwendet wird, um einen Zeit- und Datumsstempel zu erstellen. Wir haben auch gesehen, wie eine gültige Zeitdauer mit dem gleichen Tag definiert wird. Das time-Tag ist ein leistungsstarkes Tool, das von Entwicklern verwendet werden kann, um menschen- und maschinenlesbare Zeit- und Datumsdarstellungen zu erstellen.