本章导读

在完成 HTML 语义骨架与 CSS 视觉渲染的系统构建后，学习者已具备开发单一 Web 视图模块的技术能力。然而，真实的商业级 Web 应用程序并非代码的随意堆砌，而是高度结构化的工程产物。

本章将引领学习者跨越“零散知识点”的局限，正式迈入现代前端“工程化”与“架构设计”的大门。我们将以 W3C 与业界通用的标准化物理文件目录树为起点，深度解析静态资产的分流与相对路径路由映射机制。借助大语言模型（AI）的强力赋能，学习者将从零主导构建一个包含完整拓扑结构与多页面的静态门户站点，完成从“代码编写者”向具备全局视野的“前端架构师”的初级工程思维跃迁。

【学习目标】

本章的学习目标旨在实现工程架构认知、多文件协同实操与前端职业规范的深度融合：

1. 知识目标

• 深刻理解现代前端工程开发中的标准化静态文件目录组织规律与底层资源分发机制。
• 掌握严谨的资产分类逻辑与高度语义化的项目物理文件命名规范原则。

2. 能力目标

• 能够脱离单文件混合开发的初级模式，结合 HTML 骨架知识，高效率实现主视觉页面的逻辑化构建与物理文件拆分。
• 能够熟练在多文件、多层级架构中利用 AI 辅助工具进行代码生成与模块化组装，跑通前端工程从零到一的交付全流程。

3. 素养目标

• 工程规范与团队协同：牢固树立“无规矩不成方圆”的代码资产管理意识，认同并恪守企业级文件规范基准，为未来的敏捷团队协作奠定工程基石。
• 全局架构与系统思维：突破局部的“切图”思维，培养从整体到局部、兼顾数字美感与底层拓扑结构的前端“大局观”架构意识。

【本章重难点】

• 教学重点：构建符合工业标准的前端静态文件目录树（如分离 css、js、images）；掌握跨级物理目录下的相对路径（Relative Path）寻址规则；利用 AI 生成包含四大核心语义区块（header、nav、main、footer）的门户页面结构。
• 教学难点：在多物理文件彻底分离的架构下，维持结构层（HTML）、表现层（CSS）与行为层（JS）之间路由映射的绝对正确性；在 AI 生成的庞大混合代码中，精准识别并剥离冗余逻辑，完成模块化的工程解耦。