fieldset必须配legend才生效，legend是其唯一合法且必需的第一个子元素；disabled作用于整个字段组并阻止所有交互；嵌套需谨慎，框架可能剥离该结构。
fieldset 必须配 legend 才算真正生效
单独写 <fieldset></fieldset> 不会报错，但语义和可访问性全丢——屏幕阅读器根本不知道这组控件是干啥的。浏览器只把它当普通容器，<legend></legend> 是它唯一合法且必须存在的第一个子元素。
常见错误包括：
• 把 <legend></legend> 写在中间或末尾
• 用 display: none 隐藏 <legend></legend>（应改用 clip-path 或 position: absolute; clip: rect(1px,1px,1px,1px)）
• 用 emoji 或图标代替文字，比如 <legend>✅ 账户设置</legend>，会被朗读为“勾号 账户设置”，干扰理解
正确写法示例：
disabled 属性作用于整个 fieldset，不是视觉装饰
给 <fieldset disabled></fieldset> 加 disabled，不只是变灰、禁鼠标点击——它真实地阻止所有子控件的聚焦、交互和表单提交，包括 <input>、<select></select>、<textarea></textarea>，甚至嵌套的 <button></button>（除非你手动覆盖 pointer-events）。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
注意点：
• 被禁用的 <input> 默认不参与提交，哪怕有 name 属性
• 如果只想禁用部分控件，别用 fieldset[disabled]，直接给对应控件加 disabled
• Chrome 和 Firefox 对 <label></label> 点击穿透行为有差异，务必真机测试
• React 中若拆成多个组件返回，容易因 Fragment 或 wrapper 元素导致 <legend></legend> 不再是 <fieldset></fieldset> 的直接子节点，DOM 结构就断了
嵌套 fieldset 容易搞崩键盘导航
嵌套本身合法，但 ≥3 层时极易出问题：Tab 键可能卡在内层出不来，尤其当某层 <legend></legend> 缺失、为空或被隐藏时，焦点管理逻辑会失效。
实用建议：
• 优先用单层 <fieldset></fieldset> 分组，靠 CSS（如 margin、border）做视觉分隔
• 若必须嵌套，确保每层都有语义清晰的 <legend></legend>，且不往里面塞 <button></button> 等交互元素
• 用 document.activeElement + console.log 实时观察焦点路径，比依赖浏览器默认行为更可靠
UI 框架常悄悄移除 fieldset，得手动验证 DOM
Bootstrap、Ant Design 这类框架喜欢用 CSS Grid/Flex 模拟分组，它们的表单组件往往会在渲染时剥离或忽略你写的 <fieldset></fieldset> 和 <legend></legend>。结果就是：你写了，但 DOM 里没有；语义丢了，可访问性也断了。
上线前必须检查：
• 打开浏览器开发者工具，确认 <fieldset></fieldset> 和 <legend></legend> 真实存在于最终渲染的 HTML 中
• 不要只看源码或 JSX，要看 Elements 面板里的实际结构
• 如果框架不支持，宁可用 aria-labelledby + <div> 模拟，也别假装用了 <code><fieldset></fieldset>
