这套千峰 2022 年 9 月完结的前端面授班资料，很多人拿到手第一反应是「东西真多」，第二反应是「从哪看起」。它覆盖的是 HTML5 大前端这条主线，从最基础的 CSS 一路推到 Vue3.0，属于典型的线下班完整录屏。但完整不等于适合你——一个已经会写页面的人从头看 CSS 盒模型，纯属浪费时间。这篇导读只做一件事：帮你判断自己该从哪一段切入，以及看完之后哪些问题必须能答上来。

这套资料真正值钱的地方在哪

2022 年这个时间点很关键。Vue3 在那个阶段刚进入大规模落地，组合式 API、setup 语法糖、ref 与 reactive 的取舍、Teleport、Suspense 这些内容，市面上成体系的实战讲解并不多。这套课程把 Vue3 当作主线来推，而不是当作 Vue2 的附录，这是它和很多「Vue2 为主、Vue3 补丁式带过」的课程最大的区别。

另一块是 CSS 阶段的密度。从 DAY02 开始就是文件夹创建、网页组成、HTML 概念这种最底层的铺垫，意味着它假设你可能是零基础。对转岗的人来说这反而是好事——你可以快速扫过，确认自己没有知识断层，再把时间压在后半段。

先自查：你缺的到底是哪一块

不要一上来就问「这门课适不适合我」。先回答三个问题：

给你一张设计稿，你能不能在不查资料的情况下把布局写出来，并说清为什么用 flex 而不是 grid？
你写的页面在移动端会不会出现横向滚动、点击延迟、1px 边框问题？知道原因吗？
Vue3 里 ref 和 reactive 你会在什么场景下分别选它们？响应式丢失通常发生在什么时候？

第一个答不上来，回 CSS 和 HTML5 阶段补；第二个答不上来，重点看移动端适配和 HTML5 新特性那几节；第三个答不上来，直接跳到 Vue3 部分，前面的基础扫一遍即可。这套资料的价值在于它足够长，长到能覆盖不同起点的缺口，但前提是你自己知道缺口在哪。

配套练习怎么用才不白看

面授录屏最大的坑是「看懂了」的错觉。老师敲代码你跟着点头，一关视频就写不出来，这在 CSS 阶段尤其明显。建议的做法是：每看完一天的视频，不看源码，自己把当天的作业题重写一遍，写完再对照。资料里带了作业目录，这是比视频更该珍惜的部分。

Vue3 阶段则要反过来。先看老师怎么组织组件，再自己动手把同一个页面拆成不同的组件粒度，比较两种拆法的数据流向差异。组合式 API 的练习重点不在「会写」，而在「知道什么逻辑该抽成 composable」。这一点看视频看不出来，必须自己写废几版才有感觉。

看完应该能回答的问题

HTML5 语义化标签除了「好看」，对实际项目有什么可衡量的影响？
CSS3 的动画和 JS 动画，什么情况下必须选后者？
Vue3 的响应式是基于什么机制实现的，和 Vue2 的 Object.defineProperty 相比，它解决了哪些具体限制？
一个组件里同时有 props、emit 和 v-model，数据该往哪个方向流？
项目里要接入一个第三方库，但它只支持 Vue2 的写法，你打算怎么处理？

这五个问题能答清楚，说明你不是「看过」这套课，而是真的把它变成了自己的东西。答不上来的那一个，就是你下一步该回去补的地方。

千峰-HTML5大前端面授2022年9月完结版|价值14999元|Vue3.0|重磅首发|完结无秘

Vue3.0核心技能深度解析

编辑点评

系统全面，实战性强，适合初学者快速掌握HTML5、CSS3和Vue3.0技术。

⭐ 编辑推荐

千峰HTML5大前端面授课程，Vue3.0重磅首发，完结无秘，价值14999元。

课程亮点

• Vue3.0实战教学

• HTML5/CSS3基础巩固

• 项目实战提升技能

课程目录

000千峰2022年 9月完结前端/
├──01-一阶段CSS
| ├──DAY01
| | └──内容为空 讲解开班注意事项
| ├──DAY02
| | ├──视频
| | ├──作业
| | ├──01 文件夹的创建.html 0.47kb
| | ├──02 网页的组成.html 0.52kb
| | ├──03 html的概念.html 0.44kb
| | ├──04 html5的结构.html 0.77kb
| | ├──05 命名.html 0.51kb
| | ├──06 注释及html语法.html 0.69kb
| | ├──07 文字的标题及段落.html 1.81kb
| | ├──08 加粗倾斜换行水平线.html 1.31kb
| | ├──09 不常用的标签及特殊符号.html 1.97kb
| | └──10 列表.html 2.83kb
| ├──DAY03
| | ├──html
| | ├──images
| | ├──视频
| | ├──作业图
| | ├──01 听写及上节回顾.html 1.73kb
| | ├──02 作业讲解.html 1.17kb
| | ├──03 div和span.html 0.96kb
| | ├──04 插入图片.html 1.20kb
| | ├──05 超链接.html 1.03kb
| | ├──06 案例讲解-综合.html 1.43kb
| | ├──07 行内样式表的创建.html 1.53kb
| | ├──08 class标签通配符选择器.html 1.59kb
| | ├──09 扣丁学堂-上下结构.html 1.59kb
| | ├──10 扣丁学堂-左右的结构.html 3.56kb
| | ├──xiao.jpeg 66.88kb
| | └──扣丁课堂.jpg 741.62kb
| ├──DAY04
| | ├──images
| | ├──视频
| | ├──01 上节回顾.html 2.52kb
| | ├──02 表单.html 1.76kb
| | ├──03 表单案例.html 1.13kb
| | ├──04 css语法.html 1.35kb
| | ├──05 样式表的创建.html 1.50kb
| | ├──06 样式表的权重.html 0.84kb
| | ├──07 id选择器和群组选择器.html 0.99kb
| | ├──08 后代选择器.html 1.17kb
| | ├──09 伪类选择器.html 1.87kb
| | ├──10 选择器案例.html 1.94kb
| | ├──css.css 0.02kb
| | └──style.css 0.05kb
| ├──DAY05
| | ├──images
| | ├──视频
| | ├──01 作业错误及上节回顾.html 2.40kb
| | ├──02 选择器的权重.html 1.52kb
| | ├──03 ps切图.html 0.64kb
| | └──04 扣丁学堂-填内容.html 8.93kb
| ├──DAY06
| | ├──images
| | ├──视频
| | ├──01 上节回顾.html 0.39kb
| | ├──02 今天的上课内容.html 0.77kb
| | ├──03 文字的颜色和文字的大小及字体.html 1.04kb
| | ├──04 首行缩进.html 1.39kb
| | ├──05 加粗和倾斜.html 1.66kb
| | ├──06 文本的水平对齐.html 1.56kb
| | ├──07 垂直对齐及行高.html 1.83kb
| | ├──08 案例讲解-导航.html 1.36kb
| | ├──09 修饰线和字间距和词间距字体简写.html 2.74kb
| | ├──10 列表相关的属性.html 1.34kb
| | ├──11 边框的属性.html 1.45kb
| | └──12 案例讲解-搜索框.html 1.14kb
| ├──DAY07
| | ├──images
| | ├──视频
| | ├──01 上节回顾.html 0.62kb
| | ├──02 背景相关的属性.html 2.31kb
| | ├──03 背景图固定.html 0.81kb
| | ├──04 案例讲解-背景固定.html 0.90kb
| | ├──05 支持哪几种图片格式.html 0.55kb
| | ├──06 精灵图.html 1.22kb
| | ├──07 浮动.html 1.71kb
| | ├──08 浮动的问题.html 1.16kb
| | ├──09 清浮动.html 0.81kb
| | ├──10 案例讲解-浮动.html 2.77kb
| | └──11 调试工具.html 3.21kb
| ├──DAY08
| | ├──images
| | ├──视频
| | ├──01 上节回顾.html 1.15kb
| | ├──02 今日上课内容.html 0.41kb
| | ├──03 盒模型-padding.html 2.04kb
| | ├──04 案例讲解-padding.html 3.46kb
| | ├──05 盒模型-margin.html 1.96kb
| | ├──06 margin的bug.html 1.08kb
| | ├──07 margin解析注意点.html 0.82kb
| | ├──08 案例讲解-建桥结构.html 0.57kb
| | ├──09 案例讲解-建桥内容 .html 1.99kb
| | └──edu.css 1.71kb
| ├──DAY09
| | ├──练习
| | ├──视频
| | ├──01 上节回顾.html 1.92kb
| | ├──02 今日上课内容.html 0.48kb
| | ├──03 溢出.html 1.96kb
| | ├──04 案例讲解-溢出.html 3.77kb
| | ├──05 溢出出现省略号.html 2.43kb
| | ├──06 溢出案例讲解.html 2.07kb
| | ├──07 元素类型分类.html 1.32kb
| | ├──08 元素类型的转换.html 2.02kb
| | ├──09 元素类型案例.html 1.42kb
| | ├──10 显示隐藏.html 1.21kb
| | └──11 案例讲解-二级菜单.html 1.62kb
| ├──DAY10
| | ├──images
| | ├──视频
| | ├──01 上节回顾.html 1.31kb
| | ├──02 今日上课内容.html 0.49kb
| | ├──03 行内块元素存在的问题.html 0.83kb
| | ├──04 垂直居中.html 1.38kb
| | ├──05 垂直居中案例讲解.html 1.47kb
| | ├──06 置换元素与非置换元素.html 0.56kb
| | ├──07 相对定位.html 1.91kb
| | ├──08 绝对定位.html 2.34kb
| | ├──09 定位案例讲解-插入图片上放内容.html 1.60kb
| | ├──练习.jpg 324.57kb
| | └──效果图.jpg 327.50kb
| ├──DAY11
| | ├──images
| | ├──视频
| | ├──01 上节回顾.html 1.23kb
| | ├──02 层叠顺序.html 0.89kb
| | ├──03 固定定位.html 2.18kb
| | ├──04 固定定位的居中.html 1.20kb
| | ├──05 案例讲解.html 2.76kb
| | ├──06 粘性定位.html 1.08kb
| | ├──07 透明.html 0.96kb
| | ├──08 案例讲解-定位.html 3.60kb
| | ├──09 锚点.html 2.35kb
| | ├──10 锚点-轮播图.html 1.37kb
| | └──edu.css 3.37kb
| ├──DAY12
| | ├──视频
| | ├──01 作业讲解及上节回顾.html 1.56kb
| | ├──02 今日上课内容.html 0.34kb
| | ├──03 表单的补充.html 2.54kb
| | ├──04 表单的标签.html 1.44kb
| | ├──05 table属性.html 1.75kb
| | ├──06 tr的属性.html 0.97kb
| | ├──07 td的属性.html 1.39kb
| | ├──08 案例讲解.html 3.62kb
| | ├──09 案例讲解-table.html 1.30kb
| | ├──10 table的css属性.html 1.48kb
| | ├──11 table的行分组和标题.html 2.36kb
| | └──12 表格的列分组.html 2.52kb
| ├──DAY13
| | ├──视频
| | ├──01 上节回顾.html 1.02kb
| | ├──02 宽度自适应.html 1.87kb
| | ├──03 高度自适应.html 1.32kb
| | ├──04 最大最小宽高.html 1.03kb
| | ├──05 宽高自适应问题.html 0.75kb
| | ├──06 案例讲解.html 0.95kb
| | ├──07 高度塌陷.html 2.20kb
| | ├──08 伪对象.html 1.84kb
| | ├──09 隐藏.html 1.20kb
| | ├──10 首页.html 1.07kb
| | ├──11 header.html 0.67kb
| | ├──12 footer.html 0.61kb
| | └──style.css 0.59kb
| ├──DAY14
| | ├──video
| | ├──视频
| | ├──01 上节回顾.html 1.72kb
| | ├──02 BFC概念.html 1.71kb
| | ├──03 html5相关概念.html 0.48kb
| | ├──04 h5新增的语义化标签.html 2.00kb
| | ├──05 视频.html 1.18kb
| | ├──06 音频.html 0.56kb
| | ├──07 表单.html 1.10kb
| | ├──08 表单的验证.html 1.24kb
| | └──09 表单的标签.html 0.91kb
| ├──DAY15
| | ├──font
| | ├──视频
| | ├──01 上节回顾.html 1.28kb
| | ├──02 属性选择器.html 1.16kb
| | ├──03 结构伪类选择器.html 2.35kb
| | ├──04 nth-child和nth-of-type的区别.html 0.71kb
| | ├──05 根目标伪类及空伪类.html 0.55kb
| | ├──06 否定伪类选择器.html 1.13kb
| | ├──07 目标伪类选择器.html 0.62kb
| | ├──08 ui状态伪类选择器.html 1.18kb
| | ├──09 层级选择器.html 1.32kb
| | ├──10 css3前缀及优雅降级和渐进增强.html 0.54kb
| | ├──11 盒子阴影.html 0.82kb
| | ├──12 文字阴影.html 0.97kb
| | └──13 字体库的引用.html 1.28kb
| ├──DAY16
| | ├──images
| | ├──视频
| | ├──01 上节回顾.html 0.79kb
| | ├──02 作业讲解-字体库.html 1.42kb
| | ├──03 今日目标.html 0.45kb
| | ├──04 英文设置.html 0.77kb
| | ├──05 英文数字换行.html 0.66kb
| | ├──06 圆角.html 1.12kb
| | ├──07 多张背景图.html 0.57kb
| | ├──08 背景图的大小.html 0.99kb
| | ├──09 线性渐变.html 1.24kb
| | ├──10 径向渐变.html 1.52kb
| | ├──11 过渡的属性.html 1.31kb
| | ├──12 过渡的运动形式.html 1.82kb
| | ├──13 过渡案例-导航.html 1.40kb
| | └──14 过渡的案例-移动.html 0.97kb
| ├──DAY17
| | ├──视频
| | ├──01 上节回顾.html 0.70kb
| | ├──02 2d的偏移.html 1.40kb
| | ├──03 偏移的案例.html 1.33kb
| | ├──04 旋转.html 1.48kb
| | ├──05 缩放.html 2.06kb
| | ├──06 缩放案例.html 0.96kb
| | ├──07 倾斜.html 2.19kb
| | ├──08 多属性一起用.html 0.59kb
| | ├──09 旋转案例-扇子.html 3.28kb
| | ├──10 原点的位置.html 0.88kb
| | ├──11 3d-偏移.html 2.47kb
| | ├──12 3d的旋转.html 2.80kb
| | ├──13 3d的缩放.html 2.94kb
| | ├──14 3d案例讲解-立方体.html 2.37kb
| | ├──15 动画.html 2.81kb
| | └──style.css 0.59kb
| ├──DAY18
| | ├──视频
| | ├──01 作业讲解-固定宽度轮播图.html 1.73kb
| | ├──02 作业讲解-相册.html 2.66kb
| | ├──03 上节回顾.html 0.94kb
| | ├──04 今日目标.html 0.40kb
| | ├──05 css3盒模型.html 1.37kb
| | ├──06 css3盒模型案例讲解.html 0.94kb
| | ├──07 css3弹性盒模型转换.html 1.31kb
| | ├──08 c3弹性的方向.html 1.37kb
| | ├──09 c3弹性的换行.html 2.01kb
| | ├──10 c3弹性的对齐.html 3.01kb
| | ├──11 cs3弹性的堆栈伸缩行.html 3.44kb
| | ├──12 弹性案例讲解-骰子.html 1.54kb
| | ├──13 order顺序.html 1.50kb
| | ├──14 flex.html 1.97kb
| | ├──15 flex案例讲解-两栏自适应布局.html 1.27kb
| | ├──16 flex案例讲解-横向滚动.html 1.48kb
| | └──style.css 0.59kb
| ├──DAY19
| | ├──images
| | ├──taobao
| | ├──视频
| | ├──01 作业讲解.html 1.10kb
| | ├──02 上节回顾.html 0.85kb
| | ├──03 今日目标.html 0.33kb
| | ├──04 媒体查询.html 1.18kb
| | ├──05 媒体查询2.html 1.89kb
| | ├──06 响应式布局案例.html 3.95kb
| | ├──07 移动端知识.html 1.29kb
| | ├──08 移动端布局分类.html 0.39kb
| | ├──09 单位.html 1.59kb
| | ├──10 单位转换.html 1.94kb
| | ├──all.css 0.70kb
| | ├──blue.css 0.05kb
| | ├──red.css 0.05kb
| | ├──style.css 0.59kb
| | └──yellow.css 0.05kb
| └──DAY20
| | ├──font
| | ├──images
| | ├──视频
| | ├──01 上节回顾.html 0.99kb
| | ├──02 移动端布局-千锋.html 6.01kb
| | ├──03 移动端布局-js.html 4.17kb
| | ├──flexible.js 3.97kb
| | └──style.css 0.61kb
├──02-二阶段JS
| ├──JavaScript第10天
| | ├──代码
| | ├──视频
| | ├──资料
| | └──作业
| ├──JavaScript第11天
| | ├──代码
| | ├──视频
| | ├──资料
| | └──作业
| ├──JavaScript第12天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第13
| | ├──代码
| | ├──视频
| | ├──资料
| | └──作业
| ├──JavaScript第14天
| | ├──代码
| | ├──视频
| | ├──资料
| | └──作业
| ├──JavaScript第15天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第16天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第17天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第18天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第19天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第1天
| | ├──代码
| | ├──视频
| | └──JavaScript第一天.md 10.54kb
| ├──JavaScript第20天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第21天
| | ├──代码
| | └──视频
| ├──JavaScript第22天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第23天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第24天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第25天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第26天
| | ├──代码
| | └──视频
| ├──JavaScript第27天
| | ├──代码
| | └──视频
| ├──JavaScript第28天
| | ├──视频
| | └──资料
| ├──JavaScript第29天
| | ├──视频
| | └──资料
| ├──JavaScript第2天
| | ├──代码
| | ├──视频
| | ├──资料
| | └──作业
| ├──JavaScript第30天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第31天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第32天
| | ├──代码
| | ├──视频
| | └──资料
| ├──JavaScript第33天
| | ├──代码
| | └──视频
| ├──JavaScript第34天
| | ├──代码
| | └──视频
| ├──JavaScript第35天
| | ├──代码
| | └──视频
| ├──JavaScript第36天
| | ├──代码
| | └──视频
| ├──JavaScript第37天
| | ├──代码
| | └──视频
| ├──JavaScript第38天
| | ├──代码
| | └──视频
| ├──JavaScript第39天
| | ├──project