Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <details>



Пример

Укажите сведения, которые пользователь может открывать и закрывать по требованию:

<details>
  <summary>Центр Epcot</summary>
  <p>Epcot - это тематический парк на курорте Walt Disney World Resort с захватывающими достопримечательностями, международные павильоны, отмеченные наградами фейерверки и сезонные специальные мероприятия.</p>
</details>
Попробуйте сами »


Определение и использование <details>

Тег <details> определяет дополнительные сведения, которые пользователь может открывать и закрывать по требованию.

Tег <details> часто используется для создания интерактивного виджета, который пользователь может открывать и закрывать.По умолчанию виджет закрыт. Когда он открыт, он расширяется и отображает содержимое внутри.

Любой вид контента может быть помещен внутрь тега <details>.

Совет: Тег <summary> используется в сочетании с <details> для указания видимого заголовка для деталей.


Поддержка браузеров <details>

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает данный элемент.

Элемент
<details> 12.0 79.0 49.0 6.0 15.0

Атрибуты <details>

Атрибут Значение Описание
open open Указывает, что сведения должны быть видны (открыты) пользователю

Глобальные атрибуты <details>

Тег <details> также поддерживает Глобальные атрибуты в HTML.


События атрибутов <details>

Тег <details> также поддерживает События атрибутов в HTML.


Еще примеры <details>

Пример

Используйте CSS для стилизации <details> и <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>

<details>
  <summary>Центр Epcot</summary>
  <p>Epcot - это тематический парк на курорте Walt Disney World Resort с захватывающими достопримечательностями, международные павильоны, отмеченные наградами фейерверки и сезонные специальные мероприятия.</p>
</details>

</body>
</html>
Попробуйте сами »

Связные страницы <details>

HTML DOM reference: Объект details


Настройки CSS по умолчанию <details>

Большинство браузеров будет отображать элемент <details> со следующими значениями по умолчанию:

details {
  display: block;
}