前端课程html+css

能力缺口：能写出标签，却拼不出像样的页面

很多转岗或查漏补缺的人翻这份资料，问题往往不是没听过超文本标记语言和样式表，而是实际写页面时一动手就塌。具体表现为：块级元素和行内元素混着用，不知道容器该不该限制宽度；想调一个按钮的位置，结果整行跟着错位；看到别人写的页面结构清晰，自己一上手全是套娃式的容器。这份只有两节的极简资料，解决的正是这种半懂不懂的尴尬：它不跟你扯什么大厂架构，只盯着最底层的标签语义和样式规则，逼你把页面骨架和视觉呈现的因果关系重新捋顺。适合完全没写过代码的零基础者用来破冰，也适合那些会用框架却连原生表单都写不利索的人回来补地基。建议先看第一节把骨架搭对，再看第二节把皮肉贴上，别跳着看。

配套练习：先搭骨架，再调皮肉，别急着加特效

这份资料线索极短，千万别当成看个热闹就完事的视频。第一节讲标记语言，你看完后立刻新建一个空白文本文件，手敲一个包含头部、导航、主体和版权区域的完整结构，不要用任何开发工具的自动补全。重点练语义化标签的嵌套层级，搞清楚哪些元素天生独占一行，哪些只能并排。第二节引入样式表后，练习要升级：把刚才那个丑陋的纯文本骨架，用外部样式表改成两列布局，左边导航固定宽度，右边内容自适应。你必须亲手经历给容器加内边距却发现整体变宽的坑，才会真正理解盒模型的尺寸计算。资料里的代码片段哪怕只有几行，也要逐字敲进编辑器里运行，改一个属性值就刷新一次浏览器，观察元素到底塌陷到哪里去了。别用框架的现成类名偷懒，这阶段就是让你用最原始的属性硬刚排版逻辑。

看完应能独立回答的问题

• 一个元素的实际占据宽度到底由哪几个属性相加决定？内边距撑大了容器该怎么修正？
• 同样是一段文字，用段落标签和用无语义的容器包裹，在样式继承和渲染上有什么本质区别？
• 如果不借助任何外部库，只靠原生样式，能不能徒手写出一个导航栏紧贴页面顶部且不被内容顶跑的布局？

当你不用查资料就能把上述问题说透，并且能独立画出一个带表单和图文列表的静态页，这份资料的地基作用就算起到了。接下来你要找的下一份资料，应该是包含浮动与弹性布局的进阶排版专题，别在这两节课上反复磨蹭，补完缺口赶紧往前走。