details标签必须严格遵循结构规范：summary须为第一个直接子元素，否则浏览器静默降级；CSS自定义箭头需用::marker并清除list-style；JS应仅操作open属性并监听toggle事件，避免display/height干预。
details 标签必须严格满足结构规范，否则点击无效
浏览器对 details 的解析非常严格：summary 必须是 details 的第一个直接子元素，中间不能插入任何其他标签（包括 div、span 或注释）。一旦结构不合法，浏览器会静默降级——箭头消失、点击无响应、open 属性失效，但控制台不会报错。
常见错误写法：<details><div><summary>标题</summary></div><p>内容</p></details>
正确写法只有这一种：<details><summary>标题</summary><p>内容</p></details>
-
summary内部可放文字、img、svg，但不要设display: flex或display: grid，否则原生箭头可能错位或消失 - 如需包裹样式，只能套在
details外层，或仅作用于summary内部元素 - 不要给
summary套button—— 它本身已是语义化可交互元素，嵌套会破坏键盘操作与屏幕阅读器支持
自定义箭头要用 ::marker，别用 background-image
所有现代浏览器默认在 summary 前渲染小三角，但它不是普通伪元素，无法用 background 或 content 直接覆盖。必须先清除原生标记，再用 ::marker 重绘。
立即学习“前端免费学习笔记（深入）”；
关键 CSS：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
summary {
list-style: none;
}
summary::marker {
content: "▶";
vertical-align: middle;
}
details[open] summary::marker {
content: "▼";
}
::marker 在 Chrome/Firefox 中垂直对齐不一致，加 vertical-align: middle 可统一基线；旧版 Safari 不支持 ::marker，需回退到 summary::before + transform: rotate()。
- 避免用
summary::before同时设置content和list-style: none—— 某些版本 Safari 会双显图标 - 不要给
summary设padding-left来“腾位置”，应靠::marker自身的 margin 控制间距
JS 控制 open 属性就够了，别碰 display 或 height
需要程序化控制时（比如页面加载后根据 URL 参数展开某一项），直接读写 open 属性即可。这是标准 DOM API，兼容性好、语义清晰、且能触发 toggle 事件。
展开：el.open = true；收起：el.open = false；判断状态：if (el.open) { ... }
- 绝对不要用
el.style.display = 'none'或el.style.height = '0'—— 这会绕过原生行为，导致键盘操作失效、toggle事件不触发 - 监听状态变化必须用
toggle事件，不是click：el.addEventListener('toggle', () => { ... }) - 在
toggle回调里再赋值el.open = true/false会导致无限循环，禁止这么做
动画效果不能靠 max-height 过渡，得用 JS 测高或 opacity/visibility
details 默认没有 CSS 过渡能力。想加滑动动画，不能简单设 max-height: 0 → 500px —— 内容高度不确定时，要么截断，要么设过大值导致动画卡顿；设为 max-height: 0 → none 又无法过渡。
真正可用的方案只有两个：
- 用
opacity+visibility做淡入淡出（轻量、稳定，但无滑动感） - 用 JS 在展开前读取
scrollHeight，动态设max-height，收起后再重置为0（有滑动，但需额外代码和事件时机处理）
原生 details 的价值在于零 JS、可访问、语义正确。如果动画是硬需求，说明场景已超出它设计初衷，该考虑用 div + aria-expanded 的手写方案。
