Тег summary: Тег | htmlbook.ru

Содержание

| HTML | WebReference

Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации. Элемент <summary> должен идти первым внутри <details>.

Синтаксис

<details>
 <summary>Текст</summary>
</details>

Закрывающий тег

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>summary</title> </head> <body> <details> <summary>Информация об авторе</summary> <p>Бендер Родригез</p> </details> </body> </html>

Результат данного примера показан на рис. 1.

Вид <summary> в браузере

Рис. 1. Вид <summary> в браузере

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.01.2017

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

Атрибут summary | htmlbook.ru



Атрибут summary | htmlbook.ru 
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Атрибут summary предназначен для краткого описания таблицы или указания ее предназначения. В отличие от тега <caption> содержимое summary никак не отображается и в браузере не выводится, однако может использоваться поисковыми системами или речевыми браузерами.

Синтаксис

<table summary="текст">...</table>

Значения

Любой текст.

Значение по умолчанию

Нет.

Обязательный атрибут

Нет.

Пример

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Тег TABLE, атрибут summary</title>
 </head>
 <body>
  <table border="1" summary="Таблица умножения">
   <tr>
    <th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th>
    <th>7</th><th>8</th><th>9</th><th>10</th>
   </tr>
   <tr>
    <th>1</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
    <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   </tr>
   <tr>
    <th>2</th><td>2</td><td>4</td><td>6</td><td>8</td><td>10</td>
    <td>12</td><td>14</td><td>16</td><td>18</td><td>20</td>
   </tr>
   <tr>
    <th>3</th><td>3</td><td>6</td><td>9</td><td>12</td><td>15</td>
    <td>18</td><td>21</td><td>24</td><td>27</td><td>30</td>
   </tr>
   <tr>
    <th>4</th><td>4</td><td>8</td><td>12</td><td>16</td><td>20</td>
    <td>24</td><td>28</td><td>32</td><td>36</td><td>40</td>
   </tr>
   <tr>
    <th>5</th><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td>
    <td>30</td><td>35</td><td>40</td><td>45</td><td>50</td>
   </tr>
   <tr>
    <th>6</th><td>6</td><td>12</td><td>18</td><td>24</td><td>30</td>
    <td>36</td><td>42</td><td>48</td><td>54</td><td>60</td>
   </tr>
   <tr>
    <th>7</th><td>7</td><td>14</td><td>21</td><td>28</td><td>35</td>
    <td>42</td><td>49</td><td>56</td><td>63</td><td>70</td>
   </tr>
   <tr>
    <th>8</th><td>8</td><td>16</td><td>24</td><td>32</td><td>40</td>
    <td>48</td><td>56</td><td>64</td><td>72</td><td>80</td>
   </tr>
   <tr>
    <th>9</th><td>9</td><td>18</td><td>27</td><td>36</td><td>45</td>
    <td>54</td><td>63</td><td>72</td><td>81</td><td>90</td>
   </tr>
   <tr>
    <th>10</th><td>10</td><td>20</td><td>30</td><td>40</td><td>50</td>
    <td>60</td><td>70</td><td>80</td><td>90</td><td>100</td>
   </tr>
 </table>
</body>
</html>
О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Элементы details и summary — Веб-стандарты

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

Мы можем использовать <details> для создания «виджетов-аккордеонов», которые пользователь может разворачивать и сворачивать. Внутри этого элемента можно разместить любое содержимое.

Поддержка браузерами#

Прежде чем мы продолжим, вам нужно учесть, что сейчас только Chrome поддерживает элемент <details>. Скоро к нему присоединится и Opera, но немного костылей нам все-таки понадобится. Что ж, запускайте Chrome, и давайте смотреть.

Использование <details>#

Имеются два элемента: <details> и необязательный <summary>. Элемент <details> — это обёртка для содержимого, которое мы хотим показать и скрыть, а <summary> содержит описание и заголовок этой группы. Формально <summary>

нам не нужен. В его отсутствие браузер подставит текст по умолчанию, например «details» в Chrome. Давайте взглянем на код:

<details>
    <summary>Покажи-скрой меня</summary>
    <p>Бурное развитие внутреннего туризма привело Томаса Кука.</p>
</details>

Вы можете посмотреть это в действии на jsbin. Даже этот простой пример прекрасно демонстрирует эффект переключения. Без JavaScript!

Атрибут open#

В вышеприведенном примере содержимое скрыто при загрузке страницы. Мы можем сделать его видимым по умолчанию, добавив одиночный атрибут open для <details>, пример на jsbin:

<details open>
    <summary>Покажи-скрой меня</summary>
    <p>Бурное развитие внутреннего туризма привело Томаса Кука.</p>
</details>

Атрибута closed не существует. Поэтому, опуская open, вы по умолчанию подразумеваете closed.

Элемент <summary>#

Мы бегло взглянули на <summary> в действии, теперь остановимся на нём подробнее. Внутри

<summary> могут использоваться строчные элементы, такие как <span> или <strong>. Для чего это может быть нужно? Например, для дополнительного оформления или, как предлагает спецификация, использования <label> для элемента формы. По крайней мере, было бы удобно, если бы подобная конструкция работала корректно:

<details>
    <summary><label for="name">Имя:</label></summary>
    <input type="text" name="name" />
</details>

Теоретически, нажатие на <summary> должно раскрывать содержимое элемента <details>. Но в этом примере содержимое не будет развернуто, потому что вы, фактически, взаимодействуете с <label>, который переводит фокус на соответствующий <input> — даже если он скрыт с помощью <details>.

Честно говоря, этот момент еще требует прояснения. А что по вашему мнению должно происходить? Возможно, у разработчиков браузеров, читающих эту статью, есть какие-то идеи? 🙂

Вложенность <details>
#

Вы можете помещать <details> друг в друга, если хотите, как это сделано в следующем, вполне валидном примере:

<details>
    <summary>Вопрос 1</summary>
    <p>Население превышает широкий кристаллический фундамент.</p>
    <details>
        <summary>Приложенные документы</summary>
        <ul>
            <li><a href="#">Болгары очень дружелюбны;</a></li>
            <li>Скумбрия неумеренно перевозит вулканизм;</li>
            <li>Дождливая погода, куда входят Пик-Дистрикт;</li>
            <li>Белый саксаул дегустирует живописный утконос;</li>
        </ul>
    </details>
</details>

Примеры использования#

Так в каких же случаях вы можете использовать <details>? Первое, что приходит в голову — FAQ. Разработчики часто используют для них «аккордеоны», поэтому <details> замечательно подходит.

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

Вы можете использовать <details> для сворачивания и разворачивания блока комментариев в блоге, для профиля пользователя, для описания загружаемого файла, для сложных форм или в веб-приложениях, как показано в этом примере из спецификации:

Пример использования <details> из спецификации.

На самом деле, даже глядя сейчас на админку WordPress, я вижу множество возможностей использования <details>. Если у вас есть ещё какие-то идеи и предложения — расскажите о них в комментариях.

Оформление#

Как же нам оформить эту штуку? Для элемента, раскрывающего содержимое, в WebKit вы можете использовать псевдоэлемент ::-webkit-details-marker. Небольшой пример:

details summary::-webkit-details-marker {
    background: red;
    color: #fff;
    font-size: 500%;
}

Мы также можем позиционировать этот элемент по отношению к родителю. Здесь, например, он прижат к правому краю. В общем-то, и все.

А как же заменить раскрывающий элемент своей иконкой? Используя выборку по атрибуту, вы можете определить, когда <details> раскрыт, а когда закрыт, и применить соответствующее фоновое изображение. Мы делаем примерно то же самое в этом примере, за исключением того, что вместо фонового изображения мы используем псевдоэлемент ::after:

summary::-webkit-details-marker {
    display: none
}

summary::after {
    background: red;
    border-radius: 5px;
    content: "+";
    color: #fff;
    float: left;
    font-size: 1.5em;
    font-weight: bold;
    margin: -5px 10px 0 0;
    padding: 0;
    text-align: center;
    width: 20px;
}

details[open] summary::after {
    content: "-";
}

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

Выборка по атрибуту details[open] скрывает в себе некоторые интересные возможности. Как хорошие HTML5-доктора, мы создали доработанный пример, показанный на этом скриншоте:

Оформленный <details> в Chrome.

Было бы интересно (хотя это и не всегда уместно), если бы мы могли использовать CSS-трансформации для анимации разворачивания и сворачивания <details>, но пока это невозможно.

Доступность#

К сожалению, на момент написания статьи отсутствует возможность управления <details> с помощью клавиатуры. Стив Фолкнер пишет:

Проблема в том, что на данный момент отсутствует поддержки клавиатуры и нет никакой информации для обеспечения доступности.

Попробуйте сами. Если вы раскроете элемент <details> с помощью мыши, тогда вы сможете использовать клавиатуру для навигации по вложенным элементам, но вы также должны иметь возможность открывать и закрывать <details> с клавиатуры. Что ж, неидеально, но я уверен, что разработчики Chrome скоро с этим разберутся. Правда, ребята?

Обратная совместимость#

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

Многие из вас захотят использовать Modernizr для определения возможностей браузера, но на данный момент в Modernizr отсутствует проверка поддержки <details>. Матиас, автор приведенного выше решения для обратной совместимости, предлагает использовать этот Modernizr-сниппет.

Зачем вообще это использовать?#

Конечно, дарёному коню в зубы не смотрят, но все-таки — почему этот виджет существует в HTML5? Что ж, как и в случае с другими возможностями HTML5, он просто делает нашу жизнь легче. Реализация таких элементов, как календарь, слайдер, прогресс-бар, а теперь ещё и «аккордеон», становится гораздо проще и не требует использования JavaScript. Кто знает, что будет следующим? Нативные табы? Было бы здорово 🙂

В заключение#

В этой статье мы продемонстрировали, как использовать элементы <details> и <summary>. Элемент <details> при помощи <summary> создаёт естественный для браузера интерактивный раскрывающийся виджет.

На текущий момент <details> работает только в Chrome, но, надеюсь, эта ситуация в скором времени изменится. Пока что мы можем использовать в CSS только ::-webkit-details-marker, но есть и множество других CSS-техник. Если у вас есть какой-либо опыт или идеи для использования элемента <details>, расскажите об этом в комментариях.

Пояснение элементов “Details” и “Summary”

Многие библиотеки JavaScript были разработаны для того, чтобы размещать на сайтах дополнительные интерактивные виджеты. Аналогичными средствами обладает и HTML5. В этой статье мы рассмотрим один из таких элементов под названием <details> (а значит автоматически и элемент <summary>), который дает возможность создавать интерактивные виджеты, похожие на аккордеон.

<details> может использоваться в любом месте в пределах тега . Вот простой пример его использования:

<details>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

В приведенном выше примере использован элемент <details>, содержащий абзац, что подчеркивает его сходство с другими элементами секционирования HTML. Он определяет семантический раздел, который может содержать дочерние элементы, такие как изображения с элементами <figure>, элементы форм, такие как <input> и <textarea>, и даже вложенные массивы других элементов <details>.

Единственное отличие заключается в том, как браузеры отображают этот элемент. Поддерживающие его браузеры, такие как Google Chrome, Safari и последняя версия Opera выводят его с небольшим треугольником сбоку:


Элемент <details> работает как элемент выпадающего виджета, в котором контент изначально скрыт. Кликнув по стрелке, вы можете открыть скрытый контент. Также можно выделить его с помощью клавиш Tab, Space или клавиши Enter:

После того, как откроете данные элемента, если просматриваете исходный код с помощью инструментов для разработчиков, вы увидите, что, когда элемент находится в открытом состоянии, браузер добавляет к нему атрибут open. На самом деле мы можем добавить атрибут open в <details> вручную. Тогда содержимое будет отображаться видимым по умолчанию:

<details open >
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

<details> применяется вместе с тегом <summary>; два элемента предназначены для совместного использования, но <summary> является необязательным.

Так что же происходит, когда вы используете его?

<details open>
    <summary>Hello World</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

В приведенном выше примере надпись «Подробнее» будет заменена на «Hello World»:

Как уже упоминалось выше, <details> может содержать другие вложенные элементы <details>, например:

<details>
    <summary>Hello World</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    <details>
        <summary>Hi, How are you?</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    </details>
</details>

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


Но данную проблему можно легко решить, добавив некоторые простые стили.

Стили для элементов <details> и <summary> могут задаваться так же, как и для любых других блочных элементов; выберите их с помощью селектора элемента, класса или идентификатором и создайте блок свойств, чтобы задать стиль для этих элементов:

details {
    padding: 15px;
    background-color: #f6f7f8;
    margin-bottom: 20px;
}

Также можно использовать селектор атрибута, чтобы указать стили для открытого состояния:

details[open] {
    /* здесь сами  стили */
}

Также вы можете задать стили для элемента <summary>. Например, если вы наводите курсор мыши на кнопку или ссылку, то курсор обычно приобретает вид указателя (ладонь с вытянутым указательным пальцем).

Но для элемента <summary>, который также является кликабельным, курсор приобретает вид текстового курсора, что выглядит немного неестественно. Можно отобразить курсор в виде указателя:

summary {
    cursor: pointer;
  }

А можно ли задать стили для стандартного маркера в виде маленького треугольника? Webkit использует для этой цели псевдо-элемент ::-webkit-details-marker. Благодаря этому мы можем задать для треугольника стили по умолчанию, такие как цвет, цвет фона, а также размер:

summary::-webkit-details-marker {
    color: #fff;
    background-color: #000;
}

К сожалению, заменить треугольник непосредственно через ::-webkit-details-marker невозможно. Единственное работающее решение — это изменить его с помощью ::before или ::after:

summary::-webkit-details-marker {
    display: none;
}
summary:before {
    content: "2714"; /* новая иконка */
    color: #696f7c;
    margin-right: 5px;
}

Поддержка браузерами этих двух элементов значительно улучшилась в последние два года. В 2011 и 2012 годах единственным браузером, который мог отображать <details> и <summary>, был Google Chrome. Safari и Opera только недавно начали поддерживать эти элементы.

Так как поддержка в Firefox и Internet Explorer до сих пор оставляет желать лучшего, появилось несколько вариантов универсализации, которые имитируют нужный функционал, например, jQuery Details. Хотя это решение и опирается на JQuery, но размер его файла намного меньше, чем аналог библиотеки JQuery UI.

После его реализации, стили треугольника задаются обычным способом:

summary:before {
    content: "25B8"; /* Символ unicode маленького треугольника  */
    color: #000;
    margin-right: 5px;
}

Вы уже встречались с этим элементом. Например, некоторые интернет-магазины «упаковывают» с помощью него списки желаний. Или используют его в сайдбаре, чтобы отфильтровать результаты:


<details> и <summary> также прекрасно подходят для организации справочных разделов. Они часто встречаются на страницах, где результаты можно отфильтровать по различным критериям, например, по цене. Я создал демо-версию, которой вы можете свободно пользоваться.

Новый элемент становится все более важен. Когда-нибудь разработка сайтов или веб-приложений с помощью простых виджетов будет меньше зависеть от библиотек JavaScript.

Данная публикация представляет собой перевод статьи «Explaining the “Details” and “Summary” Elements» , подготовленной дружной командой проекта Интернет-технологии.ру

Руководство по программированию на C#.

  • Чтение занимает 2 мин

В этой статье

СинтаксисSyntax

<summary>description</summary>

ПараметрыParameters

ПримечанияRemarks

Тег <summary> следует использовать для описания типа или элемента типа.The <summary> tag should be used to describe a type or a type member. Чтобы добавить дополнительную информацию в описание типа, используйте <remarks>.Use <remarks> to add supplemental information to a type description. Чтобы включить средства документации, такие как DocFX и Sandcastle, для создания внутренних гиперссылок на страницы документации для элементов кода, используйте атрибут cref.Use the cref Attribute to enable documentation tools such as DocFX and Sandcastle to create internal hyperlinks to documentation pages for code elements.

Текст в теге <summary> является единственным источником сведений о типе для технологии IntelliSense и также отображается в окне обозревателя объектов.The text for the <summary> tag is the only source of information about the type in IntelliSense, and is also displayed in the Object Browser Window.

Чтобы обработать комментарии документации и сохранить их в файл, выполняйте сборку с параметром -doc.Compile with -doc to process documentation comments to a file. Для создания окончательной документации на основе сгенерированного компилятором файла можно создать пользовательское средство или применить такие средства, как DocFX или Sandcastle.To create the final documentation based on the compiler-generated file, you can create a custom tool, or use a tool such as DocFX or Sandcastle.

ПримерExample

// compile with: -doc:DocFileName.xml

/// text for class TestClass
public class TestClass
{
    /// <summary>DoWork is a method in the TestClass class.
    /// <para>Here's how you could make a second paragraph in a description. <see cref="System.Console.WriteLine(System.String)"/> for information about output statements.</para>
    /// <seealso cref="TestClass.Main"/>
    /// </summary>
    public static void DoWork(int Int1)
    {
    }

    /// text for Main
    static void Main()
    {
    }
}

В предыдущем примере выводится следующий XML-файл.The previous example produces the following XML file.

<?xml version="1.0"?>
<doc>
    <assembly>
        <name>YourNamespace</name>
    </assembly>
    <members>
        <member name="T:TestClass">
            text for class TestClass
        </member>
        <member name="M:TestClass.DoWork(System.Int32)">
            <summary>DoWork is a method in the TestClass class.
            <para>Here's how you could make a second paragraph in a description. <see cref="M:System.Console.WriteLine(System.String)"/> for information about output statements.</para>
            </summary>
            <seealso cref="M:TestClass.Main"/>
        </member>
        <member name="M:TestClass.Main">
            text for Main
        </member>
    </members>
</doc>

ПримерExample

В следующем примере показано, как создать ссылку cref на универсальный тип.The following example shows how to make a cref reference to a generic type.

// compile with: -doc:DocFileName.xml

// the following cref shows how to specify the reference, such that,
// the compiler will resolve the reference
/// <summary cref="C{T}">
/// </summary>
class A { }

// the following cref shows another way to specify the reference,
// such that, the compiler will resolve the reference
// <summary cref="C &lt; T &gt;">

// the following cref shows how to hard-code the reference
/// <summary cref="T:C`1">
/// </summary>
class B { }

/// <summary cref="A">
/// </summary>
/// <typeparam name="T"></typeparam>
class C<T> { }

class Program
{
    static void Main() { }
}

В предыдущем примере выводится следующий XML-файл.The previous example produces the following XML file.

<?xml version="1.0"?>
<doc>
    <assembly>
        <name>CRefTest</name>
    </assembly>
    <members>
        <member name="T:A">
            <summary cref="T:C`1">
            </summary>
        </member>
        <member name="T:B">
            <summary cref="T:C`1">
            </summary>
        </member>
        <member name="T:C`1">
            <summary cref="T:A">
            </summary>
            <typeparam name="T"></typeparam>
        </member>
    </members>
</doc>

См. такжеSee also

Атрибут summary | HTML | WebReference

Атрибут summary предназначен для краткого описания таблицы или указания её предназначения. В отличие от элемента <caption> содержимое summary никак не отображается и в браузере не выводится, однако может использоваться поисковыми системами или речевыми браузерами.

Данный атрибут устарел, не используйте его.

Синтаксис

<table summary="<текст>">...</table>

Значения

Произвольный текст.

Значение по умолчанию

Пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TABLE, атрибут summary</title> </head> <body> <table border="1" summary="Таблица умножения"> <tr> <th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th> <th>7</th><th>8</th><th>9</th><th>10</th> </tr> <tr> <th>1</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td> </tr> <tr> <th>2</th><td>2</td><td>4</td><td>6</td><td>8</td><td>10</td> <td>12</td><td>14</td><td>16</td><td>18</td><td>20</td> </tr> <tr> <th>3</th><td>3</td><td>6</td><td>9</td><td>12</td><td>15</td> <td>18</td><td>21</td><td>24</td><td>27</td><td>30</td> </tr> <tr> <th>4</th><td>4</td><td>8</td><td>12</td><td>16</td><td>20</td> <td>24</td><td>28</td><td>32</td><td>36</td><td>40</td> </tr> <tr> <th>5</th><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td> <td>30</td><td>35</td><td>40</td><td>45</td><td>50</td> </tr> <tr> <th>6</th><td>6</td><td>12</td><td>18</td><td>24</td><td>30</td> <td>36</td><td>42</td><td>48</td><td>54</td><td>60</td> </tr> <tr> <th>7</th><td>7</td><td>14</td><td>21</td><td>28</td><td>35</td> <td>42</td><td>49</td><td>56</td><td>63</td><td>70</td> </tr> <tr> <th>8</th><td>8</td><td>16</td><td>24</td><td>32</td><td>40</td> <td>48</td><td>56</td><td>64</td><td>72</td><td>80</td> </tr> <tr> <th>9</th><td>9</td><td>18</td><td>27</td><td>36</td><td>45</td> <td>54</td><td>63</td><td>72</td><td>81</td><td>90</td> </tr> <tr> <th>10</th><td>10</td><td>20</td><td>30</td><td>40</td><td>50</td> <td>60</td><td>70</td><td>80</td><td>90</td><td>100</td> </tr> </table> </body> </html>

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.01.2017

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

HTML/Элемент summary

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элемент summary</title> </head> <body> <h2>Пример использования элемента "summary"</h2> <p>Социология &#8210; это наука об обществе или обществознание. Термин был введен в середине ХIХ веке французским социологом О. Контом. Конт предполагал создать некую интегральную науку, объединяющую различные виды знаний в единую систему. Однако постепенно социология выделилась как самостоятельная наука со своим, отличным от других наук, предметом.</p> <details> <summary>Ещё</summary> <p>Социология изучает, прежде всего, социальную сферу жизнедеятельности людей: социальную структуру, социальные институты и отношения, социальные качества личности, социальное поведение, общественное сознание и так далее. При этом объектом исследования социологии может быть как все общество в его целостности и системности, так и отдельные его «элементы».</p> </details> </body> </html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент summary</title>
</head>
<body>
<h2>Пример использования элемента "summary"</h2>
<p>Социология &#8210; это наука об обществе или обществознание. Термин был введен в середине ХIХ веке французским социологом О. Контом. Конт предполагал создать некую интегральную науку, объединяющую различные виды знаний в единую систему. Однако постепенно социология выделилась как самостоятельная наука со своим, отличным от других наук, предметом.</p>
<details>
<summary>Ещё</summary>
<p>Социология изучает, прежде всего, социальную сферу жизнедеятельности людей: социальную структуру, социальные институты и отношения, социальные качества личности, социальное поведение, общественное сознание и так далее. При этом объектом исследования социологии может быть как все общество в его целостности и системности, так и отдельные его «элементы».</p>
</details>
</body>
</html>

HTML резюме тега


Пример

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

:


Epcot Center

Epcot является тематический парк на курорте Уолт Дисней Уорлд с захватывающими аттракционами, международные павильоны, отмеченные наградами фейерверки и сезонные специальные события.

Попробуй сам "

Ниже приведены примеры "Попробуйте сами".


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

Тег

определяет видимый заголовок для элемента
. Заголовок можно нажать, чтобы просмотреть / скрыть детали.

Примечание: Элемент 9001

должен быть первым дочерним элементом элемента
.


Поддержка браузера

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

Элемент
<резюме> 12.0 79,0 49,0 6,0 15.0

глобальных атрибутов

Тэг

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


Атрибуты события

Тег

также поддерживает атрибуты событий в HTML.



Дополнительные примеры

Пример

Используйте CSS для стилизации

и :



подробности> резюме {
отступ: 4px;
ширина: 200 пикселей;
цвет фона: #eeeeee;
граница: нет;
тень от рамки: 1px 1px 2px #bbbbbb;
курсор: указатель;
}

подробностей> p {
цвет фона: #eeeeee;
обивка: 4px; Маржа
: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}

<подробности>

Epcot Center

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


Попробуй сам "

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

HTML DOM ссылка: Сводный объект


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

Большинство браузеров отображают элемент

со следующими значениями по умолчанию:

сводка {
дисплей: блок;
}

,
: элемент «Раскрытие информации» - веб-технология для разработчиков

Элемент (

) элемента HTML Disclosure Summary указывает сводку, подпись или легенду для поля раскрытия элемента
. При щелчке по элементу состояние родительского элемента
открывается и закрывается.

Исходный код этого интерактивного примера хранится в репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

Содержимое элемента

может быть любым содержимым заголовка, обычным текстом или HTML, которые можно использовать в абзаце.

Элемент

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

Текст метки по умолчанию

Если первый дочерний элемент

не является элементом , пользовательский агент будет использовать строку по умолчанию (обычно «Подробности») в качестве метки для поля раскрытия.

Стиль по умолчанию

Согласно спецификации HTML, стиль по умолчанию для элементов

включает в себя отображение : элемент списка . Это позволяет изменить или удалить значок, отображаемый как виджет раскрытия, рядом с меткой по умолчанию, которая обычно является треугольником.

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

Подробнее см. В разделе «Совместимость браузера», так как не все браузеры поддерживают полную функциональность этого элемента.

Примеры

Ниже приведены некоторые примеры, показывающие

в использовании. Вы можете найти больше примеров в документации по элементу
.

Базовый пример

Простой пример, показывающий использование

в
элемент:

 <подробности открыты>
  <Резюме> Обзор 
  <Ол>
    
  • Денежные средства в кассе: $ 500,00
  • Текущий счет-фактура: 75 долларов США.30
  • Срок оплаты: 5/6/19
  • Конспекты в рубриках

    Вы можете использовать элементы заголовка в

    , например:

     <подробности открыты>
      <Резюме> 
    Обзор <Ол>
  • Денежные средства в кассе: $ 500,00
  • Текущий счет-фактура: $ 75,30
  • Срок оплаты: 5/6/19
  • В настоящее время есть некоторые проблемы с пробелами, которые можно решить с помощью CSS.

    Предупреждение: Поскольку элемент

    имеет роль по умолчанию кнопки (которая удаляет все роли из дочерних элементов), этот пример не будет работать для пользователей вспомогательных технологий, таких как программы чтения с экрана. У
    будет удалена его роль, и поэтому они не будут рассматриваться как заголовки для этих пользователей.

    HTML в резюме

    В этом примере добавляется некоторая семантика к элементу

    для обозначения метки как важной:

     <подробности открыты>
      <Резюме> <сильный> Обзор  
      <Ол>
        
  • Денежные средства в кассе: 500 долларов США.00
  • Текущий счет-фактура: $ 75,30
  • Срок оплаты: 5/6/19
  • Технические характеристики

    Совместимость браузера

    Данные совместимости обновлений на GitHub
    Desktop Мобильный
    Chrome Край Firefox Internet Explorer Opera Safari Android WebView Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Интернет
    сводка Chrome Полная поддержка 12 Edge Полная поддержка 79 Firefox Полная поддержка 49 IE Нет поддержки Opera Полная поддержка 15 Safari Полная поддержка 6 WebView Android Полная поддержка 4 Chrome Android Полная поддержка Да Firefox Android Полная поддержка 49 Opera Android Полная поддержка 14 Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка Да
    Отображение: элемент списка Хром Нет поддержки
    Нет поддержки Нет
    Примечания В настоящее время Chrome не использует отображение : элемент списка в элементе , поэтому отображение : блок не будет автоматически скрывать виджет раскрытия.Вместо этого используйте нестандартный псевдоэлемент :: - webkit-details-marker , чтобы изменить виджет раскрытия в Chrome. Смотрите ошибку 5 для деталей.
    Edge Нет поддержки
    Нет поддержки
    Примечания Edge в настоящее время не использует отображение : элемент списка в элементе , поэтому отображение : блок не будет автоматически скрывать виджет раскрытия.Вместо этого используйте нестандартный псевдоэлемент :: - webkit-details-marker , чтобы изменить виджет раскрытия в Edge. Смотрите ошибку 5 для деталей.
    Firefox Полная поддержка 49 IE Нет поддержки Opera Нет поддержки Safari Нет поддержки WebView Android Нет поддержки Chrome Android Нет поддержки
    Нет поддержки Нет
    Примечания В настоящее время Chrome не использует отображение : элемент списка в элементе , поэтому отображение : блок не будет автоматически скрывать виджет раскрытия.Вместо этого используйте нестандартный псевдоэлемент :: - webkit-details-marker , чтобы изменить виджет раскрытия в Chrome. Смотрите ошибку 5 для деталей.
    Firefox Android Полная поддержка 49 Opera Android Нет поддержки Safari iOS Нет поддержки Samsung Интернет Android Нет поддержки

    Легенда

    Полная поддержка
    Полная поддержка
    Нет поддержки
    Нет поддержки
    См. Примечания по реализации.
    См. Примечания к реализации.

    См. Также

    ,

    25 HTML & с CSS

    Collection of free HTML <details> & <summary> with CSS code examples (with little JS). Update of September 2018 collection. 3 new items.

    Сборник бесплатных HTML <подробности> & <сводка> с примерами кода CSS (с небольшим количеством JS). Обновление коллекции сентября 2018 года. 3 новых предмета.

    1. Аккордеон CSS
    2. JQuery Accordions
    3. React Accordions
    О коде

    Подробности Элемент

    A детализирует HTML-элемент с пользовательской стрелкой в ​​SVG, без JavaScript.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Отзывчивый: нет

    Зависимости: -

    Автор
    • Мерт Кукурен
    О коде

    Анимированные Подробности Элемент

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Отзывчивый: да

    Зависимости: -

    Автор
    • Джеймс Стейнбах
    О коде

    Подробности Пример элементов

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Отзывчивый: да

    Зависимости: -

    Demo image: HTML5 Details & Summary HTML5 Details & Summary - GIF Demo
    О коде

    HTML5 Подробности и резюме

    детали работает как аккордеонист - но без скрипта, поддерживается большинством основных браузеров (кроме IE и Edge).

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Details/Summary Animated Accordion Details/Summary Animated Accordion - GIF Demo
    Сделано с
    • HTML / CSS (SCSS) / JavaScript
    О коде

    Подробности / Краткий Анимированный Аккордеон

    Вы можете использовать это без JS, и оно отлично работает, за исключением анимации закрытия.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: jquery.js, font-awesome.js

    Demo image: HTML <details> & <summary> HTML <details> & <summary> - GIF Demo
    Автор
    • Джессика Паоли
    Сделано с
    • HTML / CSS (SCSS) / JavaScript
    О коде

    HTML <подробности> & <резюме>

    HTML <подробности> и <сводка> : шутки плохих детей.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: jquery.js, jquery.color.js

    Demo image: Details & Summary Details & Summary - GIF Demo
    Автор
    • Халида Астатин
    Сделано с
    • HTML / CSS (Меньше) / JavaScript
    О коде

    Подробная информация и резюме

    Экспериментируйте с деталями и краткими HTML-тегами.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: jquery.js

    Demo image: <details> & <summary>: Hotel Room Selection <details> & <summary>: Hotel Room Selection - GIF Demo
    Автор
    • Лина Лаванья
    О коде

    <подробности> и <резюме>: выбор гостиничного номера

    Нажмите один, и остальные закроются.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: jquery.JS

    Demo image: Details + Summary Details + Summary - GIF Demo
    О коде

    Подробности + Резюме

    <подробности> и <сводка> с чистым CSS. Не поддерживаются браузеры IE & Edge.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Spoiler alert with <details> and <summary> Spoiler ale with challenge: <details> and <summary> - GIF Demo
    О коде

    Оповещение о спойлере с
    и

    Использование <подробности> и <сводка> для скрытия / раскрытия спойлеров.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Recipe with <details> and <summary> Recipe with <details> and <summary> - GIF Demo
    О коде

    рецепт с <подробности> и <резюме>

    Использование <подробности> и <сводка> для создания рецепта энчиладас.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Code Snippet Repository Code Snippet Repository - GIF Demo
    Автор
    • Питер Биземанс
    Сделано с
    • HTML / CSS (SCSS) / JavaScript
    О коде
    Хранилище фрагментов кода

    Хранилище фрагментов кода с HTML <подробности> и <сводка> .

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: darcula.css, highlight.js, scss.js, list.js,

    Demo image: Details & Summary Details & Summary - GIF Demo
    О коде

    Подробная информация и резюме

    Часто задаваемые вопросы с HTML подробностей и сводных тегов.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: tailwind.css

    Demo image: Details & Summary Details & Summary - GIF Demo
    О коде

    Подробная информация и резюме

    Пример кода с подробностями HTML и тегами .

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Details and Summary Details and Summary - GIF Demo
    Автор
    • Моника Уилер
    О коде

    Подробная информация и резюме

    верстка HTML часто задаваемых вопросов.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: шрифт потрясающий.css

    Demo image: Responsive Web Page Split Screen Responsive Web Page Split Screen - GIF Demo
    О коде
    Адаптивный разделенный экран

    Отзывчивая веб-страница со стилем «Split Screen» с использованием только CSS. Сделано с HTML <подробности> и <сводка> . Попробуйте это на маленьком экране.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: HTML <details> and <summary> HTML <details> and <summary> - GIF Demo
    Автор
    • Аллистер Ли
    О коде

    HTML детали и резюме

    Простой шаблон часто задаваемых вопросов.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: bootstrap.css, font-awesome.css

    Demo image: <details> and <summary> <details> and <summary> - GIF Demo
    Автор
    • Винсент Данна
    О коде

    <подробности> и <резюме>

    Простой пример с деталями HTML и sammary .

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: <details> and <summary> <details> and <summary> - GIF Demo
    Сделано с
    • HTML (Haml) / CSS (Sass) / JavaScript (Babel)
    О коде

    <подробности> и <резюме>

    Быстрый и грязный набросок деталей гармошка.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Bucket List Destinations Bucket List Destinations - GIF Demo
    Автор
    • Янели Рамирес
    О коде

    Список мест назначения

    Еще один пример с подробностями HTML и общими тегами .

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Digital Monopoly Properties Digital Monopoly Properties - GIF Demo
    О коде

    цифровых монополистических свойств

    Идея использования деталей и сводных тегов.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: A Detailed Summary of Life A Detailed Summary of Life - GIF Demo
    О коде

    Подробный обзор жизни

    Подробная сводка жизни с <подробности> и <сводка> .

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: bootstrap.css, font-awesome.css

    Demo image: Gracefully-degrading <details> Accordion Gracefully-degrading <details> Accordion - GIF Demo
    Автор
    • Кейт Пикеринг
    Сделано с
    • HTML / CSS (SCSS) / JavaScript
    О коде

    Изящно-унизительный <подробности> Аккордеон

    Элемент details обеспечивает очень простую и доступную реализацию аккордеона, одного из самых распространенных компонентов пользовательского интерфейса.Проблема в том, что функциональность по умолчанию совсем не гладкая. Здесь я попытался решить эту проблему с помощью хорошего класса ES6, который расширяет функциональность элемента без нарушения доступности.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Toggle Function & Smooth Scroll Pure HTML & CSS Toggle Function & Smooth Scroll Pure HTML & CSS - GIF Demo
    О коде

    Функция переключения и плавная прокрутка Pure HTML & CSS

    Раскладка сетки + детали и сводка + поведение прокрутки.Все в чистом CSS3.

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    Demo image: Animated Collapse / Expend Component Animated Collapse / Expend Component - GIF Demo
    Автор
    • Элиор Табека
    О коде

    Анимированные Компонент Свернуть / Расход

    Свернуть / потратить с HTML подробности и сводка .

    Совместимые браузеры: Chrome, Firefox, Opera, Safari

    Зависимости: -

    ,

    HTML подробности Tag


    Пример

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


    Epcot Center

    Epcot является тематический парк на курорте Уолт Дисней Уорлд с захватывающими аттракционами, международные павильоны, отмеченные наградами фейерверки и сезонные специальные события.

    Попробуй сам "

    Ниже приведены примеры "Попробуйте сами".


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

    Тег

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

    Тег

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

    Внутри тега <подробности> можно поместить любой контент.

    Совет: Тег

    используется в в сочетании с <подробности> до указать видимый заголовок для деталей.


    Поддержка браузера

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

    Элемент
    <подробно> 12,0 79,0 49,0 6,0 15.0

    атрибутов

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

    глобальных атрибутов

    Тег

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


    Атрибуты события

    Тег

    также поддерживает атрибуты событий в HTML.



    Дополнительные примеры

    Пример

    Используйте CSS для стилизации

    и :



    подробности> резюме {
    отступ: 4px;
    ширина: 200 пикселей;
    цвет фона: #eeeeee;
    граница: нет;
    тень от рамки: 1px 1px 2px #bbbbbb;
    курсор: указатель;
    }

    подробностей> p {
    цвет фона: #eeeeee;
    обивка: 4px; Маржа
    : 0;
    box-shadow: 1px 1px 2px #bbbbbb;
    }

    <подробности>

    Epcot Center

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


    Попробуй сам "

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

    HTML DOM ссылка: Подробно Объект


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

    Большинство браузеров будут отображать элемент

    со следующими значениями по умолчанию:

    подробности {
    дисплей: блок;
    }


    ,

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *