HTML5+CSS3前端开发视频教程

先认清你的能力缺口在哪

别假装都会写页面。很多人转岗做前端，或者后端来补页面，张口就是组件库、框架、工程化，真让他手写一个原生结构伪类选择器，或者用画布画个渐变倒影，立刻卡壳。这门课针对的就是这种“会套框架但说不清底层原理”的断层。它不碰任何 JavaScript 框架，只盯住超文本标记语言第五版和层叠样式表第三版这两个底层基石。如果你属于那种对着别人写好的组件能改，但脱离现成代码库连基本多媒体标签都敲不全的人，或者正准备面试需要突击底层概念，这门课就是缺什么补什么。它要求你放下对各类脚手架的依赖，老老实实回到文档对象模型和样式渲染本身。

建议先看哪几块及资料怎么配合

资料包里的视频不是用来当背景音播放的，必须边看边敲。建议按三个阶段走：第一阶段先啃新增标签和多媒体元素，这部分看似简单，但音频视频控件的属性很多，别跳着看，自己建个空文件把播放、暂停、循环的参数全试一遍；第二阶段是选择器部分，这是查漏补缺的重灾区，特别是层次选择器和结构伪类，优先级规则必须自己写代码去验证，别光背口诀，资料里讲到属性选择器时，立刻停下来自己造几个不同的超链接场景去匹配；第三阶段是特效与画布，这部分代码量最大，看渐变和倒影时，先把视频暂停，自己照着效果写一遍，写不出来再回去看视频里的逻辑。所有的半圆边框练习，不要直接复制源码，必须自己一行行敲出来在浏览器里渲染。画布部分的中级进阶会结合多媒体，这时候要把前面的音视频标签和绘图接口结合起来调用，资料里的例子要当成靶子，改参数看反馈。

学完能独立做什么及自测问题

把这几个模块吃透，你至少能独立完成几件事：不依赖任何第三方界面库，从零手写出一个结构清晰的静态页面；精确控制各种复杂选择器的优先级，不再靠猜来调整样式；用纯样式写出渐变、倒影和各类异形边框；用画布接口结合多媒体标签，自己画图并控制视频帧。看完后问自己几个问题：新增的语义标签和普通区块标签在渲染上有什么区别？同级样式的优先级到底怎么算？结构伪类选择器在嵌套很深的列表里怎么精准定位？画布的坐标系原点在哪？如果这几个问题答得磕磕巴巴，说明没练到位，回头继续补。别急着搞框架，先把这层底子打扎实。