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

Введение

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

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

Базовый тег

Создайте файл 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>.