fieldset 必须与 legend 配合使用以保障语义和可访问性，单独使用无效；disabled 属性会真实禁用所有子控件交互；嵌套需谨慎，深层嵌套易破坏键盘导航；ui 框架可能剥离 fieldset，须检查 dom 确认存在。
fieldset 不是装饰性标签，它有明确的语义和可访问性职责：浏览器和读屏软件会把它识别为“一组相关表单控件”，忽略它会导致表单逻辑断裂、键盘导航混乱、WCAG 合规失败。
fieldset 必须配 legend 才算有效
单独写 <fieldset></fieldset> 在语义和可访问性上等于没写。浏览器不会报错，但读屏软件无法告知用户这组控件的用途。
-
<legend></legend>是<fieldset></fieldset>的唯一合法首子元素，且必须存在（哪怕内容为空） - 空
<legend></legend>比完全不写强，但最好用有意义的文字，比如<legend>收货地址</legend> - 不要用 CSS 隐藏
<legend></legend>（如display: none），可用clip-path或position: absolute; clip: rect(1px,1px,1px,1px)实现视觉隐藏但保留可访问性
fieldset 会自动禁用内部所有控件
给 <fieldset></fieldset> 加 disabled 属性，不是“只是加个灰样式”，而是真实地阻止所有子控件的交互、聚焦和提交——包括 <input>、<select></select>、<textarea></textarea>，甚至嵌套的 <button></button> 和自定义组件（只要它们没手动覆盖 pointer-events）。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 注意：被禁用的
<input>值默认不参与表单提交（除非显式设name并用 JS 补充） - 如果只想禁用部分控件，别用
fieldset[disabled]，改用单个控件的disabled属性 - Chrome/Firefox 对
fieldset[disabled]下<label></label>的点击穿透行为略有差异，测试时务必真机验证
嵌套 fieldset 容易破坏键盘 Tab 顺序
多个 <fieldset></fieldset> 嵌套本身合法，但深层嵌套（≥3 层）会让键盘用户在按 Tab 时陷入“进得去、出不来”的循环——尤其当内层 <legend></legend> 没文字或被隐藏时，焦点管理逻辑会失效。
- 优先用单层
<fieldset></fieldset>分组，靠 CSS（如margin、border）做视觉分隔 - 若必须嵌套，请确保每层都有语义清晰的
<legend></legend>，且避免在<legend></legend>中放交互元素（如<button></button>） - 用
document.activeElement+console.log实时观察焦点路径，比依赖浏览器默认行为更可靠
最常被忽略的一点：很多 UI 框架（比如 Bootstrap、Ant Design）的表单组件会主动移除或忽略 <fieldset></fieldset>，因为它们用 CSS Grid/Flex 模拟分组。这时候你写的 <fieldset></fieldset> 可能只起视觉作用，语义和可访问性全丢了——检查渲染后的 DOM，确认 <fieldset></fieldset> 和 <legend></legend> 真实存在且未被框架脚本剥离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
