fieldset是语义化容器，用于逻辑分组相关表单控件；legend必须为其首个子元素，作为该组可访问性标题，被屏幕阅读器读作所有控件的上下文说明，不可省略，否则语义失效。

fieldset 和 legend 的基本作用是什么fieldset 是语义化容器，用来把一组相关表单控件逻辑上归为一类；legend 必须是 fieldset 的第一个子元素，作为该组的标题。浏览器默认会给 fieldset 加边框、给 legend 偏移居中显示——这不是装饰，而是可访问性基础设施：屏幕阅读器会把 legend 文本读作该组所有控件的上下文说明。

• legend 不可省略，否则 fieldset 语义失效，辅助技术无法理解分组意图
• 多个 fieldset 可嵌套，但深层嵌套会增加认知负担，一般只用一层分组
• fieldset 会影响 tab 键顺序（整组被视为一个 tab stop），对键盘用户友好

怎么写才不会让 checkbox/radio 失去焦点或无法操作 常见错误是把 input 放在 legend 里，或者误用 disabled 属性位置。正确结构必须是：legend 单独一行，所有控件（包括 label + input）放在 legend 后面、fieldset 内部。

• legend 里不能放任何交互元素（如 input、button），否则破坏语义且部分浏览器禁用聚焦
• 若需禁用整组，应给 fieldset 加 disabled 属性，而不是分别加在每个 input 上（否则 legend 文字变灰但控件仍可 tab 进入）
• 每个 input 必须配 label，且 for 指向 id，否则点击文字无法触发复选/单选

<fieldset>
  <legend>通知方式</legend>
  <label><input type="checkbox" name="notify" value="email"> 邮件</label>
  <label><input type="checkbox" name="notify" value="sms"> 短信</label>
</fieldset>

样式覆盖时容易破坏什么 重置 fieldset 边框或 legend 定位时，可能意外抹掉可访问性线索。比如设 border: none 后视觉无分组感，又没补足其他视觉提示（如背景色、间距），普通用户就看不出逻辑关系。

• 不要仅靠 CSS 隐藏 fieldset 边框而不提供替代视觉分隔（例如用 padding + background-color 区分区域）
• 修改 legend 的 position 或 transform 时，确保其文本仍在 DOM 顺序首位，且未被裁剪或脱离可读范围
• 在高对比度模式下测试：系统会强制覆盖部分 CSS，fieldset 默认边框可能重新出现，若你用 clip-path 裁剪 legend，文字可能直接消失

和 div 分组相比，实际收益在哪 用 div + class 也能视觉分组，但缺失两样关键东西：一是表单提交时，fieldset 被禁用后，内部所有控件值不会提交（div 无此行为）；二是无障碍支持——AT（辅助技术）能识别 fieldset/legend 组合并播报上下文，而 div 只是普通容器。

• 若后端依赖某组字段是否提交来判断用户意图（例如“不选通知方式”代表全部关闭），fieldset disabled 可天然实现，div 需额外 JS 控制每个控件的 disabled 状态
• 使用 form.elements API 获取表单控件时，fieldset 会出现在 elements 集合中，可用于遍历分组（div 不会）
• 浏览器原生表单验证（如 required）与 fieldset 无直接绑定，但它影响 checkValidity() 的调用粒度：禁用整个 fieldset 后，其内部控件的验证会被跳过

fieldset 不是“更高级的 div”，它是带行为契约的语义容器。漏掉 legend、乱放 input、或纯为样式弃用它，等于主动放弃一部分健壮性和兼容性。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载