补全前端地基：HTML 结构与 CSS 样式的系统搭建

很多初学者在尝试做网页时，往往陷入两个极端：要么只会写死板的黑色文字，要么试图靠 CSS 硬抠每一个像素却毫无章法。这门课解决的核心问题，正是「如何构建语义化且美观的页面结构」。它不是零散的语法点堆砌，而是从 HTML5 标准标签入手，建立对 Web 文档树的正确认知，再引入 CSS 层叠机制，让你学会如何用样式控制布局。适合完全没有前端基础、或者之前只学过几行零散代码的转岗学习者。如果你连表单怎么提交、图片为什么变形都搞不清楚，这里就是你的起点。

建议学习时不要跳过前十一章的 HTML 部分，尤其是表单和列表，这是后续所有交互开发的基础。很多同学急于求成直接看 CSS，结果连 `

` 的属性都不懂，导致后面学 JavaScript 时完全懵圈。课程先从回顾开始，接着详细讲解 a 标签、img、表格、form 表单以及音视频标签，这部分内容看似基础，却是每个网页不可或缺的骨架。特别要注意第 13 到 15 课新增的 H5 属性和 HTML 属性分类，这是现代开发的标准规范，老教程里常常忽略这些细节。只有把 HTML 这块硬骨头啃下来，后面的 CSS 学习才会事半功倍。

掌握样式层叠与选择器，实现从结构到表现的分离

进入 CSS 阶段后，核心难点在于理解「层叠」和「优先级」。课程专门用了一节来讲样式优先级（第 17 课），这是新手最容易踩坑的地方——为什么写了样式却不生效？通常是因为选择器权重搞错了。你需要熟练掌握四种 CSS 引入方式（第 16 课），并根据项目场景灵活选用。更重要的是选择器（第 18 课），这是 CSS 的灵魂，只有搞清楚类选择器、ID 选择器、元素选择器的组合逻辑，你才能精准控制页面的每一个角落。

此外，课程还引入了 Bootstrap 框架（第 19 课），这是前端开发的工业级工具。虽然基础课重在原理，但了解 Bootstrap 的表格和图片按钮用法，能让你迅速接触到企业级开发的规范。学完这门课后，你应该能够独立创建一个包含导航栏、内容区、表单交互和多媒体展示的标准静态网页，并能清晰解释每条 CSS 规则生效的原因。配合课程资料中的任务练习，务必亲手敲代码而非仅仅观看视频，因为布局的问题只有在调试中才能真正被记住。资料的完整性在于覆盖了从基础标签到框架应用的完整闭环，缺什么补什么，先把地基打牢，再谈进阶。

课程目录

1 回顾 (09:08)
2 HTML介绍以及入门语法 (31:30)
3 a标签讲解 (11:20)
4 有序列表以及无序列表讲解 (04:11)
5 img图片标签 (07:14)
6 表格标签 (13:23)
7 form表单讲解 (33:10)
8 音视频的播放 (05:55)
9 格式化相关标签 (02:49)
10 进度控制相关标签 (02:39)
11 总结 (04:25)
12 回顾以及任务介绍 (10:11)
13 新增的表单属性 (07:17)
14 h5新增的属性讲解 (07:07)
15 HTML属性的分类 (03:09)
16 css样式引入的4种不同方式 (17:28)
17 样式优先级 (03:33)
18 选择器讲解 (23:42)
19 bootstrap概述以及表格 (17:55)
20 图片按钮以及标签 (09:19)
21 巨幕+缩略图+媒体对象+分页标签 (22:27)