HTML Fieldset Caption

Введение

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

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

Добавьте тег

Сначала откройте свой редактор кода и создайте новый файл с именем index.html. Добавьте в файл базовую структуру, набрав html, а затем нажав клавишу tab.

Добавьте тег <fieldset> в свой HTML-документ.

<fieldset>
  <legend></legend>
</fieldset>

Добавьте тег

в тег

Добавьте тег <legend> внутри тега <fieldset>, чтобы создать заголовок.

<fieldset>
  <legend>Contact Information</legend>
</fieldset>

Используйте свойства CSS с тегом

Добавим несколько свойств CSS к нашему тегу <legend>, чтобы он выглядел лучше.

<style>
  legend {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
</style>

Сохраните файл и откройте файл index.html в своем любимом веб-браузере.

Резюме

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