Html elements reference

Содержание

Поля множественного выбора и меню

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


Переключатели

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

Чтобы создать переключатель, используется элемент <input> со значением radio у атрибута type. Каждый переключатель должен иметь одинаковое значение атрибута name, чтобы все они в группе были связаны друг с другом.

С текстовыми полями их значение определяется тем, что пользователь в них набирает; с переключателями пользователь делает множественный выбор. Таким образом, мы должны определить входное значение. Используя атрибут value мы можем установить конкретное значение для каждого элемента <input>.

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

Флажки

Флажки очень похожи на переключатели. Они используют те же атрибуты и шаблоны, за исключением значения атрибута type. Разница между ними состоит в том, что флажки позволяют пользователям выбрать несколько значений и связать их все с одним именем, в то время как переключатели ограничивают пользователей одним значением.

Выпадающие списки

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

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

Атрибут name располагается в элементе <select>, а атрибут value располагается в элементах <option>, вложенных в элемент <select>. Таким образом, атрибут value в каждом элементе <option> связан с атрибутом name элемента <select>.

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

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

Множественный выбор

Логический атрибут multiple при добавлении к элементу <select> для стандартного выпадающего списка позволяет пользователю выбрать более одного варианта из списка одновременно. Кроме того, с помощью логического атрибута selected, добавленного к более чем одному элементу <option>, в меню можно заранее выбрать несколько вариантов.

Размером элемента <select> можно управлять с помощью CSS и он должен быть скорректирован соответствующим образом для множественного выбора. Возможно, есть смысл информировать пользователей, что для выбора нескольких вариантов они должны удерживать клавишу Shift во время щелчка, чтобы сделать выбор.

Comments

Comment by Swatcher

Very detailed guide :), thank you for writing it! The indepth nature of it means that this guide can be used both by beginners and pros, so I thank you for putting in so much time into it :).

Comment by BrightBrown

Way easier to share encounter details with everyone and/or anyone in particular. One thing bugging me is the frequency the «make a bookmark» dialog pops up. It covers my damage window AND seems not easy to get rid one in one click… AND every time I HAVE clicked the «don’t show me this» checkbox! Looked in prefs, but can’t find anything in there are auto showing «make a bookmark» dialogs. With the recent change in AP and Concordance, I wanted to see the effects, but somehow I could not find where it showed me if/how many times I got that buff (aura).

Comment by Cdaw

Other than measuring dps/hps etc. I believe the Details!’s best feature is ability to integrate itself in chat pane. It can embed itself as a chat pane tab and voila you have more space in your screen. If you are using a laptop screen or any other small screen, this saves a lot of space.

Comment by Jarhon

Seriously.Why isn’t there an option to increase options panel/tools text font? Or bookmarks font?Such a basic basic super basic feature missing, when every other font size exists. I HATE trying to see what it says when its smth like default font size 12.

Comment by MrPony

I cant, for the life of me, find how to display my pet damage on the meter without using the «Everything» view.I dont want to see boss and mob damage done. Is there a way to change the view of «Standard» to act like how it displays Hunters in «Everything»?

Comment by Bigglehorn

Hello! I have a problem with Details changing/resetting size everytime i log out and change characters. Do anyone of you have a solution to this? I use ElvUI and have 2 Details windows inbedded in the right chat. Thanks in advance.

Comment by BrightBrown

Since I have been using it, «overall data» seems to have changed what exactly it means. At first it seemed to encapsulate an instance. Which was GREAT, I could go do some stuff but return to all the details of say a dungeon. BUT that has seemed to change now. When it asks me to delete «overall data» at the start of an instance, it seems to delete ALL data. YET it still has an option to delete ALL data or overall data… seems like there really is only one option,not 2. Asked the developer for an explanation, but no response. Am I missing something?

Comment by Ranth101

Is there a way to exclude a certain spell damage from an overall like for instance Cannon Blast from toldagor? Maybe I missed it and will still be tinkering around to see but the spell id is 263198.

Comment by sharptop

Need help.On the streams, I saw a death log with a large number of lines of incoming heal and damage about 10 seconds before death. It shows me only 3-4 lines and only damage. How to configure more advanced information.

Comment by datgrl

I just started using this addon and so far I like it a lot. I have a question about the damage display and I haven’t been able to figure out where to get the answer. I hope someone can help me out. In the 1st picture at the very top of the guide/article it shows an example of dps. Sky shows 306.14M(2.16M, 49.4%). What exactly do all the numbers mean? Is the 306.14M over all dps? What is the 2.16M for? And what is the percentage for?

Comment by darkpanda

They should add a clear and visible button to invoke the tutorial again in case you close it accidentally or log out so new timers wouldn’t retort to re-installing the addon.

Comment by ksilverbow

I have tried and tried but i don’t get windows to permanently delete when I log out they come back and NO i have not just closed them I have deleted them. but it keeps coming back heck sometimes even after i have just reloaded my UI they come back. Heck, I can’t for the life of me figure out why some of my chars have 2 details meters and others have 1. It’s just plain confusing I love details it’s awesome but this drives me nuts.

Comment by DarkSkyfire

Details keeps disbanding my group after we finish a quest. I do not know where to find the setting that is causing this. Any help?

Comment by datgrl

I’ve been using the addon for a bit and I have a question about the numbers. There are 2 sets of numbers one is in parentheses. What are the 2 different numbers and how are they calculated? Hmm… seems I asked this question 2 years ago and still no answer.

Web Components

Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.

Element Description
The HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.
The HTML Content Template () element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Принцип работы тега «details»


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

Содержимое тега становится видимым, когда у него появляется атрибут , который автоматически добавляется или удаляется браузером при клике по  — заголовку спойлера. В свою очередь, заголовок должен стоять первым среди дочерних элементов, но его наличие не является обязательным. В случае отсутствия заголовка браузер установит стандартное название «подробности» из Shadow DOM, однако такой тег не пройдет валидацию. Это аналогично ситуации, когда не имеет .

Элемент может содержать после своего заголовка блочный или строчный контент, принадлежащий к категории основной поточной информации (flow content). Содержимое, указанное после , как могло бы показаться, не будет отображаться и скрываться средствами CSS, а именно — переключением значения . Браузер переносит его в необходимое место за счёт манипуляций с Shadow DOM, что делает возможным применить к контенту эффекты перехода (). Иными словами, в примере выше при отсутствии у спойлера атрибута , для элемента правило не применяется.

Не смотря на кажущуюся практичность и тривиальность, элемент не лишён недостатков: отсутствие полной кроссбраузерной поддержки (речь идет об ограничениях в Internet Explorer, Edge и игнорирование Opera Mini) и непрезентабельное стандартное со (простой маркер перед заголовком , отсутствие анимации), поэтому при создании спойлеров необходимо учесть эти аспекты.

Как создать спойлеры

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

Спойлеру необходимо выглядеть визуально интерактивным

Пользователь должен без особого труда понимать, что элемент является кликабельным; Для визуально привлекательного плавного отображения и скрытия контента к спойлеру следует добавить эффекты перехода; Открытый спойлер должен каким бы то ни было образом выделяться, чтобы сфокусировать внимание читателя на себе среди прочих неактивных, если на странице расположены несколько спойлеров подряд.

HTML-разметка

Предположим, необходимо создать такую популярную секцию для сайта, как небольшой раздел FAQ, где ответ появлялся бы после клика на сам вопрос. Для этого потребуется следующий незамысловатый HTML:

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

Изменение стандартного маркера

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

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

Добавление маркера и эффектов перехода

Когда стандартный маркер удалён, к спойлеру может быть добавлено собственное изображение через псеводоэлемент . В готовом примере для этого используется SVG-иконка из коллекции Google Material Icons, которая выводится через в base64, что позволяет избежать лишних подключений к внешним ресурсам.

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

Решение проблем кроссбраузерности

Для обеспечения правильной работы спойлеров в Internet Explorer 10+ и Edge силами одного лишь CSS предлагается совместить и псевдокласс таким образом, чтобы содержимое спойлера появлялось при появлении фокуса на заголовке. Чтобы применить указанный псевдокласс к заголовкам, в HTML-разметке они должны содержать упомянутый ранее атрибут . Кроме того, браузеры от Microsoft не знают тега и не добавляют к нему атрибут при клике, поэтому часть CSS придется дублировать. Весь полученный код скрывается от прочих браузеров:

Этот фикс содержит небольшое функциональное ограничение: на странице нельзя будет открыть одновременно несколько спойлеров, т.к. фокус действует только на один элемент. Кроме того, в результате подобной реализации теряется плавный переход при открытии спойлера, но остается работать эффект прозрачности. При необходимости посредством миксин ie_fix() может быть добавлен и для старой Opera 12 (Presto).

Browser compatibility

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.


Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

Руководства для начинающих

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

Введение в HTML Этот модуль закладывает основу, знакомя вас с важными понятиями и синтаксисом, такими как применение HTML к тексту, создание гиперссылок и использование HTML для построения веб-страницы. Мультимедиа и встраивание В этом модуле рассматривается, как использовать HTML для добавления мультимедиа на ваши веб-страницы, включая различные способы вставки изображений, а также для встраивания видео, аудио, и даже других веб-страниц целиком. HTML-таблицы Представление табличных данных на веб-странице в понятной, доступной форме может быть проблемой

Этот модуль охватывает базовую разметку таблиц, а также более сложные особенности, такие как добавление заголовков и описаний. HTML-формы Формы являются очень важной частью Веба — они предоставляют большую часть функционала, необходимого для взаимодействия с веб-сайтами, например регистрация и вход в систему, отправка отзывов, покупка товаров, и многое другое. Этот модуль познакомит вас с созданием клиентских (client-side/front-end) частей форм. Используйте HTML для решения распространенных задач. Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространенных задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.

Атрибуты

К этому элементу применимы глобальные атрибуты.

Определяет URI файла манифеста, указывающего ресурсы, которые должны быть сохранены в локальном кэше. Смотрите Использование кэша приложений.
Определяет версию HTML DTD (Document Type Definition, больше известное как Doctype), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.
Определяет пространство имен XHTML-документа. Значение по умолчанию . Это требуется при парсинге документов с помощью парсера XML и необязательно для документов .

Forms

HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There’s a great deal of further information about this available in the HTML forms guide.

Element Description
The HTML element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
The HTML element contains a set of elements that represent the permissible or recommended options available to choose from within other controls.
The HTML element is used to group several controls as well as labels () within a web form.
The HTML element represents a document section containing interactive controls for submitting information.
The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
The HTML element represents a caption for an item in a user interface.
The HTML element represents a caption for the content of its parent .
The HTML element represents either a scalar value within a known range or a fractional value.
The HTML element creates a grouping of options within a element.
The HTML element is used to define an item contained in a , an , or a  element. As such,  can represent menu items in popups and other lists of items in an HTML document.
The HTML Output element () is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
The HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
The HTML element represents a control that provides a menu of options
The HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

Accessibility concerns

The presence of the element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS property, along with the and pseudo-elements.

ins::before, 
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: "  ";
}

ins::after {
  content: "  ";
}

Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been inserted would adversely affect understanding.

  • Short note on making your mark (more accessible) | The Paciello Group
  • Tweaking Text Level Styles | Adrian Roselli

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.

Изменить текст метки: тег

Цвет корпуса

  • белый
  • чёрный
  • нерж. сталь
  • другие

Тип управления

  • механическое
  • электронное
  • сенсерное

Тип очистки

  • катализ
  • очистка паром
  • пиролиз
<style>
.filter details + details {
  margin-top: 1em;
}
.filter summary {
  font-weight: 700;  
  cursor: pointer;  
}
.filter ul {
  list-style: none;
  margin: 1em;
  padding: 0;
}
.filter summary:hover {
  color:#ff3200;  
}
</style>


<div class="filter">
  <details>
    <summary>Группа свойств 1</summary>
    <ul>
      <li><label><input type="checkbox"/> свойство 1.1</label>
      <li><label><input type="checkbox"/> свойство 1.2</label>
    </ul>
  </details>
  <details>
    <summary>Группа свойств 2</summary>
    <ul>
      <li><label><input type="checkbox"/> свойство 2.1</label>
      <li><label><input type="checkbox"/> свойство 2.2</label>
    </ul>
  </details>
</div>

Второй тег не работает

Нажать скрытое/показанное содержимое Нажать

<details>
  <summary>Нажать</summary>
  скрытое/показанное содержимое
  <summary>Нажать</summary>
</details>

Скрыть часть текста под кнопкой «Ещё»

черные птицы, – что Аннушка уже купила подсолнечное масло, и не только купила, но даже разлила.

<style>
details {
  display: inline;  
}
details {
  display: contents;  
}
details summary {
  list-style-type: "";  
  color: blue;
  cursor: pointer;
}
details summary {
  display: none;
}
</style>

Текст <details><summary></summary>скрытое/показанное содержимое</details>

В ряде браузеров нельзя сделать inline-элементом

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

<style>
details,
details * {
  all: initial;
}
</style>

Текст
<details open>
  <summary>Метка</summary>
  скрытое/показанное содержимое
</details>
Текст

Вложенный в тег

Нажать скрытое/показанное содержимое

<style>
details:not() summary small {
  display: none;
}
details summary small {
  color: gray;
}
</style>

<details>
  <summary>
    Нажать
    <small></small>
  </summary>
  скрытое/показанное содержимое
</details>

Ссылка внутри

Позиционирование CSS ⎘

<style>
details {
  display: block;  
  overflow: hidden;
  border: 1px solid #f1f1f1;
  box-shadow: 2px 3px 3px rgba(0, 0, 0, .2);
}
details summary {
  padding: .3em;
  background: #f1f1f1;
}
details summary a {
  font-size: 1.5em;
  vertical-align: middle;
  text-decoration: none;
}
</style>

<details>
  <summary>Позиционирование CSS <a href="/2012/04/pozitsionirovaniye-css.html" target="_blank">⎘</a></summary>
  <ul>
    <li><a href="/2017/04/position-static.html"><code>position static;</code></a>
    <li><a href="/2017/04/position-relative.html"><code>position: relative;</code></a>
    <li><a href="/2017/05/position-absolute.html"><code>position: absolute;</code></a>
    <li><a href="/2012/04/position-fixed-html.html"><code>position: fixed;</code></a>
    <li><a href="/2017/04/position-sticky.html"><code>position: sticky;</code></a>
  </ul>
</details>

Customizing the Appearance

  • In the bottom right of the options interface, you can pick which window you want to change the settings for. If you check the “Editing Group” box, it will apply the changes to all windows grouped with the one you are editing.
  • You can have Details create test bars so you don’t have to get into combat every time you want to see how the changes look. The button for this can be found at the bottom left corner of the settings.
  • Skin Selection: Allows you to change the baseline skin for you Details windows. Keep in mind that changing skins will reset appearance settings to default for that skin!
  • Bars: General: General settings for the bars that appear within Details windows. Here you can change settings such as the color and texture, icons, direction the bars are oriented, the height and spacing between bars, and border around the bars.
  • Bars: Text: Settings for changing the text that appears on the bars. Here you can change text color, size, formatting of the text, outlines/shadows, and even set custom text for displaying the information.
  • Bars: Advanced: This menu has more advanced options such as 3D models and a “Total Bar”, which is a bar showing the cumulative DPS/HPS for a group. You can also find an option to enable slightly faster bar updating and an option for always showing yourself in the window (useful for tanks or healers that want to see their DPS without needing a large window).
  • Title Bar: General: As you would expect, options for how the title bar appears can be found in this menu. Options such as the size, which icons appear on it, where the icons are positioned, and the font size of the menus that appear when hovering over icons. Other options related to the icon menus can be found here as well.
  • Title Bar: Text: Basic settings for the text that appears in the title bar. Includes position, size, and color. Also has an option for displaying an encounter timer.
  • Window: General: General settings for the windows. This has a large amount of options such as setting colors, changing the scaling of the windows, disabling grouping and resizing, and setting the strata level for the window. (Strata level determines if the window appears over or under other elements of your WoW UI. High strata levels with keep the window on top of other elements, while low will make it appear behind them.) Options to enable the statusbar are located here as well. The statusbar is a small bar at the bottom of the window (disabled by default) that can be customized to show information such as total raid DPS, encounter time, gear durability, frame rate, and more.
  • Window: Automatization: The options here allow you to set automatic behaviors for the windows. For example, you can set the window to automatically swap to the DPS display whenever you begin combat, or to the damage taken display after a wipe. You can even set up specific behavior depending on your current spec. There is also an option have it automatically hide/show the window when in combat, out of combat, or not in a group. Lastly, there is an option to make the window become transparent when mousing over.
  • Window: Wallpaper: Here you can set a background image for the window. This can be a texture or an image file from your computer.
  • Streamer Settings: Streamer is a plugin for Details (see the below section for more on plugins) that adds some cool features perfect for those who stream or record gameplay. Here you can enable some cool graphics such as a window that shows your ability usage and targets, a window that displays cooldown usage, or a larger display for total group dps (can also show enemy team DPS for arenas).

例子

A simple disclosure example


This example shows a element with no provided summary.

<details>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

In this situation, the browser will use a default summary string (usually «Details»). Here’s what your browser does with it:

Providing a summary

This example adds a summary to the above example by using the element inside , like this:

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

The result from this HTML is this:

Creating an open disclosure box

To start the box in its open state, add the Boolean attribute:

<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

This results in:

Customizing the appearance

Now let’s apply some CSS to customize the appearance of the disclosure box.

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

自定义自带部件的样式

自带的三角形可以自定义,但并没有得到广泛支持。由于该元素是标准化的,因此在实验性实施阶段,浏览器如何支持此自定义项有所不同,我们不得不暂时使用多种方法。

元素支持 缩写属性或者完全属性,比如,可以使用它们任意改变三角(通常是使用)。例如,我们可以使用移除三角形。

Chrome尚不支持此功能,因此我们还需要使用其非标准伪元素来自定义。

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  list-style: none;
}

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

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

该CSS的外观类似于选项卡界面,在该界面中,激活选项卡将展开并打开它以显示其内容。

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

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

Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам «pull request» (предложение изменения кода в чужом репозитории).

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка Да IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка Да Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка 4 Edge Полная поддержка 12 Firefox Полная поддержка 3.5 IE Полная поддержка 10 Opera Полная поддержка 10.6 Safari Полная поддержка 4 WebView Android Полная поддержка 4 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 11 Safari iOS Полная поддержка 3.2 Samsung Internet Android Полная поддержка 1.0
Устаревшая Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка Да IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка Да Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка Да IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка Да Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да

Specifications

Specification Status Comment
Living Standard
Working Draft Added the and global attributes.
Recommendation Snapshot of HTML Living Standard. From HTML 5.1, , , , , and have been added.
Recommendation Snapshot of HTML Living Standard. From HTML5, , , , and have been added.
Recommendation Snapshot of HTML Living Standard. From HTML 4.01 Specification, the concept of global attributes is introduced and the , , , , , , , and are now true global attributes. which was initially part of XHTML, is now also part of HTML., , , and have been added.
HTML 4.01 Specification Recommendation There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements. and are supported on all elements but , , , , , , , , and . is supported on all elements but , , , , , , , , , and . is supported on all elements but , , , , , , and . is supported on all elements but , , , , , , , , and . is only supported on , , , , , and . is only supported on , , , , , and . is supported on all elements but , , , , , , , and .

С этим читают