Html和CSS基础教程（20集）

这门课解决什么问题

“会写 HTML 标签，但一碰到真实页面就布局乱、样式崩”是很多初学者的典型状态。这门 20 集的 HTML 和 CSS 基础教程，目标不是带你过一遍 MDN 文档，而是把「从零写一个静态页面」所需的最小知识集讲清楚。它覆盖的是前端最底层的两块：HTML 负责内容结构和语义，CSS 负责视觉表现和排版。看完之后，你应该能理解为什么某些标签自带默认样式，为什么 inline 元素设置宽高无效，为什么浮动和定位经常打架，也能解释清楚 margin 合并与 BFC 这种面试和日常开发都躲不开的经典问题。

课程主题集中在静态页面开发，不涉及 JavaScript、框架或构建工具，所以本质上是一次对 Web 基础的彻底清扫。如果你之前是照着视频一行一行敲却不懂背后的规则，这门课能帮你在脑内建立一套完整的 CSS 盒模型和文档流观念。这里强调“工程视角”：代码不是跑起来就行，而是要考虑结构是否合理、样式能否复用、后期好不好修改——这些习惯越早养成越省力。

适合什么基础，以及建议先看哪几块

这门课面向零基础或基础不牢固的初学者。所谓零基础，是指不要求你会写代码，但最好用过浏览器、知道网页是什么。如果已经写过一些静态页面但总是「能看不能细看」，即刷新后或者换个显示器就乱套，那这门课同样适合你用来查漏补缺。

建议学习顺序不要跳：先看 HTML 核心标签部分，尤其是 div、span、ul、a、img、form 这组高频标签的使用场景和语义区别。紧接着是 CSS 的盒模型与选择器优先级，这是后续一切样式控制的地基，理解了之后再去啃浮动、定位和常见的水平垂直居中手段。最后一部分建议看响应式与布局实战，它能告诉你怎样让页面在不同宽度下不散架。如果你时间紧，至少要保证盒模型、浮动和定位这三块完整看完，因为后面所有实战案例都在反复使用这些规则。每集的代码块建议手动敲一遍，不要复制粘贴，敲的过程中感受默认样式对布局的影响，比单纯看十遍都有效。

学完能独立做什么，以及资料怎么配合练习

完成这门课后，你应该能独立完成：一个包含导航栏、图文列表、卡片式布局和页脚的企业官网静态页；一个带表单校验基础样式（比如 focus 状态改变边框颜色）的注册页面；以及一个在移动端和桌面端都能保持可读性的个人博客首页。这不等同于能做完整的商业站点，但它为你后续接入 JavaScript 动态交互、学习 CSS 预处理器或直接上手 Vue/React 的样式方案打好了底子。更重要的是，你会逐渐形成「先搭结构、再写样式、最后调布局」的开发顺序，而不是想到哪写到哪。对于刚接触编程的人来说，这种把页面拆解成区块、再把区块拆解成标签的能力，才是真正值得带走的工具。

资料配套使用方面，建议采用「三遍法」。第一遍完整看视频，边看边暂停，在本地编辑器里跟着敲，不求快，务必保证每一行代码都理解后再继续。第二遍不看视频，凭记忆和讲义中的关键代码提示，重新把每个小案例自己实现一遍，卡住的地方做标记。第三遍是综合练习，挑两到三个已讲过的页面类型，混搭成一个完整的新页面，要求必须使用到浮动、定位和响应式三种技术。遇到样式失效时，优先打开浏览器开发者工具，检查元素上实际生效的样式与覆盖关系，这一步能帮你快速建立对 CSS 层叠机制的真实认知。不要只囤资料，输入和输出交替进行，这套课程的利用率才算达标。