前端小白零基础入门HTML5+CSS3-pink老师

HTML5 与 CSS3 零基础导读

这门课解决什么问题，适合什么基础

很多转岗或自学前端的人卡在第一步：能看懂别人写的页面，自己动手却连一个静态电商首页都搭不出来。问题通常不在 JavaScript，而在 HTML 结构没理清、CSS 盒模型和定位没吃透、布局方式只会最老的浮动写法。这门课从标签语义、表单、表格讲起，花大量篇幅在 CSS 基础上——盒模型、选择器优先级、浮动与清除、定位与层叠——然后进入 HTML5 新特性和 CSS3 动画过渡，最后落到 PC 端电商首页的完整切图实战。适合完全没写过代码的小白，也适合写过几页但布局总是错位、定位层级搞不清的人来查漏补缺。如果你已经能独立用 flex 还原中等复杂度页面，基础篇可以跳过，直接从进阶加强部分看起。

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

基础篇是核心，建议按顺序看，不要跳。HTML 两天内容不长，重点是把常用标签和表单控件过一遍；CSS 部分是真正的重头，七天内容量很大，盒模型和浮动这两块务必边看边敲，不要只看不练，否则到定位那一节会完全跟不上。CSS 走完之后有 HTML5CSS3 提高篇，讲语义标签、新增表单类型、过渡和动画，这部分相对轻松但后面项目会用到。基础篇收尾是 PC 端电商项目，分上下两部分，这是把前面所有知识点串起来的实战，建议跟着做一遍完整页面，不要只看成品。进阶加强部分覆盖流式布局、flex、rem、响应式，是基础篇之后现代布局的补充，flex 和 rem 这两块优先看，响应式布局看一遍理解原理即可。资料包里的素材和代码要配合视频同步打开，每节课对应的页面自己先写一遍再看讲解，写错的地方对照素材里的成品找差异，这样比纯看视频效率高很多。

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

走完全部内容后，你应该能独立完成一个 PC 端企业站或电商首页的静态切图：拿到设计稿能拆出合理的 HTML 结构，用浮动或 flex 实现两栏三栏布局，处理导航栏、轮播区域、商品列表的排版，用定位实现悬浮按钮和弹层，用 CSS3 实现简单的悬停动画和过渡效果。进阶部分学完后，还能用 rem 做移动端适配、用媒体查询做基本响应式。检验自己是否学到位，试着回答这几个问题：浮动元素为什么会脱离文档流，清除浮动有哪几种方式各自适用什么场景？绝对定位的参照物怎么确定，z-index 在什么情况下不生效？flex 容器的主轴方向怎么切换，justify-content 和 align-items 分别管哪个方向？rem 和 em 的参照基准有什么区别，做移动端适配时基准字号怎么设？如果这些都能说清楚并举出代码示例，说明基础打牢了，可以往 JavaScript 和框架方向继续推进。