阶段01 · HTML + CSS

HTML 标签与语义化、CSS 选择器与盒子模型、页面布局、HTML5 与 CSS3 新特性。

本模块共 47 个教学单元、282 段视频、约 55 小时 25 分。

学习顺序

#	单元	视频数	时长
01	开发文档（Day2 1/3）	6	51 分钟
02	排版标签与文本标签（Day2 2/3）	6	54 分钟
03	相对路径和绝对路径与超链接和锚点（Day2 3/3）	6	1 小时 36 分
04	相对路径作业讲解与无序列表（Day3 1/4）	6	59 分钟
05	列表与表格标签（Day3 2/4）	6	1 小时 16 分
06	表格标签与表单（Day3 3/4）	5	48 分钟
07	表单（Day3 4/4）	5	31 分钟
08	表单与内联框架标签（Day4 1/3）	7	1 小时 14 分
09	内联框架标签与HTML 字符实体（Day4 2/3）	7	1 小时 45 分
10	CSS 的基本语法与附录 VsCode 的使用（Day4 3/3）	6	48 分钟
11	CSS长度单位与颜色设置方式-颜色名（Day5 1/4）	6	1 小时 16 分
12	CSS 长度单位和颜色设置与CSS 基本选择器（Day5 2/4）	6	41 分钟
13	CSS 基本选择器与盒子模型（显示模式）（Day5 3/4）	5	1 小时 6 分
14	CSS 属性总结（Day5 4/4）	5	42 分钟
15	google字体设置与行高（Day6 1/4）	6	1 小时 0 分
16	CSS 常用属性（Day6 2/4）	6	1 小时 14 分
17	CSS 常用属性与CSS 选择器（Day6 3/4）	5	55 分钟
18	CSS 选择器（Day6 4/4）	5	54 分钟
19	作业讲解-背景图固定案例与作业讲解-列表图标案例（Day7 1/3）	7	1 小时 18 分
20	盒子模型 box model与样式继承和自带样式（Day7 2/3）	7	1 小时 21 分
21	样式继承和自带样式（Day7 3/3）	7	52 分钟
22	CSS 课堂案例（Day8 1/2）	6	1 小时 55 分
23	浮动与行内元素或行内块元素在布局中的特点（Day8 2/2）	6	1 小时 34 分
24	相对定位与绝对定位（Day9 1/3）	7	1 小时 27 分
25	定位与精灵图（Day9 2/3）	6	1 小时 5 分
26	精灵图与页面布局（Day9 3/3）	6	1 小时 4 分
27	页面布局-新闻列表与页面布局-图标列表（Day10）	2	36 分钟
28	HTML5 新增标签（Day11 1/4）	6	1 小时 6 分
29	HTML5 新增标签与HTML5 表单新增功能（Day11 2/4）	6	54 分钟
30	HTML5 音视频与HTML5 新增全局属性（Day11 3/4）	5	59 分钟
31	HTML5 兼容性方案与CSS3 基本语法（Day11 4/4）	5	53 分钟
32	层级选择器与属性选择器（Day12 1/3）	6	1 小时 5 分
33	CSS3 选择器与CSS3 新增盒子相关样式（Day12 2/3）	6	1 小时 30 分
34	CSS3 新增盒子相关样式（Day12 3/3）	5	1 小时 1 分
35	CSS3 新增背景属性（Day13 1/4）	7	1 小时 4 分
36	CSS3 新增背景属性与CSS3 新增边框属性（Day13 2/4）	6	1 小时 8 分
37	CSS3 新增文本属性与CSS3 渐变（Day13 3/4）	6	1 小时 2 分
38	Filter 滤镜与WEB 字体（Day13 4/4）	6	1 小时 3 分
39	变换 transform（Day14 1/3）	7	1 小时 5 分
40	变换 transform与过渡 transition（Day14 2/3）	7	1 小时 39 分
41	动画 animation（Day14 3/3）	6	1 小时 45 分
42	作业讲解-幽灵按钮与作业讲解-幽灵按钮-使用伪元素实现边框（Day15 1/3）	7	1 小时 54 分
43	多列布局与伸缩盒布局 Flex（Day15 2/3）	7	1 小时 31 分
44	伸缩盒布局 Flex（Day15 3/3）	7	1 小时 5 分
45	伸缩盒等分布局与伸缩盒页面练习01（Day16 1/3）	7	1 小时 32 分
46	媒体查询和响应式布局与BFC（Day16 2/3）	6	1 小时 17 分
47	BFC（Day16 3/3）	6	1 小时 45 分

前置知识

无需编程基础；建议先完成环境准备（VS Code + Chrome）。