optgroup必须嵌套在select内且只含option，label必填并渲染为灰色不可选标题，disabled仅禁用选项不隐藏label，无value属性，不影响表单提交，键盘导航跳过分组标题。
optgroup 不能单独存在，必须嵌套在 <select> 内，且内部只能放 <option> —— 这是绝大多数人第一次用就报错的根本原因。
optgroup 必须配合 select 和 option 使用
浏览器会直接忽略孤立的 <optgroup>，甚至可能让整个下拉框渲染失败。它不是容器组件，只是语义分组标签。
-
<select>是唯一合法父元素，没有例外 -
<optgroup>内部不能嵌套<optgroup>（不支持多级分组） - 每个
<optgroup>至少要包含一个<option>，否则视觉上可能“消失”或被跳过 - label 属性必须存在，否则分组标题不显示（且部分旧版 Safari 会报解析警告）
label 属性值会被渲染为灰色禁用标题
所有主流浏览器都把 label 渲染成不可选、不可聚焦的灰色文字，但它的样式无法通过 CSS 直接修改 color 或 font-weight（原生控件限制）。
- 不要试图给
<optgroup label="...">加class或style—— 大部分样式会被忽略 - 如果需要自定义分组样式（比如加图标、改字体），必须放弃原生
<select>，改用 JS 模拟下拉（如 Select2、Choices.js） - label 值支持空格和中文，但避免使用特殊字符如
<>，否则需 HTML 实体转义
disabled 属性只禁用整个分组的选项，不隐藏 label
给 <optgroup disabled> 加上 disabled，里面所有 <option> 都变灰不可选，但分组标题仍可见 —— 这常被误认为“没生效”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 想彻底隐藏某一分组？只能靠 JS 动态移除该
<optgroup>节点，或服务端不输出 - 不要对
<optgroup>设置value：它没有 value 属性，设了也无效 - 键盘导航（Tab + 方向键）会跳过分组标题，直接落到可选项上 —— 这是无障碍友好设计，不是 bug
optgroup 不影响表单提交和 JavaScript 获取值
提交时，只有被选中的 <option> 的 value 会发送；JS 读取 select.value 或遍历 select.options 时，<optgroup> 完全不可见。
- DOM 中
select.children包含<optgroup>节点，但select.options只返回<option>元素（这是最易混淆的点） - 用
select.selectedOptions[0].parentNode可反查所属分组，但要注意 parentNode 可能是<select>（无分组时） - 服务端收到的永远只是字符串值，完全感知不到前端有没有用 optgroup
真正麻烦的是跨浏览器下拉高度计算和焦点管理 —— <optgroup> 自身不占布局空间，但它的 label 会影响鼠标 hover 区域和键盘导航顺序，这点在做高对比度模式或屏幕阅读器适配时容易漏掉。
