一个网页从文档结构到最终呈现，需要 HTML、CSS 和 JavaScript 配合；当界面和状态逐渐复杂，Vue 3 的组件与响应式机制可以帮助组织代码。
这份学习手册沿着 结构 → 样式 → 行为 → 组件与状态 → 工程实践 展开。概念旁边提供代码和实际运行效果，可以直接修改、操作，并通过日志观察变化。
打开前端互动学习手册 ↗（新窗口；支持下载单文件 HTML，离线使用）
阅读路径
| 阶段 | 核心问题 | 实践方式 |
|---|---|---|
| HTML | head、body、div、button 各负责什么？ | 修改标签页标题和正文标题，点击效果定位源码 |
| CSS | 元素怎样排列、留出间距、适配窄屏？ | 把三列商品改为两列，调整 gap |
| JavaScript | 点击后谁修改数据，谁更新画面？ | 修改计数步长，从日志观察事件、状态、DOM |
| Vue 3 | 为什么改变状态就能更新界面？ | 编辑真实 SFC，观察 ref、computed 和模板 |
| 工程与实战 | 怎样把文件和知识组织成完整功能？ | 阅读项目目录，完成商品选择、合计与输入校验 |
跨平台概念对照
手册以 Web 知识为主线，使用 Windows、Android 和 iOS 的例子帮助理解共同概念。例如，HTML button 与各端的按钮控件承担相近的交互职责；p、span 可以与 TextBlock、TextView、UILabel 或 SwiftUI Text 的文本呈现用途对照。
这些对应关系是理解用途的线索。HTML 元素、原生控件和声明式 UI 并不是同一套对象模型，布局算法、事件分发和生命周期也不一一对应。对照部分分别说明 WPF / WinForms、Android Views / Compose，以及 UIKit / SwiftUI。
Vue 项目从哪读起
顺着应用启动与渲染过程阅读，更容易理解每份文件的职责：
index.html：文档、资源声明与挂载容器 ↓ 加载入口脚本src/main.js：创建 Vue 应用，导入根组件 ↓ mount('#app')src/App.vue：组合页面结构 ↓ 使用子组件src/components/CounterPanel.vue：状态、事件、模板与样式 ↓ Vue 渲染浏览器 DOM：用户看到并操作的界面手册还说明 package.json、锁文件、node_modules、public、assets、vite.config.js 和 dist 的作用，并提供相互配合的完整文件示例。
交互与阅读方式
使用顶部的 逐章阅读 可聚焦当前章节，也可以随时切回全文查阅。编辑区与预览区并排显示，代码区会随较长的预览内容增高；手机上则按上下顺序排列。
五个实验支持运行、自动运行、重置、复制、窄屏预览和元素定位。每次先预测改动结果，再运行验证；遇到错误，可以结合日志和源码位置逐步排查。进一步阅读 TypeScript、接口、组件通信、Router、Pinia、调试与构建章节，可把单页练习扩展为完整项目。