legend标签必须嵌套在fieldset内才生效，是fieldset的专属标题，用于语义说明和无障碍访问；单独使用无效，且样式需重置以避免对齐问题。
legend 标签必须嵌套在 fieldset 里才生效
单独写 <legend>用户名</legend> 不会渲染出任何效果，浏览器直接忽略。它本质是 <fieldset> 的专属标题，语义上表示该字段组的说明文字。
常见错误是把它当普通标题标签用，比如放在 <div> 或表单外层，结果页面完全不显示。正确结构只能是：
<fieldset> <legend>登录信息</legend> <input type="text" name="username"> <input type="password" name="password"> </fieldset>
legend 默认样式会覆盖 fieldset 边框顶部
浏览器原生行为是把 <legend> 渲染在 <fieldset> 左上角，并“切掉”边框顶部一段，形成视觉融合效果。这看似美观，但实际开发中常导致对齐混乱或响应式错位。
如果想自定义位置（比如居中、靠右、加背景），必须先重置默认样式：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
position: relative+top微调垂直偏移 - 用
width: fit-content配合margin: auto实现居中（注意 fieldset 需设display: block） - 绝对定位时记得给 fieldset 加
position: relative做参照 - 别直接用
float——legend 是替换元素，浮动行为不稳定
无障碍访问依赖 legend 和 fieldset 的配对
屏幕阅读器读到 <legend> 时，会把其中文本作为整个 <fieldset> 内所有表单控件的隐式标签。比如 <legend>支付方式</legend> 后跟三个 <input type="radio">，用户聚焦任一单选按钮时，都会听到“支付宝，支付方式”。
这点比单纯视觉美化重要得多。容易被忽略的坑有：
- 多个
<fieldset>共用一个<legend>（语法错误，只认第一个） - legend 文本为空或只有空格（
<legend> </legend>），会导致读屏中断 - 用 CSS
display: none隐藏 legend——视觉没了，读屏也没了；应改用clip-path或sr-only类
现代 CSS 能力让 legend 更可控，但兼容性要留意
Chrome 115+、Firefox 119+ 支持 legend 的 place-items 和 grid-area，可以轻松实现居中+背景色。但 Safari 目前仍不支持对 legend 使用 flex/grid 容器属性。
稳妥方案仍是传统定位 + 重置边框：
fieldset {
border: 1px solid #ccc;
position: relative;
}
legend {
padding: 0 12px;
background: #fff;
border: 1px solid #ccc;
border-bottom: none;
position: absolute;
top: -0.7em;
left: 1em;
}
真正麻烦的不是写法，而是 legend 的“半内置”特性——它既不是纯文本，也不是普通块级元素，所有样式调整都得绕着浏览器默认行为打补丁。
