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