optgroup的label属性必须写在开始标签内且非空，否则浏览器静默忽略整个分组；label仅支持纯文本，不解析html实体或换行，不可用css样式化，且必须为直接子元素。
optgroup 的 label 属性必须写在 <optgroup></optgroup> 开始标签里
label 不是 <select></select> 或 <option></option> 的属性，只属于 <optgroup></optgroup>。写错位置（比如塞进 <option></option>）会导致分组失效，浏览器直接忽略该 <optgroup></optgroup>。
正确写法是：
<select><br><optgroup label="前端"> <br><option value="html">HTML</option> <br><option value="css">CSS</option> <br> </optgroup> <br><optgroup label="后端"> <br><option value="python">Python</option> <br><option value="node">Node.js</option> <br> </optgroup> <br></select>
label 值不能是空字符串或纯空白
如果 label="" 或 label=" "（全角空格），多数浏览器会渲染出一个不可点击、无文字的分组标题，甚至整个 <optgroup></optgroup> 内容不显示。iOS Safari 尤其敏感。
- 允许：
label="数据库"、label="NoSQL" - 禁止：
label=""、label=" "、label=" " - 建议：用 trim 后非空的字符串，避免前后空格
optgroup 不能嵌套，也不能放在 option 外面
<optgroup></optgroup> 必须直接作为 <select></select> 的子元素，且所有 <option></option> 必须在某个 <optgroup></optgroup> 内，或全部在 <select></select> 直接子级（即不使用分组）。混用会导致渲染异常：
- ❌ 错误：先写几个
<option></option>，再写<optgroup></optgroup>—— 部分选项会丢失或归入第一个分组 - ❌ 错误：
<optgroup><optgroup><option>...</option></optgroup></optgroup>—— 浏览器忽略内层 - ✅ 正确：所有
<option></option>都包裹在<optgroup></optgroup>里，或都不包
label 不支持 HTML 标签，也不响应 CSS 的 content
label 是纯文本属性，写 label="<strong>重要</strong>" 会原样显示为文字“重要”，不会加粗。CSS 里的 ::before 或 content 也无法替换它。
如果真需要样式化分组标题（比如颜色、图标），只能靠 JS 动态插入 DOM 节点模拟，或者改用第三方下拉组件 —— 原生 <optgroup></optgroup> 的 label 就是静态、不可样式化的。
别指望用 CSS 改 label 文字颜色或字体大小；浏览器根本不暴露这个文本节点供样式控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
