details是html5语义化折叠容器，需搭配唯一summary子元素使用，仅允许嵌套流内容（如p、pre等），禁止放入doctype或html根结构；保存为.html文件时须用utf-8编码、正确转义代码字符，并避免嵌套交互组件。
不能把 HTML 源码“保存为 details 标签”——details 是一个语义化容器标签，不是文件格式或保存目标。你真正想做的，是把一段 HTML 源码（比如某段可折叠内容）写进 details 结构里，并确保它能正确保存为 .html 文件后正常运行。
为什么直接复制源码粘贴进 details 会失效？
常见错误是把整页 HTML（含 、<code>、）硬塞进 details 内部，导致嵌套非法、DOM 被浏览器自动修正甚至报错。
-
details只能包含合法的流内容（如p、pre、div、table等），不能包含根级文档结构 - 若你复制的是开发者工具中
document.body.outerHTML，里面可能含<script></script>或内联事件，这些在details里不会执行，且可能破坏结构 - 误将
<details><summary>...</summary><pre class="brush:php;toolbar:false;"><code>...</code></pre></details>中的<code>标签当成“代码块语法高亮”，其实它只是普通 HTML 标签，不带渲染逻辑
保存带 details 的 HTML 文件时，关键三步
目标是：保存后双击打开，点击 summary 就能展开/收起，且内容不乱码、不丢失。
- 用纯文本编辑器（如 VS Code、记事本）新建文件，手动写结构，不要从浏览器“查看源代码”里全选粘贴整页
-
details内容若含代码片段，用<pre class="brush:php;toolbar:false;"><code>...</code></pre>包裹，并对其中的、<code>>、&做 HTML 实体转义（例如<div>），否则浏览器会解析成标签而非显示文字 - 保存时务必选“所有文件”，扩展名设为
.html；Windows 记事本默认加.txt后缀，容易导致双击打不开或显示源码而非渲染页面
details 里放代码块的正确写法
很多人想实现“点击展开才看到这段 JS/HTML 源码”，但直接写 <pre class="brush:php;toolbar:false;"><code><details>...</details></code></pre> 会导致内部 details 被双重解析——外层是内容，内层被浏览器当作真实交互组件，结构冲突。
- 真正安全的做法：只在外层用一次
details，内容用<pre class="brush:php;toolbar:false;"><code class="html"></code> 显示源码字符串（已转义）</pre> - 示例：
<details><summary>点击查看 HTML 片段</summary><pre class="brush:php;toolbar:false;"><code><p>这是 & 符号</p></code>
- 别试图在
details里再嵌套可交互的details—— 浏览器允许，但可访问性差，键盘焦点链断裂，屏幕阅读器可能跳过第二层
容易被忽略的保存细节
你写完 HTML 并保存后，可能发现折叠功能在本地双击打开时失灵，尤其在 Safari 或旧版 Edge 上。
- Safari 对
details[open]的初始状态有缓存行为：如果之前点开过，再刷新可能仍保持展开，这不是 bug，是浏览器策略；测试时需无痕窗口或清空 site data - 用
file://协议打开本地 HTML 时，部分浏览器禁用localStorage，所以依赖它保存折叠状态的 JS 逻辑会失效；如需持久化，得部署到本地服务器（如 VS Code Live Server） - 如果内容含中文或特殊符号，保存时编码必须选 UTF-8（无 BOM），否则
details渲染正常但文字乱码，且无法通过 meta 标签修复
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
