legend标签仅在嵌套于fieldset内且为第一个子元素时才有效，单独使用无效；必须配合fieldset实现语义化分组标题，位置敏感，样式调整应通过css而非废弃属性；无fieldset时宜用h3或aria-labelledby替代。
HTML里没有legend分组标题这回事
别在HTML标签里找legend当分组标题用——它只属于<fieldset></fieldset>，而且必须配合<fieldset></fieldset>才能生效。单独写<legend>标题</legend>浏览器会忽略，或者直接渲染成普通文本，毫无语义和样式保障。
legend必须嵌套在fieldset里才起作用
这是硬性规则，不是可选建议。浏览器解析时，legend只有作为fieldset的第一个子元素时，才会被识别为该字段集的标题，并自动定位到边框左上角（默认行为）。
- 正确写法：
- 错误写法：
<legend>用户信息</legend> <div>...</div>
—— 这里legend无父fieldset，等同于无效标签 - 位置敏感：
legend必须是fieldset内第一个子元素；放在中间或末尾，视觉上会错位，部分旧浏览器甚至不渲染
想控制legend位置？CSS比属性更可靠
HTML标准没提供legend的align之类属性，老式写法如<legend align="right"></legend>早已废弃，现代浏览器基本不支持。真要调整位置，得靠CSS：
- 用
float或position: absolute微调，但需注意fieldset边框可能重叠 - 更稳妥的方式是设
legend为display: block后用text-align或margin-left居中/右对齐 - 避免用
width硬设宽——legend默认是inline元素，设宽需先display: inline-block或block - Chrome/Firefox对
legend的transform支持良好，但Safari某些版本有渲染偏移，上线前务必实测
替代方案：不用fieldset时，用h3或aria-labelledby
如果只是需要视觉分组标题，又不想套fieldset（比如表单逻辑不相关、或已有复杂布局），就别硬套legend。直接用语义化标题标签更干净：
- 结构清晰场景：用
<h3>配置选项</h3>+<div class="group">...</div> - 需要无障碍支持：给容器加
role="group"，再用aria-labelledby指向一个id化的标题元素 - 千万别为了“看起来像
legend”而滥用fieldset——它本意是语义化分组+表单提交逻辑单元，乱用反而破坏可访问性
真正容易被忽略的是：很多开发者以为legend是通用标题组件，其实它和label一样，是强语义绑定型元素。用错地方，不仅样式不可控，屏幕阅读器也会读错上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
