是唯一合法且必需的标题元素，必须作为其第一个子元素；它提供语义化标题和可访问性支持，错误位置或样式破坏将导致屏幕阅读器无法识别分组用途。
用 <legend></legend> 嵌入分组标题是唯一标准做法
HTML 中，<fieldset></fieldset> 的边框上嵌入说明文字，必须且只能用 <legend></legend> 作为其第一个子元素。浏览器会自动把它渲染在 <fieldset></fieldset> 边框左上角（或顶部居中，取决于 UA 样式），这是语义化与可访问性的强制要求——屏幕阅读器依赖它来宣告该表单组的用途。
<legend></legend> 必须紧跟 <fieldset></fieldset> 开始标签后
位置错误会导致语义断裂或样式异常。常见错误包括：
- 把
<legend></legend>放在<fieldset></fieldset>外面，或放在其他子元素之后 - 用
<div> 或 <code><p></p>模拟标题，失去语义和键盘导航支持 - 给
<legend></legend>加display: block或float后破坏默认定位逻辑
正确结构只有这一种：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<fieldset> <legend>账户类型</legend> <label><input type="radio" name="type" value="personal"> 个人</label> <label><input type="radio" name="type" value="business"> 企业</label> </fieldset>
样式调整要尊重默认行为，别强行“重置”
浏览器对 <legend></legend> 有特殊渲染逻辑（比如部分浏览器会让它“半嵌入”边框），直接用 margin、transform 或 position: absolute 容易引发错位或可访问性问题。建议：
- 优先用
padding和font-size微调视觉权重，而非移动位置 - 若需左对齐（默认常为居中），可用
text-align: left配合width: fit-content，但避免设固定宽 - 不要给
<legend></legend>设border或background覆盖默认边框衔接效果 - 在高对比度模式下测试：某些系统会强制重绘
<legend></legend>，自定义样式可能被忽略
不兼容旧 IE 的 legend 对齐问题怎么处理
IE8 及更早版本不支持 <legend></legend> 的 align 属性（如 align="left" 已废弃），且默认左对齐。现代项目通常无需适配，但如果必须支持：
- 避免用废弃的
align属性，它在 HTML5 中无效 - 用 CSS
text-align+margin-left模拟左对齐，但需配合legend { margin: 0; padding: 0; }清除 UA 默认边距 - 注意 IE9+ 已支持标准盒模型下的
<legend></legend>定位，不必为旧版过度 hack
真正容易被忽略的是：当 <fieldset></fieldset> 被设为 display: flex 或 display: grid 时，<legend></legend> 会脱离其默认定位上下文，边框衔接完全失效——这种布局方式本质上与 <fieldset></fieldset> 语义冲突，应避免。
