先把「写对标签」和「调对样式」两件事分开
很多人学完教程能跟着敲，但一关掉视频自己从零开始写就卡壳；另一类人更常见：标签会用几个，样式会改颜色字号，但页面稍一复杂就乱——块级元素漂到一块、图片下边多出几像素空隙、居中对齐怎么改都不对。这门 20 集的 HTML 和 CSS 基础教程，正好落在这些缺口上。它不贪多，不涉及 JavaScript 和框架，集中把「页面结构和表现」两件事讲透，目标是让你拿到一个设计稿，能独立把静态页面搭出来，并且知道问题出在 HTML 还是 CSS。适合零基础入门，也适合写过简单页面但没系统整理过基础规则的前端初学者。如果你已经会写响应式、能用 Flexbox 做完整页面，这门课对你帮助有限，不用勉强看。
重点看结构语义和盒模型，布局错往往出在这两处
20 集体量不算大，不建议从头到尾当背景音放一遍。先看 HTML 部分的文档结构——doctype、html、head、body 各自的职责，以及标题、段落、链接、图片、列表这些最常用标签的正确语义；能区分「强调用 strong」「换行用 br」不是随便挑一个。CSS 部分优先级最高的是选择器、层叠与优先级规则、盒模型、背景和文字样式，这四块决定了你今后的样式代码是「写一个调一个」还是「知道为什么是这样」。布局相关的内容往后放，先理解标准文档流和块级/行内元素的差异，再看浮动和定位。浮动是新手最容易栽跟头的地方，重点看它为什么会影响后续元素、怎么清除、以及为什么不能拿它当常规布局工具来用。资料怎么配合？视频配套的素材，做练习时不要看提示直接抄。正确的用法是：每看一集，记下这集解决的一个具体问题（比如「图片底部有 3 像素空隙」「两个相邻按钮的 margin 没有叠加」），然后合上教程，自己写一个小页面把它复现出来，再试两种不同写法看结果差异。
学完能独立做静态页面，并能快速定位问题
如果课程消化完整，你应该能独立完成：一个语义结构清晰的个人简介页、一个带导航栏和卡片式内容的产品展示页、一个图文混排的文章页面；能统一设置全站的字体颜色和间距，能让页面在不同浏览器里表现基本一致，能跟同伴解释自己写的每个标签和每条样式是干什么的。更重要的是，你该有能力发现问题——页面乱了，先检查是不是盒模型算错了、有没有嵌套层级写反、定位的父级有没有加 relative。这种排查能力比记住所有标签更重要。检验标准可以这样自测：不查资料，30 分钟内写一个包含页头、导航、两栏正文、页脚的静态页面，并且页面没有意外的横向滚动条、图片没有变形、链接的悬停效果正常。做到这一条，说明基础已经站稳了。这门课给你的不是炫技，而是一套所有网页通用的底层规则。看懂规则之后再看任何网站的开发者工具，你都能认出哪部分是 HTML、哪部分是 CSS、哪部分出了问题。这份能力，比再看十集教程更值钱。
