optgroup 必须嵌套在 select 内才生效，单独使用被忽略；label 为必需属性，用于显示分组标题；不支持嵌套、css 精确样式及 option 的 disabled/selected 设置；空分组需服务端/前端校验避免残留。

optgroup 必须嵌套在 select 里面才能生效

单独写 <optgroup></optgroup> 标签不会渲染出任何内容，浏览器会直接忽略它。它不是独立控件，只是 <select></select> 的语义化分组容器。

常见错误是把 <optgroup></optgroup> 和 <select></select> 并列写，或者漏掉 label 属性——没有 label，分组标题就不会显示。

• 必须用 <select><optgroup label="分组名"><option>...</option></optgroup></select> 这种结构
• label 是必需属性，值会作为灰色标题显示在下拉列表顶部
• 不能把 <option></option> 放在 <optgroup></optgroup> 外面又期望它属于该分组

optgroup 里的 option 无法设置 disabled 或 selected

<optgroup></optgroup> 本身支持 disabled 属性（整组禁用），但它的子 <option></option> 不能单独设 selected —— 浏览器会忽略；如果想默认选中某个选项，selected 必须写在 <option></option> 上，且该 <option></option> 必须在 <select></select> 内层级有效（即不在被禁用的 <optgroup></optgroup> 中）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 整组禁用：<optgroup label="旧版本" disabled><option value="v1">1.0</option></optgroup>
• 单个选项禁用：直接给 <option disabled></option>，和 <optgroup></optgroup> 无关
• selected 只对 <option></option> 有效，且不能出现在 disabled 的 <optgroup></optgroup> 里，否则无效

optgroup 不支持嵌套，也不支持 CSS 精确样式控制

HTML 规范明确禁止 <optgroup></optgroup> 嵌套（即不能在 <optgroup></optgroup> 里再放一个 <optgroup></optgroup>）。同时，浏览器对它的样式支持非常有限：label 文字颜色、字体大小等可通过 optgroup 选择器调整，但无法改变缩进、添加图标或修改背景高亮行为。

• 以下写法非法：<optgroup label="A"><optgroup label="A-1"><option>...</option></optgroup></optgroup>
• optgroup 在 Chrome/Firefox/Safari 中的默认样式不一致，比如 Safari 不支持 background-color 设置
• 如需更灵活分组（带图标、可折叠），得用 JS 自建下拉组件，原生 <optgroup></optgroup> 只适合简单语义分隔

服务端生成 optgroup 时注意空分组问题

后端模板（如 Django/Jinja/Thymeleaf）动态生成 <optgroup></optgroup> 时，容易出现“有 label 但没 <option></option>”的情况——这会导致空分组标题残留，视觉难看，且部分屏幕阅读器会误读。

• 务必在渲染前判断分组内是否有有效选项，没有就跳过整个 <optgroup></optgroup> 块
• 避免硬编码 <optgroup label="用户类型"></optgroup> 这类无内容标签
• 前端 JS 动态增删选项时，也要同步检查并移除空 <optgroup></optgroup>，否则 DOM 里会留“幽灵标题”

实际项目里，<optgroup></optgroup> 的价值在于语义清晰和基础可访问性，别指望它解决交互或视觉定制问题。真正复杂的下拉逻辑，迟早得换方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！