optgroup 必须嵌套在 select 内，label 为纯文本不解析 html 实体，不可 disabled 或选中，样式需 css 覆盖，跨浏览器交互需 js 辅助。
optgroup 标签必须嵌套在 select 内部，不能单独使用
直接把 <optgroup></optgroup> 放在 <select></select> 外面会失效，浏览器会忽略或自动闭合。正确结构是：<select><optgroup label="国内"><option>北京</option></optgroup></select>。常见错误是复制粘贴时漏掉外层 <select></select>，导致下拉框显示为空或只有文字没交互。
label 属性值不支持 HTML 实体或换行，中文无问题但需避免特殊符号
label 是纯文本渲染，写成 label="国内 & 国外" 会显示为字面量“国内 & 国外”，不是“&”。如果 label 含引号（如 label="城市分类：'国内'"），必须用单引号包裹整个属性值，否则解析中断。推荐统一用双引号包裹属性、内部用中文直写：label="国内城市" 或 label="Overseas Cities"。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
optgroup 不可选、不可 disabled，但其中的 option 可以分别控制
<optgroup></optgroup> 本身不能被用户选中，也不响应 disabled 属性（加了也无效）。真正起作用的是里面的 <option></option>。比如想灰掉所有国外城市，得给每个 <option></option> 加 disabled，而不是给 <optgroup label="国外"></optgroup> 加——后者完全没效果。另外，<optgroup></optgroup> 的 label 文字默认斜体+缩进，这是浏览器 UA 样式，若要统一字体，需用 CSS 覆盖 optgroup { font-style: normal; } 。
不同浏览器对 optgroup 的样式支持不一致，hover 和 focus 行为需额外处理
Chrome 和 Edge 默认支持 optgroup:hover，但 Safari 不触发；:focus 也无法作用于 <optgroup></optgroup> 元素本身。如果想高亮整个分组（比如鼠标移到“国内”标题时，下面所有选项背景变浅灰），只能靠 JS 监听 mouseover 到 option，再向上找最近的 <optgroup></optgroup> 并临时加 class。简单方案是放弃分组级交互，只用 CSS 控制 option:hover 单项效果更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
