一份把前端基础落到整站实践的资料

这套资料挂在后端开发的分类下，实际讲的是前端基础：从静态页面排版到整站交互、数据请求，再到电商站的模块化布局。内容本身没有花哨的项目包装，都是围绕 HTML、CSS、JavaScript 这三样基本功展开，与其说是视频教程，不如说是一套「案例 + 总结」性质的实战笔记。它的价值在于，把你学过的零散标签、选择器、盒子模型、浮动定位、DOM 操作，串成一条能真正写完一个网站的流程。

先说明一点，这里不涉及后端框架、数据库或服务端语言，分类标注有偏差。如果你想找的是 Java、Python 或 Node.js 后端内容，会失望。但如果你是前端新手，或者学过基础语法但没独立做过整站、不知道知识点怎么组合使用，这套资料正好补上这段空白。它的切入点很直接：每个知识点都放在页面里讲，每个案例都对应一个完整可写出来的页面，不堆概念。

建议先看哪几块

资料里的内容大致可以分成五类，建议按下面顺序走，不要跳着看：

• 基础排版部分：HTML 标签语义、CSS 选择器、盒模型、浮动与定位。这部分看 2014 年那套基础实战即可，重点不是记标签，而是看一个页面从空白到成型的排版步骤，注意父元素和子元素之间的宽度传递、清除浮动的方式、margin 塌陷的处理，这些细节直接影响后面布局的稳定性。
• JavaScript 与 DOM 交互：对应原创 JS 视频教程和整站实战里的交互部分。重点看事件绑定、DOM 增删改查、定时器、动画封装。这里建议动手敲而不是只看，因为 JS 的难点从来不是语法，而是「触发—操作—反馈」这条链路怎么组织。
• Ajax 和 JSON 数据交互：这是从静态页面走向动态数据的关键一环。看请求的发送方式、响应的解析、渲染数据到页面的模板拼接逻辑。不需要追求深入原理，能看懂请求、拿到数据、把数据插进页面就算达标。
• 整站实战：XHTML 版和 HTML+CSS+JS 版两套实战内容相近，选一套为主即可，另一套拿来对照。重点看导航、焦点图、列表页、详情页这些通用模块是怎么拆出来的，样式类名怎么命名，公共头尾怎么做。建议第一遍看整体结构，第二遍跟着重写其中一套，时间充裕的话再做一套不同主题的类似站点来