在HTML5中，<details>标签默认折叠，添加open布尔属性可使其初始展开；可通过JS动态设置open属性或检查状态；CSS可用details[open]选择器区分状态；现代浏览器支持良好，IE不支持需polyfill。
在HTML5中，<details> 标签默认是折叠的。若想让页面加载时就处于展开状态，只需为其添加 open 属性即可——这是一个布尔属性，存在即生效，无需赋值。
基础用法：直接添加 open 属性
最简单的方式是在 <details> 标签中写入 open：
<details open> <summary>点击查看详情</summary> <p>这是初始化时就可见的内容。</p> </details>
浏览器会立即渲染为展开状态，用户无需点击即可看到 <summary> 后面的内容。
与 JavaScript 配合动态控制
如果需要根据条件（如 URL 参数、用户偏好或表单状态）决定是否展开，可结合 JS 操作 open 属性：
立即学习“前端免费学习笔记（深入）”；
- 设置展开：
element.open = true或element.setAttribute('open', '') - 收起：
element.open = false或element.removeAttribute('open') - 检查当前状态：
element.hasAttribute('open')或直接读取element.open（返回布尔值）
注意：直接修改 open 属性会立即触发 DOM 更新，无需手动刷新。
样式与可访问性注意事项
open 属性本身不影响样式，但可通过 CSS 区分展开/收起状态：
details[open] summary::after {
content: " ▲"; /* 展开时显示向上箭头 */
}
details summary::after {
content: " ▼"; /* 默认显示向下箭头 */
}同时确保 <summary> 文本清晰、有足够对比度，并支持键盘聚焦（Tab 可进入，Enter/Space 可切换），以满足无障碍要求。
兼容性提示
<details> 和 open 属性在现代浏览器中已广泛支持（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）。IE 完全不支持，如需兼容旧版 IE，应搭配 polyfill 或降级方案（如用 <div> + JS 模拟）。
