必须作为的第一个子元素，否则语义失效、屏幕阅读器无法识别——这是html规范强制要求，非建议；它不可单独使用，必须嵌套在内且为首个直接子节点，否则浏览器忽略或移除。
<legend></legend> 必须作为 <fieldset></fieldset> 的第一个子元素，否则语义失效、屏幕阅读器不识别——这不是“最好这么做”，而是 HTML 规范强制要求。
为什么<legend></legend>单独写没反应
浏览器直接忽略 <legend></legend> 独立存在的情况。它不是通用标题标签，而是 <fieldset></fieldset> 的专属说明组件，必须嵌套在其中才生效。
- 错误写法：
<legend></legend>登录信息放在<form></form>顶层或<div> 里 → 页面不渲染，无障碍树中无节点 <li>正确结构：只能是 <code><fieldset><legend></legend></fieldset>标题表单控件 - React/Vue 中若用条件渲染（如
{showLegend && <legend>xxx</legend>}），要确保它始终是<fieldset></fieldset>下的第一个子节点，不能被其他元素或 Fragment 挤到后面 - 全局重置了
fieldset的margin/padding，又没重设legend的定位基准 - 把
<fieldset></fieldset>放进display: flex容器 →<legend></legend>被当作 flex item 拉伸/对齐，脱离原生布局流 - 用
position: absolute微调时，忘了给<fieldset></fieldset>加position: relative做参照 - 绝对定位后没配
transform: translateX(-50%)或left: 50%，仅靠top移动，文字悬空、边框不动 -
<fieldset disabled><legend></legend></fieldset>支付方式<input type="radio" name="pay">→ 内部所有直属表单控件自动禁用且不提交 - 别对
<legend></legend>单独设disabled，浏览器会忽略，还可能误导维护者 - 视觉上需要灰化效果？补 CSS：
fieldset[disabled] { opacity: 0.6; }，但注意这不影响语义禁用逻辑 - Chrome/Firefox 对
<button type="submit"></button>在disabled fieldset中仍有旧版兼容问题，建议统一用<button type="button"></button>配合 JS 提交
<legend></legend>位置偏移或被裁剪的常见原因
默认样式会让 <legend></legend> “切掉” <fieldset></fieldset> 边框顶部，但实际开发中常因 CSS 干扰导致错位。
禁用整组时，<legend></legend>要不要加 disabled
不用，也不能加。<legend></legend> 本身不可交互，disabled 属性对它无效；真正起作用的是给 <fieldset></fieldset> 加 disabled。
最容易被忽略的点是：删掉默认边框后，如果不手动加 outline、box-shadow 或背景色等视觉线索，键盘用户根本看不出哪块是一组——<legend></legend> 的语义再强，也得靠可见反馈落地。
