HTML Fieldset 标题

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <legend> 标签是为 HTML <fieldset> 标签中的子内容提供标题或说明的重要方式。<legend> 标签用于标识字段集(fieldset)内容,并为页面提供适当的标题。在本实验中,我们将学习如何使用 <legend> 标签以及与之相关的各种 CSS 属性。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 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 标题"}} html/forms -.-> lab-70786{{"HTML Fieldset 标题"}} html/form_group -.-> lab-70786{{"HTML Fieldset 标题"}} html/form_access -.-> lab-70786{{"HTML Fieldset 标题"}} html/inter_elems -.-> lab-70786{{"HTML Fieldset 标题"}} end

添加 <fieldset> 标签

首先,打开你的代码编辑器并创建一个名为 index.html 的新文件。通过输入 html 然后按下 tab 键来添加文件的基本结构。

在你的 HTML 文档中添加一个 <fieldset> 标签。

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

<fieldset> 标签中添加 <legend> 标签

<fieldset> 标签内添加一个 <legend> 标签以创建标题。

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

使用 CSS 属性修饰 <legend> 标签

让我们为 <legend> 标签添加一些 CSS 属性,使其看起来更美观。

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

保存文件并在你喜欢的网页浏览器中打开 index.html 文件。

总结

总结来说,HTML <legend> 标签帮助我们为 HTML <fieldset> 标签中的子内容提供标题或说明。我们使用了一些 CSS 属性来使其看起来更美观。希望你现在能够在 HTML 文件中使用 <legend> 标签来创建标题或说明。