能，但仅适合验证结构、流程和基础交互逻辑；靠锚点+:target伪类+语义化标签实现多页导航与局部展开，无需js，10分钟快速对齐信息架构。
用纯 HTML + CSS 写可交互线框图，真能当原型工具用？
能，但只适合验证结构、流程和基础交互逻辑，不适合模拟表单校验、状态切换或条件跳转。它不是替代 Axure 或 Figma 的方案，而是帮你绕过工具学习成本，在 10 分钟内把“这个页面该有什么区域、怎么跳转”说清楚。
关键在于：不写 JS、不依赖框架、不追求动效，只靠 @#@#@#@#@#@#@#@#@#@0，点击后 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></details> + <summary></summary> 标签组合，原生支持展开/收起，无需任何 JS，语义清晰，屏幕阅读器友好，且样式完全可控。
示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<details><summary>点击查看操作说明</summary><p>这里放弹窗内容，比如表单字段规则或错误提示样例。</p> </details>
-
<details open></details>可设默认展开，适合“首次进入即显示提示”的场景 - CSS 中可用
details[open] summary::after自定义箭头图标，不影响语义 - 别用
div+ JS 模拟，那已脱离“纯 HTML 原型”范畴，也增加维护负担 - 注意 Safari 旧版本对
<details></details>的transition支持有限，如需平滑动画，得回退到 JS 方案
导出和协作时最容易被忽略的三件事
你写完一个 index.html，发给同事看，对方打不开、样式错乱、跳转失效——大概率栽在这三点上。
- 路径问题：
css/style.css这种相对路径在双击本地打开时会失败，浏览器地址是file:///.../index.html，不走 HTTP 协议，跨目录引用常 404。解决办法：把 CSS 写进<style></style>标签内，或用 VS Code Live Server 插件启动本地服务 - 编码声明缺失：HTML 文件开头没写
<meta charset="utf-8">，中文注释或占位符变乱码，尤其用记事本保存后默认 ANSI 编码 - 缺少 viewport：移动端预览时页面缩成一团，加一行
<meta name="viewport" content="width=device-width, initial-scale=1">，否则线框图在手机上看毫无意义
真正难的不是画出按钮和导航栏，而是让别人在任意设备、任意打开方式下，看到的结构和你本地调试时一致——这恰恰是纯 HTML 原型最硬核的落地门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
