Представление времени в HTML

HTMLBeginner
Практиковаться сейчас

Введение

HTML предоставляет тег time, который позволяет разработчикам представлять время или дату в человекочитаемом формате, который также может быть прочитанным для поисковых систем в машиночитаемом формате. В этом практическом занятии мы узнаем, как использовать тег time в HTML для создания отметки времени и даты.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Добавьте HTML-шаблон

Для создания HTML-файла нам нужно начать с HTML-шаблона. Скопируйте и вставьте следующий код в файл index.html.

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

Определите дату и время

Для определения даты и времени нам нужно использовать тег time с атрибутом datetime. Атрибут datetime задает дату и время в машиночитаемом формате. Добавьте следующий код внутри тега body, чтобы определить дату и время:

<p>
  Текущая дата и время -
  <time datetime="2022-07-23T18:30-05:00">23 июля 2022, 18:30</time>.
</p>

Добавьте допустимую длительность времени

Тег time также можно использовать для представления допустимой длительности времени. Мы можем добавить допустимую длительность времени к тегу time с использованием атрибута datetime. Добавьте следующий код внутри тега body, чтобы определить длительность времени:

<p>
  Общая длительность проекта составляла
  <time datetime="PT10M">10 минут</time>.
</p>

Сохраните файл index.html и откройте его в веб-браузере, чтобы просмотреть отметку времени и даты, созданную с использованием тега time.

Резюме

В этом практическом занятии мы узнали, как использовать тег time в HTML для создания отметки времени и даты. Мы также увидели, как определить допустимую длительность времени с использованием того же тега. Тег time - это мощный инструмент, который может быть использован разработчиками для создания представлений времени и даты, читаемых как человеком, так и машиной.