必须作为的直接且首个子元素，否则会被浏览器移除或忽略；它不是通用标题标签，不能脱离单独使用，也不可与混用替代语义功能。
HTML 中没有 <legend></legend> 标签的“添加方式”问题——它不能单独存在，必须嵌套在 <fieldset></fieldset> 内部，否则无效或被浏览器忽略。
为什么 <legend></legend> 一用就消失或不显示
常见错误是把 <legend></legend> 当成普通标题标签（比如像 <h2></h2>）直接丢在页面任意位置。浏览器解析时发现它不在 <fieldset></fieldset> 里，会自动将其“移出”或静默丢弃——你根本看不到报错，但 DOM 里它就没了。
-
<legend></legend>是<fieldset></fieldset>的**唯一合法子元素（且必须是第一个）**，不是通用语义标签 - 如果写成
<div><legend>标题</legend></div>，多数浏览器会把<legend></legend>提升到<div> 外，甚至从 DOM 中剥离 <li>检查方式：打开开发者工具，看 Elements 面板中 <code><legend></legend>是否还在预期位置 - ✅ 正确：
<fieldset> <legend>登录信息</legend> <input name="user"> </fieldset> - ❌ 错误：
<fieldset><div><legend>登录信息</legend></div></fieldset>（<legend></legend>不是直接子元素） - ❌ 错误：
<fieldset> <input><legend>登录信息</legend> </fieldset>（不是第一个子节点） - 注意：CSS 可以调整位置（如用
position: absolute），但结构上仍需满足“首个直接子元素” - 一个
<fieldset></fieldset>只能有一个<legend></legend>；但可以有多个<label></label> - 如果只给某个
<input>加<label></label>，却不包<fieldset></fieldset>+<legend></legend>，那“这组控件属于什么功能模块”就缺失了语义 - 无障碍场景下，屏幕阅读器读
<legend></legend>时会把它作为后续所有控件的上下文前缀（例如：“登录信息 用户名 输入框”）——这点<label></label>做不到 - 别用
<legend></legend>替代视觉上的标题栏：它默认有边框切割效果，样式重置成本比<h3></h3>高得多
<legend></legend> 放哪儿才生效
它必须作为 <fieldset></fieldset> 的**直接子元素**，且**必须是第一个子节点**。顺序错、层级深、中间插了其他元素，都会导致渲染异常或语义失效（尤其影响屏幕阅读器）。
和 <label></label> 混用时容易踩的坑
<legend></legend> 管的是整个 <fieldset></fieldset> 区块的语义分组，而 <label></label> 绑定单个表单控件。两者目标不同，但常被误当成替代关系。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是怎么写，而是忘了它存在的前提——没 <fieldset></fieldset>，<legend></legend> 就是废标签。很多人调了半天 CSS，结果发现 DOM 根本没它。
