💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал
В HTML тег <summary> используется для создания-expandable и collapsible элемента резюме для содержимого, присутствующего на веб-странице.
Примечание: вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите на 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
<details>Прежде чем добавить тег <summary>, нам нужно создать раздел содержимого, который можно развернуть или свернуть. Для этого мы будем использовать тег <details>. Добавьте следующий код в файл index.html внутри тега <body>.
<details>
<summary>Click me to see the content</summary>
<p>Content goes here.</p>
</details>В приведенном выше коде мы добавили тег резюме внутри тега сведений, чтобы определить резюме содержимого.
aria-expandedМы можем добавить атрибут aria-expanded к тегу сведений, чтобы указать текущее состояние содержимого. Когда содержимое развернуто, значение aria-expanded будет равно true, а когда оно свернуто, значение будет равно false. Добавьте следующий код после тега <summary>, чтобы включить атрибут aria-expanded.
<details>
<summary aria-expanded="false">Click me to see the content</summary>
<p>Content goes here.</p>
</details><summary>Тег <summary> не имеет особых атрибутов, но мы можем стилизовать его с использованием CSS. Добавьте следующий код в тег <style>, чтобы добавить некоторую стилизацию к тегу <summary>.
summary {
padding: 10px;
background-color: #eee;
cursor: pointer;
}Мы можем добавить больше содержимого внутри тега <details>, и оно автоматически будет развертываемым и свертываемым. Добавьте следующий код после первого абзаца, чтобы добавить больше содержимого.
<details>
<summary aria-expanded="false">Click me to see the content</summary>
<p>Content goes here.</p>
<p>More content.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</details>Мы можем добавить несколько развертываемых разделов на веб-страницу. Добавьте следующий код, чтобы создать еще один развертываемый раздел.
<details>
<summary aria-expanded="false">Another section</summary>
<p>Content of another section</p>
</details>Тег <summary> можно использовать для создания развертываемых и свертываемых разделов содержимого на веб-странице. Мы можем добавить больше содержимого внутри тега <details> и использовать стилизацию для настройки внешнего вида тега <summary>. Добавляя атрибут aria-expanded, мы можем указать текущее состояние содержимого, что делает его доступным для пользователей с ограниченными возможностями.
