在 HTML 页面设计中，常常会有需求让某些选项在页面加载时就处于预先选中状态，这不仅能提升用户体验，还能引导用户按照特定流程进行操作。下面我们就来详细探讨如何实现这一功能。

对于单选按钮（radio button），要使其在页面加载时预先选中，只需在相应的 input 标签中添加 “checked” 属性即可。例如：

<input type="radio" id="option1" name="group1" value="value1" checked>选项 1
<input type="radio" id="option2" name="group1" value="value2">选项 2

在上述代码中，“checked” 属性让 “选项 1” 在页面加载完成后就处于选中状态。同一组单选按钮具有相同的 “name” 属性值，这样用户只能在这组选项中选择一个。

复选框（checkbox）的预先选中设置方法与单选按钮类似。同样是在 input 标签里添加 “checked” 属性：

<input type="checkbox" id="option3" value="value3" checked>选项 3
<input type="checkbox" id="option4" value="value4">选项 4

如此一来，“选项 3” 在页面加载时就会被自动选中，用户可以根据需求继续勾选或取消勾选其他复选框选项。

而对于下拉菜单（select），要让某个选项预先显示为选中状态，可在 option 标签中添加 “selected” 属性：

<select id="mySelect">
  <option value="value5">选项 5</option>
  <option value="value6" selected>选项 6</option>
  <option value="value7">选项 7</option>
</select>

在这段代码里，“选项 6” 由于添加了 “selected” 属性，在页面加载时会成为下拉菜单中默认选中的选项。

通过这些简单的设置方法，就能轻松实现 HTML 中不同类型选项在页面加载时的预先选中功能。无论是引导用户快速进入特定设置，还是展示默认推荐选项，这一技巧都能发挥重要作用。在实际项目开发中，合理运用这些方法，能够优化用户交互流程，提高页面的易用性和专业性，让用户在打开页面时就能快速定位到关键信息和操作选项，提升用户对整个网站或应用的好感度。