能，但仅适合验证结构、流程和基础交互逻辑；靠<a>锚点+:target伪类+语义化标签实现多页导航与局部展开，无需JS，10分钟快速对齐信息架构。
用纯 HTML + CSS 写可交互线框图，真能当原型工具用？
能，但只适合验证结构、流程和基础交互逻辑，不适合模拟表单校验、状态切换或条件跳转。它不是替代 Axure 或 Figma 的方案，而是帮你绕过工具学习成本，在 10 分钟内把“这个页面该有什么区域、怎么跳转”说清楚。
关键在于：不写 JS、不依赖框架、不追求动效，只靠 <a> 锚点跳转 + :target 伪类 + 语义化标签就能模拟多页导航和局部展开。比如点击“用户列表”后，让 <section id="user-list"> 显示，其余隐藏——这就是最轻量的“交互”。
- 适用场景：内部快速对齐信息架构、给开发讲清页面拆分逻辑、学生练习语义 HTML 布局
- 不适用场景：需要微信扫码预览、要给客户演示带弹窗/拖拽/输入反馈的流程、需导出 PNG 或分享链接
- 常见错误：试图用
display: none控制所有状态却没配:target，导致点击无反应；或滥用iframe加载外部 HTML，破坏单页跳转体验
如何用 :target 实现页面级跳转与区块显隐
:target 是原生 CSS 伪类，匹配 URL 中 fragment（# 后面部分）对应的元素 ID。它不需要 JS，刷新不丢失状态，兼容所有现代浏览器，是纯 HTML 原型最可靠的交互支点。
例如，导航栏里一个链接：<a href="#dashboard">仪表盘</a>，点击后 URL 变为 index.html#dashboard，此时 section#dashboard 就自动匹配 :target，你可以这样控制显隐：
立即学习“前端免费学习笔记（深入）”；
section { display: none; }
section:target { display: block; }- 必须确保每个目标区块有唯一
id，且链接href与之严格一致（大小写敏感） - 若想默认显示首页，加一条
section:first-of-type { display: block; }，避免首屏空白 - 不要用
visibility: hidden替代display: none，否则未激活区块仍占文档流，影响布局判断
为什么不用 JS 就能做“按钮点击弹窗”？
用 <details> + <summary> 标签组合，原生支持展开/收起，无需任何 JS，语义清晰，屏幕阅读器友好，且样式完全可控。
示例：
<details> <summary>点击查看操作说明</summary> <p>这里放弹窗内容，比如表单字段规则或错误提示样例。</p> </details>
-
<details open>可设默认展开，适合“首次进入即显示提示”的场景 - CSS 中可用
details[open] summary::after自定义箭头图标，不影响语义 - 别用
div+ JS 模拟，那已脱离“纯 HTML 原型”范畴，也增加维护负担 - 注意 Safari 旧版本对
<details>的transition支持有限，如需平滑动画，得回退到 JS 方案
导出和协作时最容易被忽略的三件事
你写完一个 index.html，发给同事看，对方打不开、样式错乱、跳转失效——大概率栽在这三点上。
- 路径问题：
css/style.css这种相对路径在双击本地打开时会失败，浏览器地址是file:///.../index.html，不走 HTTP 协议，跨目录引用常 404。解决办法：把 CSS 写进<style>标签内，或用 VS Code Live Server 插件启动本地服务 - 编码声明缺失：HTML 文件开头没写
<meta charset="utf-8">，中文注释或占位符变乱码，尤其用记事本保存后默认 ANSI 编码 - 缺少 viewport：移动端预览时页面缩成一团，加一行
<meta name="viewport" content="width=device-width, initial-scale=1">，否则线框图在手机上看毫无意义
真正难的不是画出按钮和导航栏，而是让别人在任意设备、任意打开方式下，看到的结构和你本地调试时一致——这恰恰是纯 HTML 原型最硬核的落地门槛。
