optgroup 必须作为 select 的直接子元素且仅包裹 option，label 属性必需且仅支持纯文本，disabled 作用于整组但不覆盖 option 独立状态，无障碍有效但无 seo 价值。
optgroup 必须嵌套在 select 里面才能生效
单独写 <optgroup></optgroup> 标签不会渲染出任何内容，浏览器会直接忽略它。必须作为 <select></select> 的直接子元素使用，且只能包裹 <option></option>，不能嵌套其他 <optgroup></optgroup>。
常见错误是把 <optgroup></optgroup> 放在 <div> 或表单其他位置，或者试图用 JavaScript 动态插入但没挂到 <code><select></select> 下——结果就是选项不显示、分组标题消失、控制台也无报错，纯静默失效。
-
<select><optgroup label="前端"><option>HTML</option></optgroup></select>✅ 正确 -
<div><optgroup label="前端">...</optgroup></div>❌ 不渲染 -
<select><div><optgroup>...</optgroup></div></select>❌ 被忽略
label 属性是必需的，且只支持纯文本
label 是 <optgroup></optgroup> 唯一必需属性，值会显示为灰色分组标题。它不接受 HTML 标签，写 label="<strong>前端</strong>" 会被当作文本原样输出，不会加粗。
如果需要样式定制（比如改颜色、字体大小），只能通过 CSS 选择器定位 optgroup 元素，但注意：Safari 对 <optgroup></optgroup> 的 CSS 支持有限，color 可用，font-weight 在部分版本无效。
-
<optgroup label="后端语言"></optgroup>✅ 渲染为可读标题 -
<optgroup></optgroup>❌ 缺少 label，分组标题不显示，内部<option></option>仍可见但失去分组语义 -
<optgroup label="<i>数据库</i>"></optgroup>❌ 显示文字 “数据库”，不是斜体
disabled 属性作用于整组，但不影响 option 的独立 disabled 状态
给 <optgroup></optgroup> 加 disabled，会让整个分组变灰且不可选，但每个 <option></option> 仍可单独设 disabled。两者叠加时，优先级以更细粒度为准：某个 <option></option> 即使所在 <optgroup></optgroup> 已 disabled，自己再加 disabled 也没额外效果；但若 <optgroup></optgroup> 没禁用，而某个 <option></option> 单独禁用了，它依然不可选。
实际调试时容易误判：看到某组选项全灰，就以为是 <optgroup disabled></optgroup> 导致，其实可能是所有 <option></option> 都写了 disabled —— 这时删掉 <optgroup></optgroup> 的 disabled 并不会恢复可选状态。
-
<optgroup label="实验功能" disabled><option value="a">A</option></optgroup>→ 整组不可选 -
<optgroup label="实验功能"><option value="a" disabled>A</option></optgroup>→ 仅 A 不可选，其他同组选项仍可选
无障碍与 SEO 注意：optgroup 不生成独立焦点，但提升语义结构
屏幕阅读器（如 NVDA、VoiceOver）会读出 label 值，例如“前端，组合框”，然后逐个读选项。这对视障用户理解选项归属很关键。但 <optgroup></optgroup> 本身不能获得键盘焦点，Tab 键跳过它，只停在 <option></option> 上。
搜索引擎不索引 <select></select> 内容，所以 <optgroup></optgroup> 对 SEO 几乎无影响。但它能强化 HTML 语义，配合 <label for></label> 使用时，整体表单可访问性得分更高。别为了“好看”而滥用分组——选项少于 4 个时，加 <optgroup></optgroup> 反而增加认知负担。
真正容易被忽略的是：服务端接收数据时，永远只拿到 <option></option> 的 value，<optgroup></optgroup> 的 label 不会随表单提交。想存分组信息，得靠额外字段或约定命名（如 value="frontend-html"）。
