# HTML+CSS前端开发零基础教程 · 学习导读

一、课程定位与学习价值

在前端技术飞速迭代的今天，HTML与CSS仍是每一位Web开发者的基本功。本课程专为**零基础学员**设计，从零开始系统讲解网页结构与样式制作的核心技能，帮助学员建立起对前端开发的完整认知框架，为后续学习JavaScript、框架工程化等内容打下坚实基础。

无论你是想转行进入互联网行业，还是希望在现有技术栈上补齐前端短板，这门课程都将是你通往高级前端工程师道路上的**第一块基石**。

二、课程大纲精要

第一章：开启前端之门本章从"什么是网页"这一根本问题出发，引导学员了解Web开发的基本逻辑。课程将详细介绍主流开发工具（如VS Code等）的选择与使用技巧，并重点讲解网页的基本结构——DOCTYPE声明、HTML文档的骨架组成，以及head部分各元数据标签的实际用途。此外，还对网页"分层"的概念进行阐释，帮助学员理解HTML（结构层）、CSS（表现层）与JavaScript（行为层）的职责分工。

第二章：HTML标签深度掌握在建立整体认知后，本章聚焦于HTML常用标签的实战应用。通过丰富的示例，学员将学会如何使用标题、段落、列表、链接、图片等基础标签构建页面骨架，并逐步掌握表单元素、语义化标签等进阶用法，真正做到"懂标签、会组合、能搭建"。

三、学习目标

学完本课程后，你将能够：
- 独立搭建符合标准的HTML页面结构
- 准确选用各类HTML标签表达页面内容语义
- 理解前端开发工具链的基本配置与使用
- 建立对Web三层架构的系统性认知
- 为后续CSS样式学习和前端进阶课程做好充分准备

四、适合人群

- 完全零基础、希望入门前端的初学者
- 有一定编程经验但从未系统学习过HTML/CSS的开发者
- 需要了解前端基础以配合前后端协作的后台开发人员
- 对网页制作感兴趣、希望自主搭建个人网站的学习者

五、学习建议

建议学员在学习过程中**动手优先**：每学完一个知识点，立即在编辑器中敲代码验证效果。前端是一门实践性极强的技术，"看十遍不如写一遍"。同时，建议搭配浏览器开发者工具（F12）观察代码与页面的对应关系，深化理解。

---

> 掌握HTML+CSS，就是掌握了与浏览器对话的语言。从这里出发，前端世界的大门将为你敞开。

课程目录

1-1 [课程介绍、 网页开发工具及网页基本结构的认识] 通往高级前端工程师的学习路线 (04:21)
1-2 [课程介绍、 网页开发工具及网页基本结构的认识] 课程目标与课程内容简介 (02:06)
1-3 [课程介绍、 网页开发工具及网页基本结构的认识] 什么是网页、开发工具选择及基本操作 (10:18)
1-4 [课程介绍、 网页开发工具及网页基本结构的认识] ⽹⻚主要三对标签及<!DOCTYPE>标签作用 (13:17)
1-5 [课程介绍、 网页开发工具及网页基本结构的认识] head内部标签元素详细介绍 (12:57)
1-6 [课程介绍、 网页开发工具及网页基本结构的认识] 网页的分“层”含义及各层的注释写法 (10:37)
2-1 [网页结构层HTML常见标签的使用] 构造页面的html常见标签元素（一） (11:17)
2-2 [网页结构层HTML常见标签的使用] 构造页面的html常见标签元素（二） (06:53)
2-3 [网页结构层HTML常见标签的使用] 构造页面的html常见标签元素（三） (09:07)
2-4 [网页结构层HTML常见标签的使用] 构造页面的html常见标签元素（四）——input标签 (11:48)
2-5 [网页结构层HTML常见标签的使用] 构造页面的html常见标签元素（五） (12:00)
2-6 [网页结构层HTML常见标签的使用] Html页面常见标签元素——表格（table） (10:49)
2-7 [网页结构层HTML常见标签的使用] Html页面常见标签元素——表单 (12:29)
2-8 [网页结构层HTML常见标签的使用] ⾏内元素、块级元素和⾏内块级元素的区别 (18:13)
3-1 [网页表现层CSS基础与使用] CSS是什么 (07:42)
3-2 [网页表现层CSS基础与使用] CSS样式的三种写法 (10:46)
3-3 [网页表现层CSS基础与使用] 颜色与背景 (19:34)
3-4 [网页表现层CSS基础与使用] 字体 (22:47)
3-5 [网页表现层CSS基础与使用] 文本 (12:31)
3-6 [网页表现层CSS基础与使用] 链接 (15:09)
3-7 [网页表现层CSS基础与使用] 元素的分类与标识（class和id） (09:55)
3-8 [网页表现层CSS基础与使用] 组织元素（span和div） (08:31)
3-9 [网页表现层CSS基础与使用] 盒状模型 (12:51)
3-10 [网页表现层CSS基础与使用] 外边距和内边距 (17:51)
3-11 [网页表现层CSS基础与使用] 边框 (08:43)
3-12 [网页表现层CSS基础与使用] 高度和宽度 (05:37)
3-13 [网页表现层CSS基础与使用] 浮动元素（float） (21:35)
3-14 [网页表现层CSS基础与使用] 元素的定位 (22:48)
3-15 [网页表现层CSS基础与使用] 用z-index进行层次堆叠 (20:34)
3-16 [网页表现层CSS基础与使用] css选择器的优先级 (09:28)
3-17 [网页表现层CSS基础与使用] CSS应用举例——导航条设计 (08:15)
3-18 [网页表现层CSS基础与使用] CSS应用举例——常见两栏、三栏自适应布局 (20:28)
3-19 [网页表现层CSS基础与使用] 常⻅⽔平居中垂直居中实现⽅式 (16:38)
4-1 [HTML+CSS静态页面项目实战（移动端项目）] 项目首页框架分析 (05:21)
4-2 [HTML+CSS静态页面项目实战（移动端项目）] 头部设计与实现 (28:36)
4-3 [HTML+CSS静态页面项目实战（移动端项目）] 分类导航等设计与实现 (14:15)
4-4 [HTML+CSS静态页面项目实战（移动端项目）] 中间部分设计与实现1 (17:04)
4-5 [HTML+CSS静态页面项目实战（移动端项目）] 中间部分设计与实现2——宝贝展示 (30:19)
4-6 [HTML+CSS静态页面项目实战（移动端项目）] 底部导航的设计与实现 (13:49)

HTML+CSS前端开发零基础教程