HTML <legend> 标签用于指定 <fieldset> 元素的标题。它通常位于框架的顶部，因为它是一个标题。使用 <fieldset> 标签在元素的内容周围绘制边框，在该边框上，我们可以使用 <legend> 标签设置标题。它帮助我们通过遵循图例标签设置的标题来识别包装的组。
语法
<legend>.......</legend>
属性
<legend> 标签支持 HTML 的 全局属性 和 事件属性。以及下面列出的特定属性。
| 属性 | 值 | 描述 |
|---|---|---|
| align | left right center justify |
这用于设置元素的水平对齐方式。 |
<legend> 标签示例
下面的示例将说明<legend> 标签的用法。在哪里、何时以及如何使用它来创建标题，以及我们如何使用 CSS 设置该标题的样式。
使用 <legend> 标签创建标题
在以下示例中，我们使用 <legend> 标签来定义其父 <fieldset> 标记的标题。<legend> 标签可用于任何元素以提供标题，但最好将其与字段集元素一起使用。
<!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 设置<legend> 标签的样式
在此示例中，我们使用 <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>
QikepuCom is an online learning platform providing free QikepuCom,
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> 元素创建一个名为 “User Details” 的标题（title）。创建的标题将表示表单的标题。
<!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> | Yes | Yes | Yes | Yes | Yes |
