fieldset 必须配非空 legend 作首子元素以保障可访问性，disabled 属性会禁用所有子控件并阻止提交，嵌套需谨慎且每层须有明确 legend，UI 框架可能剥离其语义需实测 DOM。
fieldset 不是视觉装饰标签，它直接参与表单语义、键盘导航和辅助技术解析。没配 legend 的 fieldset 在可访问性层面等于不存在。
必须用 legend 作首子元素，且不能为空文本
浏览器和读屏软件依赖 legend 理解分组意图。空 <legend></legend> 虽能通过 HTML 验证，但会向屏幕阅读器播报“空白分组”，比不写更误导。
-
legend必须是fieldset的第一个子节点，顺序错（比如先放input再放legend）会导致语义断裂 - 文字要具体，比如
<legend>收货地址</legend>，避免模糊词如“信息”“详情” - 别用
display: none或visibility: hidden隐藏legend，可用position: absolute; clip: rect(1px, 1px, 1px, 1px)实现视觉隐藏但保留可访问性
disabled 属性会真实禁用所有子控件，不只是加灰样式
给 fieldset 加 disabled，相当于对内部每个 input、select、textarea、button 都设了 disabled——它们无法聚焦、无法输入、默认不提交值。
- 如果只想禁用部分控件，不要用
fieldset[disabled]，改用单个控件的disabled属性 -
label元素在fieldset[disabled]下点击行为不一致：Chrome 允许穿透到内部控件（即使被禁用），Firefox 则完全拦截，务必真机测试 - 被禁用的
input值不会出现在FormData或表单序列化结果中，需用 JS 手动补全（如果业务逻辑要求提交）
嵌套 fieldset 容易破坏 Tab 导航，单层优先
深层嵌套（≥3 层）会让键盘用户陷入焦点“卡住”状态：按 Tab 进入内层后，很难再跳出，尤其当某层 legend 缺失或为空时，焦点管理逻辑会失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 优先用单层
fieldset分组，靠 CSS（如margin、border-bottom）做视觉区隔 - 若必须嵌套，请确保每层都有语义明确的
legend，且legend内不放任何可交互元素（如button、input） - 用
document.activeElement+console.log实时观察焦点路径，比依赖浏览器默认 Tab 顺序更可靠
UI 框架可能剥离 fieldset，必须检查渲染后 DOM
Bootstrap、Ant Design 等框架的表单组件常通过 CSS Grid/Flex 模拟分组结构，会主动移除或忽略你写的 fieldset 和 legend ——此时它们只剩视觉作用，语义和可访问性全丢。
- 打开开发者工具，检查最终渲染的 DOM，确认
fieldset和legend标签真实存在且未被 JS 清除 - 若框架不支持，可绕过其表单组件，手写原生
fieldset+legend，再用 CSS 对齐样式 -
form属性可让fieldset脱离form标签物理包裹但仍参与提交，但仅限 HTML5，且需确保目标form存在对应id
最常被跳过的动作：写完 fieldset 后没用屏幕阅读器试读，也没用键盘 Tab 走一遍流程。语义是否生效，不看代码，只看运行时行为。
