用于在中对逻辑分组，需设label属性作标题，仅含子元素，不可嵌套，提升可访问性与可读性。

标签用于在 HTML 的 下拉菜单中对 进行逻辑分组，实现视觉和语义上的层级分类。它本身不可被选中，仅作为标题容器，提升可读性与可访问性。

基本用法：用 label 属性定义分组名称

每个 必须包含 label 属性，其值会显示为灰色、缩进的分组标题：

• label 文本不能包含 HTML 标签，会被当作纯文本渲染
• 浏览器默认将 label 显示为加粗浅灰文字，并使内部 缩进
• 同一 中可有多个 ，彼此并列，不可嵌套

结构规范：必须包裹在 内，且只含

是半透明容器，只能直接放在 中，且子元素仅允许是 （不能放 或其他标签）：

• 错误写法：...（不支持嵌套）
• 错误写法：
  xxx
  （只接受 ）
• 正确顺序：苹果

可访问性与用户体验要点

屏幕阅读器会读出 label 名称（如“水果，组合”），帮助视障用户理解选项结构：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 避免 label 使用模糊词，如“类别1”“其他”，应具体明确（如“国产车型”“进口车型”）
• 若某组无有效选项，建议隐藏整个 ，而非留空——空分组会干扰导航
• 部分浏览器（如 Safari）对 的样式支持有限，自定义 CSS 需谨慎测试

简单示例：带分类的课程选择下拉框

以下代码展示一个清晰分类的下拉菜单：

  
    Python
    JavaScript
  
  
    html">HTML/CSS
    Vue.js
  

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