HTML 中 <select> 默认选中靠 <option> 的 selected 布尔属性，写即生效；React/Vue 中应由 value/v-model 控制，手动写 selected 会被忽略。
HTML 中 <select> 默认选中靠 selected 属性，不是靠 JS 赋值
直接在 HTML 的某个 <option> 标签里写 selected，浏览器就会把它当默认选项。这个属性是布尔属性，写上就生效，不需要 selected="true" 或 selected="selected" —— 后两者虽然也能用，但冗余且不符合规范。
常见错误是：只写 <select> 标签，然后靠 JS 动态设置 selectedIndex 或 value，结果页面首次加载时闪一下才选中，或者 SSR/SEO 场景下根本没默认值。
-
selected必须写在<option>元素上，不能写在<select>上 - 多个
<option>都加selected时，浏览器只认第一个（行为未定义，别这么干） - 服务端渲染或静态 HTML 页面，必须靠这个属性保证首屏默认值可靠
React 中不要手动操作 selected 属性
React 的 <select> 是受控组件，它的选中状态由 value prop 决定。你写 selected 在 JSX 里会被 React 忽略，甚至报 warning：
<select value={this.state.selectedValue}>
<option value="a">A</option>
<option value="b" selected>B</option> {/* 这个 selected 会被忽略 */}
</select>正确做法是让 value 初始化为你要的默认值：
- 初始化 state：
selectedValue: 'b' - 或者用
useEffect+useState设置初始值（不推荐，多此一举） - 如果默认值来自 props，确保它在第一次 render 前就可用，否则会触发空值 fallback
Vue 中用 v-model 绑定，selected 属性无效
和 React 类似，Vue 的 <select> 受 v-model 控制。你在 <option> 上写 selected 不起作用，Vue 会根据 v-model 的绑定值自动匹配并高亮对应项。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
容易踩的坑：
- data 里
v-model绑定的变量初始值是undefined或空字符串，导致没默认选中 - 选项是异步加载的（比如从 API 拿），但
v-model已提前设了值，结果渲染时找不到匹配项，显示为空白 - 使用
<option value="">作占位提示时，要确保绑定值和它严格相等（包括类型），否则 Vue 不会选中它
动态设置默认值时，优先用 value 匹配而非 index
JS 操作 <select> 时，改 selectedIndex 看似简单，但极易出错：选项顺序一变、增删一项，逻辑就崩了。更健壮的做法是按 value 设置：
const select = document.querySelector('select');
select.value = 'desired-value'; // 浏览器自动定位并选中对应 option注意点：
-
select.value = 'xxx'只在该value存在时生效；不存在则静默失败（select.value仍为原值） - 如果选项的
value是数字，但 JS 赋的是字符串（如'1'），多数浏览器能自动转换，但严格模式下建议保持类型一致 - 需要兼容 IE9+？没问题；IE8 及更早需回退到
selectedIndex，但现在基本不用考虑
默认选中的本质是“让某个 <option> 的 value 和 <select> 的当前 value 相等”，所有框架和原生 API 都围绕这个逻辑设计。绕开它硬塞 selected 属性，往往意味着你在对抗 DOM 机制本身。
