在 HTML5 中，可通过为 标签添加 selected 属性，使指定选项在页面加载时自动被选中，这是实现下拉菜单默认选中的标准且唯一可靠的方法。

在 html5 中，可通过为 `` 标签添加 `selected` 属性，使指定选项在页面加载时自动被选中，这是实现下拉菜单默认选中的标准且唯一可靠的方法。

要让下拉菜单（）中的某一项默认显示并被选中，不能使用 required（仅用于表单验证）或不存在的 default 属性——HTML 规范中并无 default 这一布尔属性。正确做法是：在目标 元素上显式设置 selected 属性（可简写为 selected，无需赋值）。

以下是一个完整、语义清晰的示例：

<label for="fruit-select">请选择水果：</label>
<select id="fruit-select" name="fruit"><option value="">-- 请选择 --</option>
<option value="apple">苹果</option>
<option value="banana" selected>香蕉</option>
<option value="orange">橙子</option></select>

✅ 关键要点：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• selected 属性应放在希望默认选中的 标签内；
• 同一 中最多只能有一个 selected（浏览器会自动忽略后续多个）；
• 若所有 均未设置 selected，则默认选中第一个（但行为不可靠，强烈建议显式声明）；
• selected 是布尔属性，写成 selected、selected="" 或 selected="selected" 效果相同，推荐简洁写法 selected；
• 配合 id 与 for 属性提升可访问性（如上例所示）。

⚠️ 注意事项：

• 不要混淆 required（提交前必须选择非空值）与 selected（控制初始状态），二者用途完全不同；
• 动态场景（如通过 JavaScript 初始化）中，也可用 selectElement.value = "banana" 或 optionElement.selected = true 实现，但静态 HTML 中首选原生 selected 属性；
• 若需“禁用默认提示项”（如 -- 请选择 --），可额外添加 disabled 和 hidden 属性防止用户选择它，同时保留其作为占位符的视觉效果。

掌握 selected 的正确用法，即可稳定、语义化地实现下拉菜单默认选项，符合 HTML5 标准且兼容所有现代浏览器。

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