optgroup必须嵌套在select内且为直接子元素，label属性非空，仅包含option，不支持嵌套、disabled或自定义样式，iOS原生select不显示分组标题。
optgroup 必须放在 select 里面，不能直接套 div 或其他标签
很多人写 <optgroup> 时习惯性把它当独立组件用，比如套在 <div> 里或单独渲染，结果发现完全不生效——<optgroup> 是 HTML 表单规范里的“语义分组容器”，浏览器只认它作为 <select> 的**直接子元素**。
正确结构只能是：<select> → <optgroup label="xxx"> → <option>。嵌套层级错一层，<optgroup> 就被忽略，所有选项会平铺显示，分组视觉和语义全丢。
-
<optgroup>的label属性必须存在，且值不能为空字符串（label=""会导致部分浏览器显示空白分隔线） - 不支持嵌套
<optgroup>：二级分组要靠前端逻辑模拟（比如用 disabled 的<option>做伪标题） - Chrome/Firefox/Safari 都支持，但旧版 IE 对
label样式控制极弱，别指望改字体或颜色
optgroup 的 label 文字不能被选中，但 option 可以被禁用
分组标题本身不是可交互项，用户点它不会触发选择，这点和 <option disabled> 不同——后者只是灰掉、不可选，但仍是有效 DOM 节点；而 <optgroup> 的 label 根本不参与表单提交，也不响应 click 事件（除非用 JS 绑定到父 <select> 上）。
如果想实现“点击分组标题展开/收起选项”，得自己加 JS 控制显隐，<optgroup> 本身不提供这类行为。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 禁止用
disabled属性作用于<optgroup>：HTML 规范不支持，浏览器会忽略 - 想让某组选项整体失效？得给每个
<option>加disabled，或者用 JS 拦截 change 事件 -
<optgroup>的label在屏幕阅读器中会被读出，对无障碍友好，别用空格或符号凑数
动态渲染 optgroup 时，label 中文乱码或特殊字符要转义
服务端吐数据或 JS 拼接字符串生成 <optgroup> 时，如果 label 含中文、括号、引号或 & 符号，不处理就会破坏 HTML 结构。比如 label="Java & Spring" 会把 & 当成实体开头，导致后续解析错乱。
安全做法是：服务端输出前做 HTML 实体编码；前端 JS 拼字符串时用 document.createTextNode() 或 textContent 设置 label，避免 innerHTML 注入风险。
- 常见错误：
el.innerHTML = '<optgroup label="A & B">...</optgroup>'→ 必须写成& - React/Vue 等框架通常自动转义，但手动拼 DOM 时务必检查
- label 内容过长时，Chrome 会截断显示，没有省略号，也没 tooltip 自动提示，得自己加
title属性
移动端 optgroup 显示异常，特别是 iOS Safari
iOS Safari 的原生下拉菜单（<select>）会把整个列表弹成全屏 modal，此时 <optgroup> 的分组标识可能被压缩、字体变小，甚至 label 和 option 间距消失——这不是 bug，是系统控件的固定样式，开发者无法用 CSS 调整。
如果设计要求严格分组视觉，尤其在 iOS 上，建议放弃原生 <select>，改用自定义下拉（比如用 <div> + <ul> 模拟），用 ARIA 属性维持可访问性。
- CSS 无法修改
<optgroup>的背景色、边框或 padding，appearance: none也无效 - Android Chrome 支持部分样式（如
color），但 iOS 完全无视 - 测试时务必真机验证，模拟器常显示正常，实机却错位
<optgroup> 实现复杂交互。它本质是个语义标记，不是 UI 组件。 
