Откройте силу HTML-тега details

Введение

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите кнопку "Запустить в браузере" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70738{{"Дополнительные детали в HTML"}} html/doc_flow -.-> lab-70738{{"Дополнительные детали в HTML"}} html/embed_media -.-> lab-70738{{"Дополнительные детали в HTML"}} html/inter_elems -.-> lab-70738{{"Дополнительные детали в HTML"}} end

Основной тег `<details>`

Создайте файл index.html в своем предпочитаемом текстовом редакторе.

Скопируйте и вставьте следующий код в файл index.html:

<details>
  <summary>Нажмите, чтобы увидеть больше</summary>
  <p>Этот текст скрыт и может быть виден при нажатии на кнопку стрелки.</p>
</details>

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

Пользовательское резюме

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

<details>
  <summary>Подробнее о авторе</summary>
  <p>Джон Доу - писатель, выпустивший множество книг в различных жанрах.</p>
</details>

В приведенном выше коде мы добавили пользовательское резюме "Подробнее о авторе" с использованием тега <summary> и указали сведения об авторе внутри тега <details>.

Добавление изображения

Добавим изображение в тег <details>. Скопируйте и вставьте следующий код в файл index.html:

<details>
  <summary>Нажмите, чтобы увидеть больше</summary>
  <p>Этот текст скрыт и может быть виден при нажатии на кнопку стрелки.</p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

В приведенном выше коде мы добавили изображение с использованием тега <img>. Когда пользователь нажимает на кнопку стрелки, изображение и текст внутри тега <details> станут видимыми.

Добавление атрибута `open`

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

<details open>
  <summary>Подробнее о авторе</summary>
  <p>Джон Доу - писатель, выпустивший множество книг в различных жанрах.</p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

Атрибут open тега <details> гарантирует, что текст виден на веб-странице по умолчанию.

Резюме

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

Дополнительные детали в HTML