跨越入门门槛：HTML与CSS的底层逻辑
前端开发最大的坑，不是框架难学，而是很多初学者连网页的“骨架”都搭不稳。这门课程专门针对零基础人群，核心解决的是“如何用代码还原设计稿”这一根本问题。它不追求花哨的技巧堆砌，而是回归本质：厘清HTML作为内容语义化容器的角色，以及CSS作为视觉表现层的控制逻辑。对于完全没有编程经验、甚至不知道浏览器如何渲染页面的学习者，直接上手Vue或React往往会因概念断层而受挫。因此，填补这一底层认知缺口，是进入前端领域前必须完成的一步。
课程结构严谨，前置预备知识部分（1-1至1-5）重点梳理了前端开发的工作产出物、常用开发工具及效率快捷键，这是职业化开发的起点。随后进入HTML核心基础章节（2-1起），从网页基本DOM结构入手，逐步拆解一级标题、段落分割、文本格式化（加粗/倾斜）及特殊字符的使用。这一阶段的关键在于理解“语义化标签”的价值——为什么新闻列表要用ul/li，而不是随意堆砌div。如果你发现写出的页面结构混乱、维护困难，通常就是基础标签使用不规范所致。课程通过由浅入深的讲解，帮助学习者建立正确的代码规范意识，而非仅仅实现表面功能。
能力产出与高效练习路径
学完本课程后，你将具备独立编写静态单页网站的能力，能够清晰阐述并构建HTML文档树，熟练运用常用块级与行内元素进行内容布局，并能使用基础CSS属性控制字体、颜色、背景及边框样式。你应能自信地回答关于HTML语义化、盒子模型基础概念等问题，这是从“业余爱好者”转向“规范开发者”的分水岭。
建议学习顺序如下：先通览预备知识建立整体认知，再重点攻克第2章的HTML基础标签，务必动手敲写每一个示例代码。资料包中的视频用于理解概念，但核心技能只能通过手动编码获得。不要试图跳过基础直接看复杂案例，每学完一个标签模块，立即配合配套练习进行验证。若后续计划转岗或备考，这块扎实的HTML/CSS功底是学习JavaScript交互及响应式布局的必要前提。资料配合的核心在于“眼到、手到、心到”，切忌只看不练，确保每个知识点都能在实际编辑中独立调用。
课程目录
1-1 [入门前端预备知识] 入门前端课程介绍 (04:13) 1-2 [入门前端预备知识] 本课程实战案例介绍 (03:18) 1-3 [入门前端预备知识] 前端有哪些工作产出物？ (11:37) 1-4 [入门前端预备知识] 入门前端预备知识有哪些？ (05:35) 1-5 [入门前端预备知识] 前端常用快捷键 (06:30) 2-1 [HTML入门基础知识] HTML是什么？ (05:06) 2-2 [HTML入门基础知识] 认识网页基本结构 (13:27) 2-3 [HTML入门基础知识] 页面中最重要标签一级主标题 (05:06) 2-4 [HTML入门基础知识] 段落与分割线 (04:33) 2-5 [HTML入门基础知识] 文本格式化加粗与倾斜 (04:28) 2-6 [HTML入门基础知识] 认识特殊字符 (04:42) 2-7 [HTML入门基础知识] 显示图片的方法与三个必填属性 (05:53) 2-8 [HTML入门基础知识] 超链接的功能（上） (03:25) 2-9 [HTML入门基础知识] 超链接的功能（中） (02:11) 2-10 [HTML入门基础知识] 超链接的功能（下） (07:05) 2-11 [HTML入门基础知识] 无序列表-有序列表-定义列表 (08:11) 2-12 [HTML入门基础知识] 实战表单元素-注册信息提交到服务器 (20:50) 2-13 [HTML入门基础知识] GET与POST请求的区别 (14:39) 2-14 [HTML入门基础知识] 多选-下拉列表-隐藏域 (09:06) 2-15 [HTML入门基础知识] 禁用与只读以及表格的用法 (05:20) 3-1 [CSS入门基础知识] CSS入门-改变字体颜色 (12:24) 3-2 [CSS入门基础知识] 三种CSS选择器 (05:30) 3-3 [CSS入门基础知识] 层级选择器 (06:28) 3-4 [CSS入门基础知识] 属性选择器 (08:26) 3-5 [CSS入门基础知识] 字体-样式-风格-大小 (11:20) 3-6 [CSS入门基础知识] 字体单位em与rem的区别 (06:25) 3-7 [CSS入门基础知识] 伪类与伪元素 (06:14) 3-8 [CSS入门基础知识] Div+Css调整网页背景图片 (09:14) 3-9 [CSS入门基础知识] 盒子模型 (19:30) 3-10 [CSS入门基础知识] 认识浮动-实战案例-导航菜单 (13:28) 3-11 [CSS入门基础知识] 相对定位与静态定位的特性 (11:20) 3-12 [CSS入门基础知识] 绝对定位和父相子绝的用法 (12:45) 3-13 [CSS入门基础知识] 32 固定定位的用法 (05:39) 4-1 [Flex网页布局] flex布局-弹性布局-移动端布局 (07:55) 4-2 [Flex网页布局] flex-direction设置主轴方向 (04:52) 4-3 [Flex网页布局] justify-content-主轴排列方式 (07:28) 4-4 [Flex网页布局] Flex换行问题 (04:16) 4-5 [Flex网页布局] 让Flex子元素水平垂直居中 (03:44) 4-6 [Flex网页布局] Flex 纵轴多行子元素布局方案 (04:56) 4-7 [Flex网页布局] Flex 布局中子项常用属性介绍 (11:00) 5-1 [灵活运用-总结十大经典网页布局方案] 十大经典布局之单列布局-通栏居中与中部居中 (06:59) 5-2 [灵活运用-总结十大经典网页布局方案] 十大经典布局之双栏布局 (04:18) 5-3 [灵活运用-总结十大经典网页布局方案] 经典布局之圣杯布局 (06:02) 5-4 [灵活运用-总结十大经典网页布局方案] 十大经典布局之双飞翼布局 (05:37) 5-5 [灵活运用-总结十大经典网页布局方案] 十大经典布局之Grid网格布局深度解析 (20:21) 5-6 [灵活运用-总结十大经典网页布局方案] 十大经典布局之等高布局 (06:06) 5-7 [灵活运用-总结十大经典网页布局方案] 十大经典布局之粘连布局 (07:00) 6-1 [CSS3-过渡与动画] transition-元素的过渡效果 (17:18) 6-2 [CSS3-过渡与动画] 元素变形-位移-缩放-旋转-倾斜 (09:22) 6-3 [CSS3-过渡与动画] 添加关键帧动画 (07:33) 6-4 [CSS3-过渡与动画] 动画实战：手机开机动画效果 (11:51) 6-5 [CSS3-过渡与动画] 实战动画作业：与浏览器拍皮球效果 (10:01) 7-1 [项目实战：戴森官方网站首页] 实战戴森官网项目-建站思路-布局架构 (22:57) 7-2 [项目实战：戴森官方网站首页] 实战戴森官网项目-雪碧图与导航栏的实现 (23:16) 7-3 [项目实战：戴森官方网站首页] 实战戴森官网项目-中部轮播按钮的实现 (17:38)
