是的语义必需子元素，必须作为首个子元素且不可省略；省略或错位将导致分组失效、无障碍支持断裂；仅允许内联元素嵌套，禁止块级元素；需确保文本可访问、位置稳定、动态更新时配合aria。
用 <legend></legend> 作为 <fieldset></fieldset> 的唯一合法标题
<legend></legend> 不是可选的修饰标签，而是 <fieldset></fieldset> 的语义必需子元素——浏览器和读屏器依赖它识别分组意图。如果省略或用 <h3></h3>、<div> 替代，会导致表单结构断裂、无障碍支持失效，且部分浏览器（如旧版 IE）会渲染异常。
<p>正确写法必须是：</p>
<pre class="brush:php;toolbar:false;"></pre>
<fieldset>
<legend>账户信息</legend>
<label>用户名：<input name="username"></label>
<label>邮箱：<input name="email"></label>
</fieldset>
<ul>
<li>
<code><legend></legend> 必须直接位于 <fieldset></fieldset> 开始标签之后，且只能出现一次
<p></p>），但可内联使用 <strong></strong> 或 <span></span>
::before）添加，而非在 <legend></legend> 内硬塞 <img>
让 <legend></legend> 支持多行文本或复杂排版
原生 <legend></legend> 是内联元素，换行、浮动、flex 布局默认不生效，强行加 display: block 可能破坏其与 <fieldset></fieldset> 边框的锚定关系（比如标题偏移、边框断开）。
安全做法是：
- 用
white-space: pre-line或word-break: break-word控制换行，避免折断单词 - 通过
padding和margin微调位置，而不是position: absolute - 如需图标+文字组合，推荐：
<legend> <span aria-hidden="true" style="margin-right: 8px;">?</span>登录凭证</legend>
避免用 JavaScript 动态替换 <legend></legend> 内容引发的可访问性问题
读屏器通常只在初始渲染时缓存 <legend></legend> 文本，后续用 JS 修改 textContent 不会自动通知辅助技术更新上下文。
若必须动态更新（如多语言切换、步骤引导），应配合 ARIA 属性：
- 给
<legend></legend>添加id（如id="step-legend"） - 用
aria-labelledby="step-legend"显式关联受影响的控件组 - 更新文本后，触发
aria-live="polite"区域播报变更（仅当内容有操作意义时）
Chrome/Firefox 中 <legend></legend> 垂直居中异常的常见原因
现代浏览器默认将 <legend></legend> 垂直居中于 <fieldset></fieldset> 边框顶部，但实际常出现偏高或偏低——根本原因是 <legend></legend> 的 line-height 与父容器 font-size 不匹配，或存在未重置的全局样式干扰。
快速修复方式：
- 显式设置
line-height: 1.2或line-height: normal在<legend></legend>上 - 避免对
<fieldset></fieldset>设置padding-top，它会挤压<legend></legend>的定位空间 - 在 Firefox 中若仍错位，加
vertical-align: top（Chrome 不需要，但无害）
真正难处理的是跨浏览器下边框与标题的像素级对齐，这往往不是代码问题，而是字体度量差异导致的视觉误差——别花时间像素对齐，优先保证语义正确和键盘焦点逻辑完整。
