基础与提升Web开发语言之HTML+CSS实战视频教程

缺什么补什么：先把页面骨架搭对，再谈样式

这门课解决的核心问题，是“看得懂标签，却写不对结构、调不对样式”的尴尬。很多转岗或自学的人能背出 div 和 span，能说出 class 和 id 的区别，但一拿到设计图就发懵：表格该用语义化标签还是全用 div 模拟？表单控件怎么分组才不乱？选择器优先级为什么总是被覆盖？课程内容从 HTML 基础标签、图像与超链，一直推进到列表、表格、内联框架和表单，再到 CSS 基本选择器、复合选择器与样式表分类。它适合两类人：一类是零基础、刚接触 Web 前端、需要建立“结构先于样式”的思维；另一类是写过几个页面、但布局靠复制粘贴、遇到样式冲突就抓瞎的人。如果你连 HTML 文档基本结构都写不全，建议直接从第一节的标签讲练开始，别跳着看；如果你卡在表单和表格的细节上，可以直接从列表与表格那一块切入，但务必跟着练习讲解动手写一遍。

建议先看哪几块，以及资料怎么配合练习

别一口气从头刷到尾，容易看完就忘。第一优先看“表单”和“样式表（一）”这两块。表单是前端最容易出 bug 的区域：表单元素那一节会讲清楚 input 的各种类型和属性，表单高级会覆盖到分组、禁用、只读等实际开发里频繁踩坑的点，而表格布局与表单综合练习是少有的“结构加样式”联动训练，务必自己先写再对视频。样式表那一块的关键在于基本选择器和复合选择器的优先级判断，这是后续所有页面样式的基础。资料包里的目录线索只用来理解主题，不要照抄文件名去硬找；正确的做法是，每看完一节，立刻在本地新建一个空白 HTML 文件，按视频里的思路把结构敲出来，再用 CSS 调样式。遇到卡壳，再回头定位对应小节，而不是把视频当背景音放着听。练习讲解那几节虽然短，但信息密度高，别跳过，它演示的是“拿到需求后怎么拆结构”的思路，这比记住某个标签重要得多。

学完能独立做什么，以及应能回答的问题

学完后，你应该能独立完成一个结构清晰、样式不冲突的静态信息页面。具体来说，能徒手写出带表单控件、表格数据展示、列表导航和图文混排的页面，并且能解释为什么这里用 fieldset 而不是 div，为什么选择器写法 A 会覆盖写法 B。配套练习方面，建议自己找一张简单的后台管理页面截图，或者一个登录注册页设计图，不看视频先写，写完再对照课程里的练习讲解找差距。看完后，试着回答这几个问题：表格的语义化标签和用 div 模拟表格，在什么场景下选哪个？多个样式表引入同一页面时，覆盖关系由什么决定？表单提交时，name 属性缺失会带来什么后果？如果这三个问题你都能说清楚，并且能在本地跑通一个自己写的完整页面，这门课的底子就算打牢了，可以往布局和响应式继续走。别假装什么都会，动手写一遍，问题自然会暴露出来。