邮箱已填，点「创建账户」发起这次浏览器端的操作。
界面与交互 · 网页基础
前端Frontend
用户打开网页后看见和直接操作的部分，通常由 HTML、CSS、JavaScript 三层合成：结构立内容、外观定样子、行为管反馈。
在浏览器里逐层开关，看三层各管什么
前端把同一张页面拆成三层：HTML 立结构、CSS 立外观、JavaScript 立行为。关掉任一层，物件上立刻能看到该层负责什么——这就是判断「一改动属于哪一层」的最短路径。
场景：一张「会员注册」页在浏览器里由三层合成。点掉任一层，看物件上发生什么；三层都开时填邮箱、点「创建账户」，看行为层怎样把创建中、成功、失败回到按钮与状态条上。
可提交：邮箱已填，点「创建账户」发起这次浏览器端的操作，看行为层如何把结果回到物件上。对照三层开关：原因写在物件上（状态条、按钮文案、舞台是否为空），下一步是补回缺的层、补齐邮箱或按重试。
拆三层时要盯这些
离开这页后，用下面几条检查任何「在浏览器里看见的东西」到底归哪一层，以及前端有没有把该做的做完。
- 先看内容，再分三层先问用户在屏幕上要完成什么（注册、下单、看列表），再拆成结构、外观、行为；不要先选框架再倒推。
- 结构负责「是什么」标题、字段、按钮的语义由 HTML 决定。关掉 HTML，浏览器没有可渲染的内容；语义错了，辅助技术和搜索引擎也读不准。
- 外观负责「长什么样」间距、配色、响应式排版由 CSS 决定。关掉 CSS，物件还在但塌成默认排版——这说明外观层不能偷偷塞进结构或行为里。
- 行为负责「能干什么」校验、提交、成功与失败反馈由 JS 决定。关掉 JS，按钮变哑；说明「点了有反应」不是结构或外观的功劳。
- 加载、空、失败都要成为物件上的状态前端要为可见状态负责：创建中、成功、失败都落在按钮或状态条上，而不是只 console.log 或假装成功。
同一「注册反馈」任务：正例与反例
目标都是让用户提交注册后知道结果。差别只在三层是否各司其职。
HTML 立邮箱字段和提交按钮的语义；CSS 排好间距与窄屏；JS 在邮箱为空时禁用按钮，提交后显示「创建中 → 成功 / 失败」，失败保留输入并给重试。
结果落在按钮与状态条上；失败可恢复。用 HTML 画了一个「看起来能点」的按钮却没接 JS，点下去毫无反应；或把数据库鉴权、密码比对塞进前端 JS，让浏览器承担服务端职责。
用户无法判断结果；安全与数据正确性交给浏览器是错的。什么时候前端能独自完成，什么时候不能
前端负责呈现和触发；账户是否真创建、数据是否落库，仍由服务端规则决定。
结构、外观、行为三层；加载、空、失败状态可见可读；把请求发出去并把结果回到物件上。
账户是否创建、库存是否够、权限是否允许——这些由服务端定。前端只展示结果，不要把密钥、鉴权或数据库判断写进浏览器。
快速自测
「会员注册页的提交按钮点下去毫无反应」，最可能缺哪一层，或踩了哪条边界？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。