初识HTML，带你制作网页

先判断：这门课值不值得学

这门课解决的是“零基础看着代码发懵、不知道网页到底怎么拼出来”的问题。它把网页制作拆成 HTML 结构和 CSS 样式两段，从最基础的块级标签、行级标签，一路讲到表格、表单、图片和链接，再过渡到 CSS 选择器、文本字体样式、盒模型。对转行做前端、做后台想看懂页面、或者要维护企业官网和后台管理系统的人来说，这块内容是绕不开的地基。如果你只是想用可视化工具拖拽建站，不打算碰代码，那这门课的性价比不高；但只要你的工作里出现过“改个按钮文字还要等排期”“看不懂前端同事说的盒模型”这类场景，它就值得花时间学。

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

资料按“标签—样式—盒模型”的顺序铺开，完全没写过代码的人也能跟上，前提是你得耐着性子把每个标签在浏览器里敲一遍。已经有零星 HTML 经验、但 CSS 总是调不对的人，可以直接跳到选择器和盒模型部分查漏补缺。建议先把“常用块级标签”“常用行级标签”“网页图片”“网页链接”这几节过一遍，建立“标签就是往页面里塞内容”的直觉；接着看“HTML 中的表格”和“表单标签”“表单属性”，因为后台系统和落地页里最常改的就是这两块；CSS 部分先抓“基本选择器”“复合选择器”和“盒模型”，这三块决定了你能不能把页面元素挪到想要的位置，其余文本、字体、颜色和单位可以当手册随查随用。

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

学完之后，你应该能独立完成一件具体的事：照着一张简单的原型图，用纯 HTML 和 CSS 把静态页面还原出来，包括头部导航、图文列表、带边框和内边距的卡片、以及可提交的登录表单。练习时别只看视频，建议这样配合资料：每看完一节，先暂停，照着课程里的案例在编辑器里敲一遍，保存后在浏览器里刷新看效果；接着改动一两个属性值，观察页面变化，确认自己真的理解了“改这里会影响哪里”。遇到盒模型这种容易卡壳的地方，把案例文件单独存一份，反复调边框、内边距和外边距的数值，直到能预判改完后的布局走向。整套资料过完后，可以找一张企业官网的截图，试着用课里讲过的标签和样式还原前两屏，能对上七八成，就算把地基打扎实了。