纯 html + css 可做可用原型，关键在于善用 :target 伪类实现跳转显隐、 做折叠面板，并注意本地运行需 http 服务而非 file:// 协议。
纯 HTML + CSS 就能做可用原型，关键不是“能不能”，而是“怎么避免掉进假交互陷阱”。
用 :target 实现页面跳转和区块显隐
这是最轻量、最可靠、不依赖 JS 的交互支点。URL 中的 fragment（# 后面部分）自动匹配对应 id 的元素，:target 伪类就能控制它的样式。
- 必须确保每个目标区块有唯一
id，且导航链接的href与之严格一致（大小写敏感） - 默认不显示任何内容？加一条
section:first-of-type { display: block; }避免首屏空白 - 别用
visibility: hidden替代display: none，否则未激活区块仍占文档流，干扰布局判断 - 常见错误：写了
display: none却没配section:target规则，点击后毫无反应
用 <details></details> + <summary></summary> 做折叠面板
原生支持展开/收起，无需 JS，语义清晰，屏幕阅读器友好，样式完全可控。
-
<details open></details>可设默认展开，适合“首次进入即显示提示”的场景 - CSS 中可用
details[open] summary::after自定义箭头图标，不影响语义 - 别用
div+ JS 模拟，那已脱离“纯 HTML 原型”范畴，也失去可访问性保障
在线工具选 CodePen 还是 JSFiddle？看协作需求
CodePen 更适合带外部库（如 Bootstrap、Vue CDN）的演示；JSFiddle 更轻量，加载快，适合快速验证结构或锚点跳转逻辑是否生效。
- CodePen 的实时预览对
:target行为支持稳定，但需注意其预览 iframe 的 URL 不会同步到浏览器地址栏——调试跳转时建议右键“在新标签页中打开结果” - JSFiddle 点击
Run后结果区 URL 是真实 fragment 地址，刷新后状态保留，更适合测试多页流程 - 菜鸟工具、W3Schools Tryit Editor 不支持 fragment 导航调试，仅适合单页静态结构验证
导出后为什么本地双击打不开交互？
因为部分在线工具（如 CodePen）的预览环境运行在 iframe 或沙箱中，而本地文件协议 file:// 下，:target 和 <details></details> 虽然语法合法，但某些浏览器（尤其是旧版 Safari 或 IE）对 fragment 解析行为不一致。
- 解决办法：用
python -m http.server或 VS Code 的 Live Server 插件起一个本地 HTTP 服务再打开 - 如果必须用双击方式交付，优先用
<details></details>（兼容性更好），并避免依赖 URL fragment 的复杂跳转链 - 真正容易被忽略的是：原型里写的
href="#dashboard"在导出 HTML 后，必须确保目标<section id="dashboard"></section>真的存在且未被 JS 动态移除——静态 HTML 里这点最容易漏查
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
