# Web 界面工程 — 系统学习系列 | Yishto

原文: https://yishto.com/learn/web-interface/

作者: [Yishto](https://yishto.com/about/)

从浏览器和语言基础到页面交互，兼顾可访问性、国际化与性能。

构建能读、能用、能维护的界面。

## Web 界面工程

- [从页面结构到可操作的界面](https://yishto.com/learn/web-interface/html-layout-accessibility/index.md): 以资料目录页连接 HTML 语义、CSS 盒布局与键盘反馈，区分离线结构检查和真实浏览器可访问性验证。
- [JavaScript 为什么会先显示加载状态](https://yishto.com/learn/web-interface/javascript-runtime-and-async/index.md): 通过搜索请求解释同步执行、微任务与 await，并用请求身份处理加载终态和过期响应覆盖问题。
- [类型与组件怎样帮助维护界面](https://yishto.com/learn/web-interface/typescript-and-ui-frameworks/index.md): 把外部数据验证、联合状态和组件所有权连接起来，理解 TypeScript 与 React、Vue 各自能检查哪些问题。
- [页面、路由和状态应该放在哪里](https://yishto.com/learn/web-interface/state-routing-and-frontend-architecture/index.md): 按寿命划分 URL、局部和远程状态，再为阅读清单设计刷新路由、功能边界与可恢复的实时更新。
- [为产品准备图像、动画与交互素材](https://yishto.com/learn/web-interface/graphics-assets-and-motion/index.md): 按画面和操作选择位图、SVG 或 Canvas，结合像素预算、素材来源、减少运动与加载失败设计教学卡片。
- [多语言页面怎样兼顾 SEO 和加载体验](https://yishto.com/learn/web-interface/localization-and-web-performance/index.md): 为静态教程建立完整语言内容、独立 URL 与互指声明，并按 LCP、INP、CLS 分别验证加载体验。