HTML Fieldset Caption

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/layout -.-> lab-70786{{"HTML Fieldset Caption"}} html/forms -.-> lab-70786{{"HTML Fieldset Caption"}} html/form_group -.-> lab-70786{{"HTML Fieldset Caption"}} html/form_access -.-> lab-70786{{"HTML Fieldset Caption"}} html/inter_elems -.-> lab-70786{{"HTML Fieldset Caption"}} end

Добавьте тег <fieldset>

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

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

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

Добавьте тег <legend> в тег <fieldset>

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

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

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

Добавим несколько свойств 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-файлах.