如果你写过一点 Android，或者正在准备前端方向的面试，HTML 和 CSS 往往是最先被跳过、又最先被追问的部分。跳过是因为觉得"不就是几个标签"，被追问是因为一旦让你手写一个两栏布局、解释盒模型怎么算宽度、说清楚 margin 折叠为什么发生，很多人答不上来。这门课解决的就是这个缺口：它不教你做炫酷页面，而是让你能说清楚浏览器到底按什么规则把一堆文字变成你看到的版面。

先确认自己缺的是哪一块

HTML 和 CSS 的坑通常不在"知不知道"，而在"说不清"。可以先用几个问题自测：

行内元素和块级元素的实际区别是什么，为什么给 span 设宽高经常不生效？
一个盒子从内容到边框，宽度到底由哪几层组成，box-sizing 改变了什么？
选择器的权重怎么算，为什么加了 !important 反而更难维护？
浮动、定位、Flex 分别适合解决什么布局问题？

如果这几条里有两条以上答得含糊，说明你缺的不是"再多学几个标签"，而是对渲染规则的系统理解。这门课按 HTML 结构与 CSS 样式两条线推进，先把标记语言怎么写讲清楚，再讲样式如何作用到这些标记上，顺序上比较符合"先有内容、再谈显示"的实际开发过程。

这门课真正要你练会的东西

课程定位是基础，但基础不等于浅。它要你达到的状态是：拿到一张简单的页面设计稿，能自己拆出结构，用语义合理的标签写出来，再用 CSS 把它摆到正确位置，而不是靠一堆 div 加内联样式硬堆。

具体会覆盖的方向包括：HTML 文档的基本结构与常用内容标签、表单元素的使用、CSS 的引入方式与选择器体系、文本与盒子的样式控制、以及常见的页面布局手段。讲解会结合案例，也就是说不只是列语法，而是让你看到某段样式写下去之后，页面上对应发生了什么变化。这一点对自学的人来说很关键——很多人卡住不是因为不会写，而是不知道写完为什么没效果。

配套练习该怎么做才不白做

光看讲解很容易产生"我懂了"的错觉。建议按下面的方式配合练习：

每学完一类标签或一组样式属性，关掉教程自己默写一遍最小示例，再对照检查。
不要只抄案例代码，抄完改动其中一两个值，观察页面变化，验证自己对规则的理解是否准确。
每章结束后尝试脱离教程复现一个简单页面结构，比如一个带标题、列表和表单的区域。
遇到样式不生效时，先自己用浏览器开发者工具排查，再回去看讲解，比直接看答案收获大得多。

课程提供了课后练习和学习资源，但练习的价值取决于你是否真的动手写、动手改、动手查。只看不写，学完还是不会布局。

看完应该能回答的问题

用这些问题检验学习效果，比看"学习收获"列表实在得多：

给你一段 HTML，你能说出它的文档结构是否规范、标签选择是否合理吗？
两个选择器冲突时，你能判断最终哪条样式生效吗？
一个元素的实际占位尺寸，你能一步步算出来吗？
要实现一个横向排列、间距均匀的导航，你会选哪种布局方式，为什么？
页面在某处显示错位时，你知道从哪个方向开始排查吗？

能流畅回答这些，说明你已经从"会写标签"走到"能控制页面显示"。这也是这门课标题里"掌控"两个字的实际含义——不是记住更多属性，而是知道每条规则在什么情况下起作用、为什么起作用。对准备转前端的人，这是绕不过去的底座；对做 Android 想了解 Web 的人，这是理解另一套布局逻辑的起点；对已经半路做过页面的人，这是把零散经验补成体系的机会。缺哪块补哪块，别假装自己都会。