正确启用默认展开，open是布尔属性，仅存在即生效；须为首个子元素，js控制需操作element.open而非setattribute，ie全系列不支持。
details标签加open属性就能默认展开，但要注意它是布尔属性
直接在<details></details>标签里写open就生效，不需要赋值（比如open="true"或open=""都多余）。浏览器只认这个属性是否存在，存在即展开。
常见错误是写成open="open"或open="1"，这些虽然多数情况下也能展开，但不符合HTML规范，且可能在严格校验或某些解析场景下被忽略。
-
<details open><summary>标题</summary>内容</details>✅ 正确 -
<details open="">...</details>⚠️ 可用但冗余，空字符串不是必需的 -
<details open="false">...</details>❌ 不起作用，“false”字符串不否定布尔属性
用JavaScript动态控制open状态要改property，不是attribute
如果后续要用JS切换展开/收起，必须操作open property（即element.open = true/false），而不是用setAttribute('open', ...)。后者只影响HTML attribute，不会触发UI更新，且可能和property不同步。
例如：document.querySelector('details').open = false 会立刻收起；而el.setAttribute('open', '')只是加了个空attribute，UI不变。
- 读状态用
el.open（返回布尔值） - 设状态用
el.open = true或el.open = false - 监听变化用
toggle事件：el.addEventListener('toggle', () => {...})
不支持open属性的老浏览器（如IE）会直接忽略details标签
IE全系列都不支持<details></details>，包括open属性。如果需要兼容，不能只靠HTML fallback——<details></details>在IE里会被当作未知元素，其子内容（包括<summary></summary>）可能全部显示或错乱。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
现代项目若需兼容，建议用CSS+JS模拟，或用@supports (display: details)做特性检测后加载polyfill。
- 检查支持：
typeof HTMLDetailsElement !== 'undefined' - 注意：Safari 6+、Chrome 12+、Firefox 49+ 支持
open，Edge 79+（Chromium版）也支持
summary标签位置和交互细节影响open行为
<summary></summary>必须是<details></details>的第一个子元素，否则open属性虽生效，点击summary无法切换状态，甚至可能报错或无响应。
另外，<summary></summary>内如果包含<button></button>或<input>等可聚焦元素，会干扰默认toggle行为——点击那些元素时，toggle事件可能不触发。
- 正确结构：
<details open><summary>点我</summary><p>正文</p></details> - 避免在
<summary></summary>里放tabindex或role="button"等干扰默认语义的写法 - 自定义样式时，别给
<summary></summary>设pointer-events: none，否则点不动
open当普通属性去赋值，或者没注意<summary></summary>的位置和内部结构。这些地方一错，表面看着有open，点一下却没反应。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
