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