HTML5 使用 select 和 option 标签创建语义化下拉列表，支持默认选中、占位提示、optgroup 分组、multiple 多选及 label 关联提升可访问性。
如果您希望在网页中创建一个下拉选择列表，HTML5 提供了原生、语义化且无需 JavaScript 即可工作的 select 与 option 标签组合。以下是实现该功能的多种基础方法及关键细节说明：
一、基础下拉列表结构
使用 select 元素作为容器，每个可选项由 option 子元素定义，浏览器自动渲染为下拉菜单。该结构兼容所有现代浏览器，且支持键盘导航与表单提交。
1、在 HTML 文件的 内插入 标签对。
2、在 select 标签内部逐个添加 。
立即学习“前端免费学习笔记（深入）”；
3、为首个 option 添加 selected 属性，使其成为默认选中项。
4、确保每个 option 的 value 属性为纯文本或合法字符串，不可为空格或未闭合引号。
二、带占位提示的禁用默认项
通过将首个 option 设为 disabled 且 selected，可实现“请选择…”类引导提示，该选项不可被再次选中，仅作视觉占位。
1、在 select 内第一个位置插入 。
2、后续所有 option 必须具有非空 value 值，例如 value="apple"。
3、检查浏览器开发者工具中该 option 的 disabled 属性是否被正确解析，若未生效则可能因缺少 closing tag 或属性拼写错误。
三、分组选项（optgroup）
当选项数量较多且存在逻辑分类时，可用 optgroup 对 option 进行语义化分组，提升可读性与辅助技术兼容性。
1、在 select 内插入 。
2、将属于该组的多个 option 标签置于 optgroup 开始与结束标签之间。
3、确保 optgroup 的 label 属性值为简明中文或英文，不可嵌套另一个 optgroup 或包含 option 以外的标签。
四、设置默认选中与多选模式
通过添加 multiple 属性可启用多选功能；配合 size 属性控制可见行数，改变交互形态。默认选中仍依赖 selected 属性。
1、为 select 标签添加 multiple 和 size="4" 属性（数字表示显示行数）。
2、在需要默认勾选的 option 上添加 selected 属性。
3、用户需按住 Ctrl（Windows）或 Command（macOS）点击多个选项，此时 value 值将以逗号分隔字符串形式提交，后端需按此格式解析。
五、关联标签提升可访问性
使用 label 元素显式绑定 select，可扩大点击热区并增强屏幕阅读器识别能力，符合 WCAG 2.1 标准。
1、在 select 外部包裹 。
2、为 select 设置对应 id="唯一ID"，确保二者 ID 完全一致。
3、避免使用隐式 label（即 label 包裹 select），显式 for/id 关联是唯一被所有主流辅助技术稳定支持的方式。
