| 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.
Рис. 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 | 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 < T >">
// 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>Социология ‒ это наука об обществе или обществознание. Термин был введен в середине Х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>Социология ‒ это наука об обществе или обществознание. Термин был введен в середине ХIХ веке французским социологом О. Контом. Конт предполагал создать некую интегральную науку, объединяющую различные виды знаний в единую систему. Однако постепенно социология выделилась как самостоятельная наука со своим, отличным от других наук, предметом.</p>
<details>
<summary>Ещё</summary>
<p>Социология изучает, прежде всего, социальную сферу жизнедеятельности людей: социальную структуру, социальные институты и отношения, социальные качества личности, социальное поведение, общественное сознание и так далее. При этом объектом исследования социологии может быть как все общество в его целостности и системности, так и отдельные его «элементы».</p>
</details>
</body>
</html>
HTML резюме тега
Пример
Использование элемента
Epcot является
тематический парк на курорте Уолт Дисней Уорлд с захватывающими аттракционами,
международные павильоны, отмеченные наградами фейерверки и сезонные специальные
события. Ниже приведены примеры «Попробуйте сами». Тег Примечание: Элемент 9001 Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент. Тэг Тег Используйте CSS для стилизации подробностей> p {
Epcot Center
Определение и использование
определяет видимый заголовок для элемента
должен быть первым дочерним элементом элемента
Поддержка браузера
Элемент <резюме> 12.0 79,0 49,0 6,0 15.0 глобальных атрибутов
также поддерживает глобальные атрибуты в HTML.
Атрибуты события
также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
:
подробности> резюме {
отступ: 4px;
ширина: 200 пикселей;
цвет фона: #eeeeee;
граница: нет;
тень от рамки: 1px 1px 2px #bbbbbb;
курсор: указатель;
}
цвет фона: #eeeeee;
обивка: 4px; Маржа
: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
<подробности> Epcot — это тематический парк в Walt Disney
World Resort с захватывающими аттракционами, международными павильонами,
отмеченные наградами фейерверки и сезонные специальные мероприятия. HTML DOM ссылка: Сводный объект Большинство браузеров отображают элемент сводка { Элемент ( Исходный код этого интерактивного примера хранится в репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение. Этот элемент включает только глобальные атрибуты. Содержимое элемента Элемент Если первый дочерний элемент Согласно спецификации HTML, стиль по умолчанию для Также можно изменить стиль отображения Подробнее см. В разделе «Совместимость браузера», так как не все браузеры поддерживают полную функциональность этого элемента. Ниже приведены некоторые примеры, показывающие Простой пример, показывающий использование Вы можете использовать элементы заголовка в В настоящее время есть некоторые проблемы с пробелами, которые можно решить с помощью CSS. Предупреждение: Поскольку элемент В этом примере добавляется некоторая семантика к элементу Сборник бесплатных HTML A Совместимые браузеры: Chrome, Firefox, Opera, Safari Отзывчивый: нет Зависимости: — Совместимые браузеры: Chrome, Firefox, Opera, Safari Отзывчивый: да Зависимости: — Совместимые браузеры: Chrome, Firefox, Opera, Safari Отзывчивый: да Зависимости: — Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Вы можете использовать это без JS, и оно отлично работает, за исключением анимации закрытия. Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari Зависимости: jquery.js, font-awesome.js HTML Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: jquery.js, jquery.color.js Экспериментируйте с деталями и краткими HTML-тегами. Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: jquery.js Нажмите один, и остальные закроются. Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: jquery.JS Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Использование Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Использование Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Хранилище фрагментов кода с HTML Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: darcula.css, highlight.js, scss.js, list.js, Часто задаваемые вопросы с HTML Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: tailwind.css Пример кода с подробностями HTML и тегами . Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — верстка HTML часто задаваемых вопросов. Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: шрифт потрясающий.css Отзывчивая веб-страница со стилем «Split Screen» с использованием только CSS. Сделано с HTML Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Простой шаблон часто задаваемых вопросов. Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: bootstrap.css, font-awesome.css Простой пример с деталями HTML и sammary . Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Быстрый и грязный набросок Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Еще один пример с подробностями HTML и общими тегами . Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Идея использования деталей и сводных тегов. Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Подробная сводка жизни с Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: bootstrap.css, font-awesome.css Элемент Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari Зависимости: — Раскладка сетки + детали и сводка + поведение прокрутки.Все в чистом CSS3. Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Свернуть / потратить с HTML Совместимые браузеры: Chrome, Firefox, Opera, Safari Зависимости: — Укажите детали, которые пользователь может открывать и закрывать по требованию: Epcot является
тематический парк на курорте Уолт Дисней Уорлд с захватывающими аттракционами,
международные павильоны, отмеченные наградами фейерверки и сезонные специальные
события. Ниже приведены примеры «Попробуйте сами». Тег Тег Внутри тега Совет: Тег Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент. Тег Тег Используйте CSS для стилизации подробностей> p { <подробности> Epcot — это тематический парк в Walt Disney
World Resort с захватывающими аттракционами, международными павильонами,
отмеченные наградами фейерверки и сезонные специальные мероприятия. HTML DOM ссылка: Подробно Объект Большинство браузеров будут отображать элемент подробности {
Связанные страницы
Настройки CSS по умолчанию
со следующими значениями по умолчанию:
дисплей: блок;
} ) элемента HTML Disclosure Summary указывает сводку, подпись или легенду для поля раскрытия элемента . При щелчке по элементу состояние родительского элемента открывается и закрывается. Атрибуты
Примечания по использованию
может быть любым содержимым заголовка, обычным текстом или HTML, которые можно использовать в абзаце. может только использоваться как первый дочерний элемент .Когда пользователь щелкает сводку, родительский элемент переключается в открытое или закрытое состояние, а затем событие toggle отправляется в элемент , который можно использовать, чтобы сообщить вам, когда это происходит изменение состояния. Текст метки по умолчанию
не является элементом , пользовательский агент будет использовать строку по умолчанию (обычно «Подробности») в качестве метки для поля раскрытия. Стиль по умолчанию
элементов включает в себя отображение : элемент списка . Это позволяет изменить или удалить значок, отображаемый как виджет раскрытия, рядом с меткой по умолчанию, которая обычно является треугольником.: блок , чтобы удалить раскрывающий треугольник. Примеры
в использовании. Вы можете найти больше примеров в документации по элементу . Базовый пример
в элемент: <подробности открыты>
<Резюме> Обзор
<Ол>
Конспекты в рубриках
, например: <подробности открыты>
<Резюме>
Обзор
<Ол>
имеет роль по умолчанию кнопки (которая удаляет все роли из дочерних элементов), этот пример не будет работать для пользователей вспомогательных технологий, таких как программы чтения с экрана. У
HTML в резюме
для обозначения метки как важной: <подробности открыты>
<Резюме> <сильный> Обзор
<Ол>
Технические характеристики
Совместимость браузера
Данные совместимости обновлений на 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 Полная поддержка Да Отображение: элемент списка Хром Нет поддержки № : элемент списка в элементе , поэтому отображение : блок не будет автоматически скрывать виджет раскрытия.Вместо этого используйте нестандартный псевдоэлемент :: - webkit-details-marker , чтобы изменить виджет раскрытия в Chrome. Смотрите ошибку 5 для деталей. Edge Нет поддержки № : элемент списка в элементе , поэтому отображение : блок не будет автоматически скрывать виджет раскрытия.Вместо этого используйте нестандартный псевдоэлемент :: - webkit-details-marker , чтобы изменить виджет раскрытия в Edge. Смотрите ошибку 5 для деталей. Firefox Полная поддержка 49 IE Нет поддержки № Opera Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № : элемент списка в элементе , поэтому отображение : блок не будет автоматически скрывать виджет раскрытия.Вместо этого используйте нестандартный псевдоэлемент :: - webkit-details-marker , чтобы изменить виджет раскрытия в Chrome. Смотрите ошибку 5 для деталей. Firefox Android Полная поддержка 49 Opera Android Нет поддержки № Safari iOS Нет поддержки № Samsung Интернет Android Нет поддержки № Легенда
См. Также
, 25 HTML & с CSS
<подробности> & <сводка> с примерами кода CSS (с небольшим количеством JS). Обновление коллекции сентября 2018 года. 3 новых предмета. О коде
Подробности Элемент детализирует HTML-элемент с пользовательской стрелкой в SVG, без JavaScript. Автор
О коде
Анимированные
Подробности Элемент Автор
О коде
Подробности Пример элементов 
О коде
HTML5 Подробности и резюме
детали работает как аккордеонист — но без скрипта, поддерживается большинством основных браузеров (кроме IE и Edge).
Сделано с
О коде
Подробности / Краткий Анимированный Аккордеон
Автор
Сделано с
О коде
HTML <подробности> & <резюме>
<подробности> и <сводка> : шутки плохих детей.
Автор
Сделано с
О коде
Подробная информация и резюме
Автор
О коде
<подробности> и <резюме>: выбор гостиничного номера
О коде
Подробности + Резюме
<подробности> и <сводка> с чистым CSS. Не поддерживаются браузеры IE & Edge.
О коде
Оповещение о спойлере с
<подробности> и <сводка> для скрытия / раскрытия спойлеров.
О коде
рецепт с <подробности> и <резюме>
<подробности> и <сводка> для создания рецепта энчиладас.
Автор
Сделано с
О коде
Хранилище фрагментов кода <подробности> и <сводка> .
О коде
Подробная информация и резюме
подробностей и сводных тегов.
О коде
Подробная информация и резюме
Автор
О коде
Подробная информация и резюме
О коде
Адаптивный разделенный экран <подробности> и <сводка> . Попробуйте это на маленьком экране.
Автор
О коде
HTML детали и резюме
Автор
О коде
<подробности> и <резюме>
Сделано с
О коде
<подробности> и <резюме>
деталей гармошка.
Автор
О коде
Список мест назначения
О коде
цифровых монополистических свойств
О коде
Подробный обзор жизни
<подробности> и <сводка> .
Автор
Сделано с
О коде
Изящно-унизительный <подробности> Аккордеон
details обеспечивает очень простую и доступную реализацию аккордеона, одного из самых распространенных компонентов пользовательского интерфейса.Проблема в том, что функциональность по умолчанию совсем не гладкая. Здесь я попытался решить эту проблему с помощью хорошего класса ES6, который расширяет функциональность элемента без нарушения доступности.
О коде
Функция переключения и плавная прокрутка Pure HTML & CSS
Автор
О коде
Анимированные Компонент Свернуть / Расход
подробности и сводка . HTML подробности Tag
Пример
Epcot Center
Определение и использование
определяет дополнительные детали, которые пользователь может
открывать и закрывать по требованию. часто используется для создания интерактивного виджета, который пользователь может
открывать и закрывать По умолчанию виджет закрыт. Когда он открыт, он расширяется, и
отображает содержимое внутри. <подробности> можно поместить любой контент. используется в
в сочетании с
<подробности> до
указать видимый заголовок для деталей. Поддержка браузера
Элемент <подробно> 12,0 79,0 49,0 6,0 15.0 атрибутов
Атрибут Значение Описание открыть открыть Указывает, что детали должны быть видны (открыты) пользователю глобальных атрибутов
также поддерживает глобальные атрибуты в HTML. Атрибуты события
также поддерживает атрибуты событий в HTML. Дополнительные примеры
Пример
:
подробности> резюме {
отступ: 4px;
ширина: 200 пикселей;
цвет фона: #eeeeee;
граница: нет;
тень от рамки: 1px 1px 2px #bbbbbb;
курсор: указатель;
}
цвет фона: #eeeeee;
обивка: 4px; Маржа
: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
Связанные страницы
Настройки CSS по умолчанию
со следующими значениями по умолчанию:
дисплей: блок;
}
,