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


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

Применение элемента details в HTML5

Тег details в HTML5 абсолютно новый тег. В настоящее время этот тег поддерживается только последними версиями браузера Google Chrome. Но думаю что со временем все браузеры начнут его поддерживать. Этот элемент дает возможность скрыть и показать информацию по требованию посетителя сайта. У этого элемента есть свой атрибут open, который дает возможность изменить значение тега details (по умолчанию содержимое тега). Синтаксис написания очень простой:

<details open="open">Текст, форма, изображения и т.п.</details>

Давайте попробуем применить этот тег на практике:

<!DOCTYPE HTML>
<html>
 <head>
    <meta charset=utf-8>
  <title>Использование элемента details в HTML5</title>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-->
  </head>
 <body>  
   <details>
    <ul>
      <li>Пункт №1</li>
      <li>Пункт №2</li>
      <li>Пункт №3</li>
      <li>Пункт №4</li>
      <li>Пункт №5</li>
    </ul>
  </details>
 </body>
</html>

В результате браузер сам добавит специальный значок, указывающий на то, что элемент можно развернуть:

details в HTML5

Тег <figure> в HTML5

Этот элемент помогает группировать различные элементы друг с другом. Мне очень понравился этот элемент. Я думаю вы тоже будете его использовать на ваших сайтов. Например, можно красиво оформить рамку с изображением или видео файлом с подписью. Причем сама подпись должна быть оформлена с помощью тега figcaption. Рассмотрим небольшой пример, который поможет вам во всём разобраться:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>figure в HTML5</title>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-->  
  <style> 
  p{margin:10px auto;
	  width:95%}
   figure {
    background:#F0EBD9; 
    padding: 10px;      
    width: 30%; 
    float:right; 
	text-align:center;
	-moz-border-radius:5px; /* Радиус скругления */
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius:5px;
border:1px solid #CCC;
box-shadow:0 0 10px 0 #555555;
   } 
   figcaption {
	   background:#CCC;	   
   }
  </style>
 </head>
 <body>
  <article>
  <header>
  <h1>А здесь мы напишем основной текст статьи</h1>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
  <figure>
    <img src="img/9_val.jpg" alt="" width="90%" height="60%">
    <figcaption>"Девятый вал". Айвазовский. 1850 г.</figcaption>
   </figure>
    sed diem nonummy nibh euismod tincidunt ut lacreet
 dolore magna aliguam erat volutpat.</p>      
  </article>
 </body>
</html>

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

figure в HTML5

Вроде бы вполне неплохо получилось, вам так не кажется? Совсем скоро мы с вами перейдем к изучению форм, а пока предлагаю ещё раз просмотреть изученные элементы.



наверх