HTML&CSS核心基础

这门《HTML&CSS核心基础》解决的是一个很具体的问题：你能看懂网页长什么样，但自己写不出来。比如运营同事发来一个活动页的静态稿，让你改个按钮颜色、调一下间距，你只能截图丢回去；或者你想给自己做个作品集页面，打开编辑器却不知道第一行该敲什么。这套资料针对的就是这个阶段——用 HTML 把内容结构搭起来，用 CSS 把样式控制住，最终能独立还原一张不太复杂的设计稿。

学完能独立做什么

不是「掌握网页设计能力」这种虚的，说几个可以验证的标准：给定一张常见的网页截图（导航栏 + 通栏图 + 三列卡片 + 页脚），你能不看教程、只查文档把它做出来，浏览器里打开和原图布局基本一致；能说清楚一个元素为什么会被挤下去、为什么宽度设了 100% 还溢出，并知道怎么改；能接手一份别人写的静态页面，找到某个区块的样式写在哪儿并做修改。达到这三条，前端方向的基础关就算过了，后面学 JavaScript 或者框架，不会再卡在「页面都搭不出来」这一层。

资料的组织方式

内容按 HTML 和 CSS 两条线推进。HTML 部分重点在语义化标签和文档结构，不是把所有标签列一遍让你背，而是讲清楚什么内容该用什么标签、表单怎么组织、为什么结构清晰对后面的样式和脚本都有好处。CSS 部分从选择器、盒模型讲到浮动、定位和常见布局手段，这几个概念是初学者最容易含糊过去、后面又反复踩坑的地方，资料里给的空间比较足。配套案例是完整的页面制作过程，从空白文件写到能在浏览器里看的效果，适合跟着敲一遍，而不是只看。

适合什么基础的人

• 完全没写过代码、但能熟练上网的人：可以跟，前期节奏不快，需要的是耐心把每个案例敲完。
• 学过一点又忘了、页面总是「大概能看但不对劲」的人：重点看盒模型和布局那几节，多半能对上你之前的困惑。
• 想转前端但还没入门的人：把这部分吃透再往下走，比直接上手框架划算得多。

需要提醒的是，如果你的目标直接是「学完就能做动态交互」，这套资料不覆盖 JavaScript，它只负责静态页面这一层。另外，纯看视频不动手的人学这门课基本无效，HTML 和 CSS 的坑都是敲出来的，不是看出来的。

怎么用这份资料

建议按顺序走，不要跳。每学完一个知识点，关掉教程自己默写一遍对应的结构和样式，写不出来再回去看。案例部分至少完整跟做两个页面，第三个尝试只看效果图自己实现，卡住了再查。遇到布局问题别急着搜「怎么让 div 居中」这类结论，先用盒模型和文档流的知识自己推一遍，推不出来再看答案，这样记住的是方法而不是某个写法。学完之后，找一个你常用的网站首页，试着仿出它的静态结构，能做到这一步，这门课的目的就达到了。