HTML - <legend> 标签

HTML <legend> 标签用于指定<fieldset> 元素的标题。它通常位于框架顶部，因为它是一个标题。<fieldset> 标签用于在元素内容周围绘制边框，我们可以在该边框上使用 <legend> 标签设置标题。它通过遵循 legend 标签设置的标题来帮助我们识别包装的组。

语法

<legend>.......</legend>

属性

HTML legend 标签支持 HTML 的全局和事件属性。以及下面列出的特定属性。

属性	值	描述
align	left right center justify	用于水平设置元素的对齐方式。

HTML legend 标签示例

以下示例将说明 legend 标签的用法。何时、何地以及如何使用它来创建标题，以及如何使用 CSS 对该标题进行样式设置。

使用 <legend> 标签创建标题

在以下示例中，我们使用 HTML <legend> 标签为其父 <fieldset> 标签定义标题。legend 标签可用于任何元素以提供标题，但最好与 fieldset 元素一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption -->
      <legend>Caption</legend>
   </fieldset>
</body>
</html>

使用 CSS 设置标题样式

在此示例中，我们使用 HTML <legend> 标签为其父标签 <fieldset> 创建一个名为“Message”的标题。使用 CSS，我们尝试为 HTML <legend> 标签设置一些样式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
   <style>
      legend {
         color: blue;
         font-size: 25px;
         width: 100px;
         background-color: aquamarine;
         padding-left: 5px;
      }
   </style>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption -->
      <legend>Message</legend>
      <p>
          Tutorials Point is an online learning platform providing free tutorials,
          paid premium courses, and eBooks. Learn the latest technologies and 
          programming languages SQL, MySQL, Python, C, C++, Java, Python, PHP,
          Machine Learning, data science, AI, Prompt Engineering and more.
      </p>
   </fieldset>
</body>
</html>

登录表单上的标题

考虑以下示例，我们使用 HTML <legend> 标签为 HTML <fieldset> 元素创建一个名为“用户详细信息”的标题（标题）。创建的标题将表示表单的标题。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
   <style>
      legend {
         color: rgb(168, 10, 193);
         font-size: 25px;
         width: 100px;
         background-color: rgb(164, 205, 14);
      }
      fieldset{
          width: 50%;
      }
      label{
          font-size: 24px;
      }
      input {
          border-radius: 5px;
          width: 95%;
      }
   </style>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption 
           and align attribute to align the caption -->
      <legend align="center">Login</legend>
        <form>
        <label for="">Username</label>
        <br>
        <input type="text">
        <br>
        <label for="">Password</label>
        <br>
        <input type="password">
        <br><br>
        <button>Submit</button>
      </form>
   </fieldset>
</body>
</html>

支持的浏览器

标签
legend	是	是	是	是	是

html_tags_reference.htm

打印页面