legend元素必须作为fieldset的直接子元素且为第一个子元素才有效，单独使用无效；它专用于语义化表单控件分组，影响无障碍访问、键盘导航及浏览器渲染行为。
legend 元素必须嵌套在 fieldset 里才有效
单独写 <legend>用户名</legend> 不会显示，浏览器直接忽略。它不是独立表单控件，而是 <fieldset></fieldset> 的专属标题标签，语义上表示“这一组控件的说明”。
- 必须作为
<fieldset></fieldset>的第一个子元素，否则部分浏览器（如旧版 IE）可能渲染异常 - 如果只是想加个标题又不想用
<fieldset></fieldset>，该用<h3></h3>或带aria-labelledby的<div>，别硬套 <code><legend></legend> -
<fieldset></fieldset>默认带边框，若需隐藏，CSS 中设border: none即可，不影响<legend></legend>定位 - Chrome 和 Firefox 对
<legend></legend>的定位逻辑不同：它默认是position: relative，但“相对”的基准是<fieldset></fieldset>的上边框内侧，不是 content box - 避免给
<fieldset></fieldset>设display: flex；真要布局对齐，用<legend></legend>外层包一层<div> 再 flex <li>微调位置时优先用 <code>margin-left或transform: translateX()，别碰top/left—— 容易触发怪异定位行为 - 不要用
<legend></legend>包文字再加图标，例如<legend>✅ 登录信息</legend>—— emoji 可能被朗读为“勾号 登录信息”，干扰理解 - 若一组控件含多个
<input>且共用一个语义目的（如“收货地址”），就必须用<fieldset><legend></legend></fieldset>，不能只靠<h3></h3>视觉模拟 - 禁用整个
<fieldset></fieldset>（disabled属性）会自动禁用内部所有表单控件，这是<legend></legend>无法替代的底层能力 -
<legend></legend>必须是<fieldset></fieldset>的直接子节点，中间不能插入任何 wrapper 元素或 Fragment - 错误示例：
<fieldset> <legend>xxx</legend>><input> </fieldset>→ 渲染后<legend></legend>脱离父级，失效 - 正确做法：把
<legend></legend>和内容一起交给同一个组件返回，或用 props 透传legend内容，由<fieldset></fieldset>组件统一组织结构
legend 位置偏移常见于 CSS 重置或 flex 布局干扰
很多项目全局重置了 fieldset 的 margin/padding，或把 fieldset 放进 display: flex 容器里，结果 <legend></legend> 跑到左上角、叠在边框上，甚至被裁剪。
无障碍支持依赖 legend + fieldset 的组合结构
屏幕阅读器（如 NVDA、VoiceOver）只有在 <legend></legend> 和 <fieldset></fieldset> 配合使用时，才会把整组控件读作“用户名组：邮箱、密码”，否则每个输入框孤立播报，用户无法理解上下文。
React 中动态渲染 legend 要注意 fragment 陷阱
用 React 写 <fieldset>
<legend>{title}</legend>{children}</fieldset> 没问题，但若拆成两个组件（比如 <fieldsetlegend title="{...}"></fieldsetlegend> 和 <fieldsetbody></fieldsetbody>），就容易误用 <react.fragment></react.fragment> 导致 DOM 结构断裂。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的是：legend 不是装饰性标签，它的存在与否直接影响表单语义、键盘导航顺序和辅助技术行为。哪怕视觉上不想要边框，也别删掉 fieldset —— 那等于主动放弃结构化表达。
