optgroup必须直接嵌套在select内，因html规范强制要求其为select的唯一合法直接子元素；若被div、注释等包裹，浏览器将静默忽略整个分组，仅保留option显示，导致标题不渲染、语义丢失、屏幕阅读器无法识别。
为什么optgroup必须直接嵌套在select里
因为浏览器只认这个结构：如果optgroup被包在div、span甚至注释里，它就彻底失效——选项照常显示，但分组标题不出现，屏幕阅读器也读不出语义。这不是兼容性问题，是规范强制要求。
常见静默失败场景：
-
<select><div><optgroup label="前端"></optgroup></div></select>→ 整个optgroup被忽略 -
<select><!-- 注释 --><optgroup label="后端"></optgroup></select>→ 分组标题消失，仅 - JS 动态插入时用
select.appendChild(optgroup)→ Chrome 报DOMException，Firefox 静默丢弃
正确写法只有一种：<select><optgroup label="xxx"><option>...</option></optgroup></select>。动态添加必须用 select.add(optgroup)，且要先设好 optgroup.label。
label属性为什么不能为空或含HTML
label不是可选装饰，而是optgroup唯一必需属性。空值（label=""）、纯空白（label=" "）或含标签（label="<strong>水果</strong>"）都会导致分组标题不渲染，但内部option仍可见——这会让用户困惑“为什么有标题又没标题”。
实际使用注意点：
- 中文建议控制在2–4字，比如
label="华东"，避免label="其他分类（请谨慎选择）"这种冗长模糊表述 - 它只渲染为纯文本，CSS 里能调的样式极少：
color基本可用，background-color和padding在 Safari 和 iOS 原生下拉中几乎无效 - iOS Safari 中，
optgroup的label通常完全不显示，只渲染option——别指望它在移动端起作用
禁用整组和禁用单个选项的区别
optgroup disabled和option disabled行为不同，但容易混淆。前者让整组变灰不可选，但label仍可见；后者只禁用单个项，不影响同组其他选项。
调试时高频误判：
- 看到某组全灰，第一反应删掉
optgroup disabled→ 结果没变化，其实是所有option都写了disabled - 给
optgroup加disabled，再给其中某个option也加disabled→ 没额外效果，细粒度优先 - 想让某组“彻底消失”，不能靠
disabled，得用 JS 移除整个optgroup节点，或服务端不输出该标签
真正需要禁用整组时，直接写<optgroup label="实验功能" disabled><option value="a">A</option></optgroup>即可。
多选/单选框分组为什么不能用optgroup
optgroup只对select有效，对input type="checkbox"或radio完全无效。这类控件的语义分组必须用fieldset + legend，否则：
- 屏幕阅读器无法识别“这组 checkbox 是兴趣爱好”，会把每个选项当独立控件读
- 后端收不到数组：没
fieldset时，同名name="hobby"只会提交最后一个值；加了name="hobby[]"且包裹在fieldset里，才能收到["reading", "coding"] -
fieldset disabled会彻底禁用所有子控件（包括legend点击），如需保留交互控制权，改用aria-disabled="true"+ CSS 灰色样式
别试图用div class="group"或class模拟分组——它既没语义，也不解决无障碍和后端接收问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
