📊 运维部AI学练
12次课 · 2026-05-11 至 2026-06-05 · 👥 163人 · 📋 654人次
📖 第6次 · 纯静态网站原理与逻辑
2026-05-22
周五 · 42分42秒
周五 · 42分42秒
日期
45
参会人数
33.2min
人均时长
40
回头客 90.9%
4
新面孔
📊 参会时长
| 参与程度 | 人数 | 占比 | |
|---|---|---|---|
| ● 全程≥30min | 29人 | 65.9% | |
| ● 部分5-30min | 11人 | 25.0% | |
| ● 短暂≤5min | 1人 | 2.3% |
📋 课程大纲
一、静态网站三件套原理
- HTML = 骨架（div盒子、文本、结构）
- CSS = 化妆（颜色、布局、动画、样式）
- JS = 功能（交互、查询、切换、计算）
- 三件套如何协作：HTML搭结构→CSS美化→JS实现交互
二、代码拆分最佳实践
- 为什么不能所有代码写在一个HTML里
- 样式分离：CSS独立文件，一处改全局生效
- 脚本分离：JS独立文件，功能模块化
- 数据分离：CSV/JSON独立存储，不改代码只换数据
- 媒体分离：图片/视频独立目录
- CDN 加载公共库（如 Chart.js）
三、静态网站适用场景判断
- ✅ 适合：官网/知识库/数据看板/计算器/下载页/个人工具
- ✅ 适合：不需要登录、权限、实时同步的小应用
- ❌ 不适合：多人协同编辑/权限控制/高频写入/每人不同视图
- 企业官网=多个静态页通过超链接串联
- L1纯静态 → L2准静态（定时更新）→ L3全栈 → L4 AI嵌入 → L5自主
四、现场互动
- 前端问题排查：高阳提问：页面打开样式没加载 → CSS没引用上
- 高阳提问：白屏 → 前端服务没启动
- 高阳提问：按钮不生效 → JS兼容性问题
- 怎么跟AI精准描述前端问题：分HTML/CSS/JS三层定位
💡 核心知识点
📋 课后作业
• 知道HTML/CSS/JS的区别，就能精准告诉AI『哪里有问题』
• 代码分离是可持续维护的关键，不要图省事全写一个文件
• 静态页面成本极低（只需存储+带宽），适合机房级工具开发
• 好的前端 = 骨架清晰 + 妆容得体 + 功能精准
• CSS定颜值，JS定体验，HTML定内容
🆕 新面孔 · 4人
张子扬、李程军、贾贺、陈成
🖼️ 课代表总结🎬 课程回放
🔍 AI课堂观察
45人，系列最低（周五+纯理论）
高阳主动提问前端白屏排查
全程比例49%为系列最高（留下的都很认真）
邹庆博14秒、马骥飞16秒挂线即走
💬 AI诊断
周五下午+纯理论=天然debuff。正面看全程比例最高，来的人都是真想学的。