Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Element-time-v-html5

Применение элемента time

Тег time в HTML5 позволяет кодировать время и даты, и отображать их в окне браузера в наглядном виде. Данный тег имеет два атрибута:
datetime — задаёт дату и время для данного текста;
pubdate — задаёт дату публикации статьи, поста.

Синтаксис написания для данного тега очень простой:

<time>дата и время</time>
<time datetime="дата и время">текст</time>
<time pubdate>дата и время</time>
<time pubdate datetime="дата и время">текст</time>

Вот как примерно можно оформить дату и время этого атрибута:

Значение Формат Пример
Год ГГГГ 2012
Месяц и год ГГГГ-ММ 2012-01
Полная дата ГГГГ-ММ-ДД 2012-01-19
Дата и время с минутами ГГГГ-ММ-ДДTчч:мм 2012-01-19T11:00
Дата и время с секундами ГГГГ-ММ-ДДTчч:мм:сс 2012-01-19T11:00:00
Дата и время с часовым поясом ГГГГ-ММ-ДДTчч:мм:сс±чч:мм 2012-01-19T18:11:00+01:00

Следует отметить две вещи.

Для закрепления данного урока приведу небольшой пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег time в html5</title>
  <style>  
   time {-moz-border-radius:3px; 
  -webkit-border-radius:3px;
  -khtml-border-radius:3px;
  border-radius:3px;
	   background:#CCC;
	   padding:7px;}
   article {
	   -moz-border-radius:8px; 
  -webkit-border-radius:8px;
  -khtml-border-radius:8px;
  border-radius:8px;
	   background:#F8F1DE;
	   padding:5px;
	   margin:10px auto;
	   text-align:center;
	   }
	  article p { background:#0CF;
	  width:70%;
	  padding:9px;
	  margin:10px auto;
	  -moz-border-radius:5px; 
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  border-radius:5px;} 	   
  </style>
 </head> 
 <body>
  <article>
   <p><time>2012-01-19</time> нужно купаться в прорубе</p>   
   <p><time pubdate datetime="2012-01-18">2012-01-18</time> 
был опубликован этот пост </p>   
  </article>
 </body> 
</html>

В результате должно получиться следующее:

Использование элемента time в html5

Ничего сложного в использовании этого элемента, я думаю, у вас возникнуть не должно. В следующем уроке мы познакомимся с ещё одним интересным элементом — тегом aside.



наверх