标签必须嵌套在 内作为其第一个子元素才有效，单独使用会被浏览器忽略； 控制展开/收起行为， 仅渲染带箭头的标题行，支持原生无 js 切换与基础语义化。
Summary 标签本身不提供折叠功能，必须配合 Details 标签使用
单独写 <summary></summary> 是无效的，浏览器会忽略它。它只是 <details></details> 的可选子元素，用来定义折叠区域的标题行。真正控制展开/收起行为的是 <details></details> 元素本身 —— 它原生支持零 JS 的布尔切换，<summary></summary> 只负责渲染那个带小箭头的交互入口。
常见错误是把 <summary></summary> 当成独立组件用，比如塞进 <div> 里，结果点击没反应、控制台也没报错，只是完全没效果。<ul>
<li>
<code><details></details> 默认处于折叠状态（open 属性未设置）
<summary></summary> 区域会自动切换 open 属性值，触发浏览器原生动画（无 CSS 时是硬切，加 transition 可软化）<summary></summary> 必须是 <details></details> 的第一个子元素，否则语义失效，部分屏幕阅读器可能无法识别如何让 Details + Summary 支持自定义样式和过渡动画
原生 <details></details> 展开时内容是突然出现的，没有淡入或高度过渡。要加动画，得靠 CSS 配合 details[open] 伪类和 max-height 技巧 —— 因为 height: auto 无法 transition。
关键点在于：不能直接对 <details></details> 或 <summary></summary> 做 height 过渡，而是对内部容器（比如 <div>）设 <code>max-height，并利用 [open] 状态切换数值。
- 给
<details></details>内部内容包一层<div class="details-content"> <li>初始状态设 <code>.details-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } - 展开时用
details[open] .details-content { max-height: 300px; }（值需略大于内容实际高度） - 箭头图标可用
summary::marker覆盖，或用summary::before+transform: rotate()模拟旋转效果 - 不要用
<details></details>替代<accordion></accordion>组件做多选一逻辑（原生允许多个同时展开） - 避免在
<details></details>内放表单控件后又依赖 JS 提交，因为折叠状态不影响表单字段是否参与提交 - 移动端 Safari 对
summary::marker支持有限，建议统一用自定义图标 + JS 检测降级
兼容性与语义注意事项
<details></details> 在 Chrome 12+、Firefox 49+、Safari 6+、Edge 79+ 中原生支持，IE 全系不支持。如果必须兼容 IE，得回退到 JS 方案，但现代项目中通常可安全使用。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
语义上，<details></details> 表示“用户可选查看的补充信息”，不是导航菜单或 Tab 面板。滥用会导致屏幕阅读器播报混乱，比如在文档大纲中错误地嵌套层级。
一个最小可用示例
下面代码可直接复制进 HTML 文件运行，无 JS，带基础过渡：
<details><summary>点击展开说明</summary><div class="details-content">
这里是折叠的内容。支持段落、列表、甚至内嵌 <code><pre></code>。
</div>
</details><p><style>
.details-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
details[open] .details-content {
max-height: 200px; /<em> 根据内容调整 /
}
summary {
list-style: none;
padding: 8px 12px;
background: #f5f5f5;
cursor: pointer;
}
summary::marker { content: "▶ "; }
details[open] summary::marker { content: "▼ "; }
</style></p>
注意 max-height 值不是固定写死的 —— 如果内容高度超过设定值，会出现滚动条或截断；太小则动画卡顿。实际项目中建议用 JS 动态计算（但那就违背“零 JS”前提了），所以更稳妥的做法是预估最大高度，留出余量。
