补齐“只会复制粘贴”的能力短板
很多刚入行或转岗前端的人，最大的尴尬不是不会写逻辑，而是连最基础的页面结构都搭不稳。看到现成的 Demo 能改，但自己从零画一个表单或者排一个表格，往往要对着文档查半天属性。这门课专治这种“结构认知模糊”。它把 HTML5 和 CSS3 拆碎了讲，从最底层的文档语义、文本与列表，一路讲到复杂的表单控件和表格布局。如果你发现自己写的代码虽然能跑，但结构混乱、缺乏语义，或者 CSS 选择器写得啰嗦且无效，那这里的知识缺口就是你急需填补的。
课程不讲高大上的框架，而是回归原点，把每一个标签的默认行为、每一个样式的层叠规则讲透。这就像是在盖房子前先学好怎么烧砖和和水泥，只有地基打牢了，后面学 Vue 或 React 时才不会因为不懂 DOM 结构而处处碰壁。
建议按顺序啃完的前置板块
虽然课程覆盖全面，但为了效率，建议初学者不要跳跃式观看。首先要把 **HTML 基础部分** 完整过一遍，特别是关于语义化标签和超链接、图片标签的使用，这是所有 Web 开发的基石。接着重点攻克 **表单与表格** 这一章，这是后台管理和数据展示的核心场景，也是面试中容易被问到的细节点，比如不同 input 类型的区别、表格跨行跨列的实现。
然后是 **CSS 基础**，尤其是选择器的优先级计算和页面的三种引入方式，这直接关系到你后续写样式时的思维清晰度。不要急着去看特效或动画，先把静态页面的布局逻辑吃透。资料包里的案例通常配有对应的练习文件，务必动手敲代码，而不是只看视频。对照着视频里的目录结构，尝试自己默写出一个包含头部、导航、主体和页脚的完整 HTML 骨架，再逐步添加 CSS 样式，这样能迅速检验你是否真的理解标签的嵌套关系。
学完后你能独立胜任什么
完成这门课的核心目标后，你应该能够独立编写结构规范、语义清晰的静态网页，不再依赖现成的模板。具体表现为：你能快速搭建出响应式之前的基础布局，能熟练处理各种复杂的表单交互结构，也能通过 CSS 精确控制页面元素的视觉呈现。
对于备考者来说，这意味着掌握了前端开发最核心的“门面”知识，为后续学习 JavaScript 交互逻辑扫清了障碍。对于转岗学习者，这是你从“非技术背景”迈向“全栈开发”的第一步，让你具备了承接小型页面制作任务的基本能力。记住，前端之路漫长，但扎实的 HTML/CSS 基础是你手中最可靠的工具，别让起步阶段的粗糙影响了你的职业信心。
课程目录
1-1 [HTML基础] HTML基础（上） (10:10) 1-2 [HTML基础] HTML基础（中） (23:38) 1-3 [HTML基础] HTML基础（下） (10:05) 1-4 [HTML基础] 文本标签 (13:54) 1-5 [HTML基础] 列表标签 (08:19) 1-6 [HTML基础] 超链接a标签 (16:56) 1-7 [HTML基础] 图片标签 (09:10) 2-1 [html基础-表单/表格] 表单（上） (16:12) 2-2 [html基础-表单/表格] 表单（下） (17:39) 2-3 [html基础-表单/表格] 表格 (14:59) 3-1 [CSS基础] CSS基础 (08:57) 3-2 [CSS基础] CSS页面的使用方法 (15:43) 3-3 [CSS基础] CSS常引用选择器（上） (29:29) 3-4 [CSS基础] CSS常引用选择器（下） (12:23) 3-5 [CSS基础] CSS优先级及常用属性 (14:56) 4-1 [CSS样式属性] CSS文本属性 (30:28) 4-2 [CSS样式属性] css字体属性（上） (23:11) 4-3 [CSS样式属性] css字体属性（下） (12:10) 4-4 [CSS样式属性] CSS 背景属性 (22:17) 5-1 [CSS盒模型解析/浮动] 盒模型简介 (27:23) 5-2 [CSS盒模型解析/浮动] 边距、外边距、边框使用方法（上） (23:07) 5-3 [CSS盒模型解析/浮动] 边距、外边距、边框使用方法（下） (19:02) 5-4 [CSS盒模型解析/浮动] 浮动的使用 (29:10) 5-5 [CSS盒模型解析/浮动] 创客学院登录对话框实现（上） (19:58) 5-6 [CSS盒模型解析/浮动] 创客学院登录对话框实现（下） (26:19) 6-1 [溢出处理与定位] CSS浮动实际案例应用（一） (16:47) 6-2 [溢出处理与定位] CSS浮动实际案例应用（二） (26:38) 6-3 [溢出处理与定位] 常用定位方式 (26:20) 6-4 [溢出处理与定位] 定位元素层关系 (23:46) 6-5 [溢出处理与定位] overflow/使用场景 (21:22) 7-1 [浏览器兼容CSS hack] CSS hack的使用方法 (23:21) 7-2 [浏览器兼容CSS hack] 透明度属性的使用 (21:43) 7-3 [浏览器兼容CSS hack] 创客学院首页面的静态排版（一） (29:16) 7-4 [浏览器兼容CSS hack] 创客学院首页面的静态排版（二） (25:14) 8-1 [图片精灵/经典三列布局] 图片精灵的使用 (13:44) 8-2 [图片精灵/经典三列布局] 三列布局的创建（上） (20:44) 8-3 [图片精灵/经典三列布局] 三列布局的创建（下） (17:50) 8-4 [图片精灵/经典三列布局] CSS3实现tab切换 (19:45) 8-5 [图片精灵/经典三列布局] 创客学院首页面的静态排版（三） (13:59) 8-6 [图片精灵/经典三列布局] 创客学院首页面的静态排版（五） (15:27) 8-7 [图片精灵/经典三列布局] 创客学院首页面的静态排版（四） (20:49) 8-8 [图片精灵/经典三列布局] 创客学院首页面的静态排版（六） (33:06) 9-1 [京东首页模块制作（1）] 京东首页header布局（上） (20:11) 9-2 [京东首页模块制作（1）] 京东首页header布局（下） (24:26) 9-3 [京东首页模块制作（1）] 京东首页导航栏布局（上） (22:45) 9-4 [京东首页模块制作（1）] 京东首页导航栏布局（中） (28:12) 9-5 [京东首页模块制作（1）] 京东首页导航栏布局（下） (17:36) 9-6 [京东首页模块制作（1）] banner部分结构制作（一） (20:02) 9-7 [京东首页模块制作（1）] banner部分结构制作（二） (15:53) 9-8 [京东首页模块制作（1）] banner部分结构制作（三） (16:26) 9-9 [京东首页模块制作（1）] banner部分结构制作（四） (16:44) 10-1 [京东首页模块制作（2）] 京东首页专题部分（一） (12:26) 10-2 [京东首页模块制作（2）] 京东首页专题部分（二） (15:00) 10-3 [京东首页模块制作（2）] 京东首页专题部分（三） (15:58) 10-4 [京东首页模块制作（2）] 京东首页专题部分（四） (15:00) 10-5 [京东首页模块制作（2）] 京东首页专题部分（五） (16:59) 10-6 [京东首页模块制作（2）] 京东首页楼层（上） (14:15) 10-7 [京东首页模块制作（2）] 京东首页楼层（下） (13:46) 10-8 [京东首页模块制作（2）] 京东首页楼层图标制作 (11:48) 10-9 [京东首页模块制作（2）] 京东首页右侧导航栏制作 (15:33) 11-1 [京东购物车模块制作] 购物车header部分制作 (21:04) 11-2 [京东购物车模块制作] 购物车主题内容模块制作（一） (26:04) 11-3 [京东购物车模块制作] 购物车主题内容模块制作（二） (09:18) 11-4 [京东购物车模块制作] 购物车主题内容模块制作（三） (22:16) 11-5 [京东购物车模块制作] 购物车主题内容模块制作（四） (24:43) 11-6 [京东购物车模块制作] 购物车footer部分制作（上） (20:02) 11-7 [京东购物车模块制作] 购物车footer部分制作（下） (15:07)
