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.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Fügen Sie das HTML-Vorlagenformat 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>

Definiere Datum und Uhrzeit

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üge 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.