# 课程导读：Python系列视频（二）——Python前端基础 在 Web 开发的广阔世界里，Python 常常被视为后端逻辑的王者，但一个优秀的 Python 开发者，绝不能对浏览器那方寸之间的“前端世界”视而不见。本课程《Python系列视频（二）——Python前端基础》正是为此而设。它并非试图将您培养为专职的前端工程师，而是旨在为您搭建一座从 Python 后端通向浏览器前端的桥梁，让您能够独立完成简单的前后端交互，或在 Django、Flask 等框架中更从容地驾驭模板与静态资源。 ## 为什么 Python 程序员需要学前端？ 许多初学者容易陷入一个误区：认为只要写好 Python 代码即可。然而，现实中的 Web 项目往往是前后端交织的复杂系统。当您使用 Django 渲染页面、用 Flask 返回 HTML、或者通过 FastAPI 提供 API 接口并配合前端调用时，若不懂 HTML/CSS 的基本结构，便难以理解数据如何在视图中呈现，也难以排查样式错位或布局混乱的问题。此外，掌握前端基础能帮助您更好地与前端团队协作，甚至在独立开发小型项目时实现全流程闭环。 ## 课程内容深度解析 本课程分为两大模块，循序渐进地引导您入门： **第一部分：HTML & CSS 基础（第 1-15 讲）** 这是构建 Web 页面的基石。课程从最原始的 HTML 标签讲起，涵盖文档结构、文本格式化、列表、链接与图像嵌入等核心概念。您将会学习如何使用语义化标签（如 `
`, `
`, `
`）提升代码的可读性与 SEO 友好度。紧接着，CSS 部分将深入讲解样式表的作用机制、选择器优先级、盒模型原理以及常见的布局技巧（如 Flexbox 和 Grid 的基础应用）。这一阶段的目标是让您能够徒手写出结构清晰、样式美观的静态网页，不再依赖现成的模板。 **第二部分：HTML & CSS 提升（第 2-1 及后续讲）** 在夯实基础之后，课程进入进阶提升阶段。这里将探讨更复杂的交互样式、响应式设计的基本思路（让网页适应不同屏幕尺寸），以及现代前端开发中常用的最佳实践。您将了解到如何优化页面加载性能，如何处理跨浏览器兼容性问题，以及如何利用开发者工具进行调试。这部分内容虽然篇幅相对精简，但直击痛点，旨在帮您跳出“只会写标签”的层面，迈向“能解决实际问题”的行者。 ## 学习建议与预期收获 建议学习者以“动手实践”为核心。每听完一节课，务必打开编辑器，对照演示代码亲自敲击每一行，甚至尝试修改参数观察效果变化。前端是一门“所见即所得”的技术，眼过千遍不如手过一遍。 完成本课后，您将能够： 1. 熟练掌握 HTML5 与 CSS3 的核心语法，独立构建结构合理、样式规范的静态页面； 2. 理解浏览器如何解析和渲染页面，为后续深入学习 JavaScript 或嵌入 Python 模板引擎打下坚实基础； 3. 具备基本的页面调试与问题排查能力，不再对前端代码感到畏惧。 请记住，前端世界日新月异，但根基永不过时。本课程为您奠定的坚实基础，将是您在 Python Web 开发道路上走得更远、更稳的关键一步。

课程目录

课程目录101 集
  • 1-1 [html&css基础] Html&css基础 -1 (21:00).mp4
  • 1-2 [html&css基础] Html&css基础 -2 (22:11).mp4
  • 1-3 [html&css基础] Html&css基础 -3 (25:23).mp4
  • 1-4 [html&css基础] Html&css基础 -4 (24:48).mp4
  • 1-5 [html&css基础] Html&css基础 -5 (17:25).mp4
  • 1-6 [html&css基础] Html&css基础 -6 (19:24).mp4
  • 1-7 [html&css基础] Html&css基础 -7 (25:19).mp4
  • 1-8 [html&css基础] Html&css基础 -8 (24:27).mp4
  • 1-9 [html&css基础] Html&css基础 -9 (25:26).mp4
  • 1-10 [html&css基础] Html&css基础 -10 (27:31).mp4
  • 1-11 [html&css基础] Html&css基础 -11 (25:23).mp4
  • 1-12 [html&css基础] Html&css基础 -12 (20:51).mp4
  • 1-13 [html&css基础] Html&css基础 -13 (17:35).mp4
  • 1-14 [html&css基础] Html&css基础 -14 (19:50).mp4
  • 1-15 [html&css基础] Html&css基础 -15 (24:11).mp4
  • 2-1 [html&css提升] html&css提升-1 (24:34).mp4
  • 2-2 [html&css提升] html&css提升-2 (22:01).mp4
  • 2-3 [html&css提升] html&css提升-3 (29:56).mp4
  • 2-4 [html&css提升] html&css提升-4 (25:16).mp4
  • 2-5 [html&css提升] html&css提升-5 (33:06).mp4
  • 2-6 [html&css提升] html&css提升-6 (19:38).mp4
  • 2-7 [html&css提升] html&css提升-7 (23:37).mp4
  • 2-8 [html&css提升] html&css提升-8 (22:26).mp4
  • 2-9 [html&css提升] html&css提升-9 (23:12).mp4
  • 2-10 [html&css提升] html&css提升-10 (21:21).mp4
  • 2-11 [html&css提升] html&css提升-11 (24:22).mp4
  • 2-12 [html&css提升] html&css提升-12 (23:33).mp4
  • 3-1 [JavaScript基础] JavaScript基础-1 (18:31).mp4
  • 3-2 [JavaScript基础] JavaScript基础-2 (25:21).mp4
  • 3-3 [JavaScript基础] JavaScript基础-3 (24:01).mp4
  • 3-4 [JavaScript基础] JavaScript基础-4 (21:49).mp4
  • 3-5 [JavaScript基础] JavaScript基础-5 (30:26).mp4
  • 3-6 [JavaScript基础] JavaScript基础-6 (26:20).mp4
  • 3-7 [JavaScript基础] JavaScript基础-7 (22:26).mp4
  • 3-8 [JavaScript基础] JavaScript基础-8 (26:55).mp4
  • 3-9 [JavaScript基础] JavaScript基础-9 (21:20).mp4
  • 3-10 [JavaScript基础] JavaScript基础-10 (24:47).mp4
  • 4-1 [JavaScript提升] JavaScript提升-1 (23:38).mp4
  • 4-2 [JavaScript提升] JavaScript提升-2 (22:42).mp4
  • 4-3 [JavaScript提升] JavaScript提升-3 (23:01).mp4
  • 4-4 [JavaScript提升] JavaScript提升-4 (24:35).mp4
  • 4-5 [JavaScript提升] JavaScript提升-5 (26:19).mp4
  • 4-6 [JavaScript提升] JavaScript提升-6 (26:12).mp4
  • 4-7 [JavaScript提升] JavaScript提升-7 (26:22).mp4
  • 4-8 [JavaScript提升] JavaScript提升-8 (25:23).mp4
  • 4-9 [JavaScript提升] JavaScript提升-9 (28:12).mp4
  • 5-1 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-1 (24:16).mp4
  • 5-2 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-2 (20:48).mp4
  • 5-3 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-3 (22:25).mp4
  • 5-4 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-4 (23:00).mp4
  • 5-5 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-5 (17:58).mp4
  • 5-6 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-6 (01:05).mp4
  • 5-7 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-7 (25:21).mp4
  • 5-8 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-8 (26:43).mp4
  • 5-9 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-9 (24:02).mp4
  • 5-10 [JavaScript进阶与轮播和飞机大战坦克] JavaScript进阶与轮播和飞机大战坦克-10 (23:10).mp4
  • 6-1 [Jquery基础] Jquery基础-1 (25:30).mp4
  • 6-2 [Jquery基础] Jquery基础-2 (24:08).mp4
  • 6-3 [Jquery基础] Jquery基础-3 (28:46).mp4
  • 6-4 [Jquery基础] Jquery基础-4 (30:28).mp4
  • 6-5 [Jquery基础] Jquery基础-5 (22:15).mp4
  • 6-6 [Jquery基础] Jquery基础-6 (27:09).mp4
  • 6-7 [Jquery基础] Jquery基础-7 (23:49).mp4
  • 6-8 [Jquery基础] Jquery基础-8 (20:15).mp4
  • 7-1 [JQuery提升] JQuery提升-1 (23:48).mp4
  • 7-2 [JQuery提升] JQuery提升-2 (19:55).mp4
  • 7-3 [JQuery提升] JQuery提升-3 (17:30).mp4
  • 7-4 [JQuery提升] JQuery提升-4 (27:31).mp4
  • 7-5 [JQuery提升] JQuery提升-5 (22:53).mp4
  • 7-6 [JQuery提升] JQuery提升-6 (07:08).mp4
  • 7-7 [JQuery提升] JQuery提升-7 (23:56).mp4
  • 7-8 [JQuery提升] JQuery提升-8 (18:36).mp4
  • 7-9 [JQuery提升] JQuery提升-9 (28:57).mp4
  • 8-1 [H5c3基础] H5c3基础-1 (23:43).mp4
  • 8-2 [H5c3基础] H5c3基础-2 (21:41).mp4
  • 8-3 [H5c3基础] H5c3基础-3 (18:06).mp4
  • 8-4 [H5c3基础] H5c3基础-4 (20:34).mp4
  • 8-5 [H5c3基础] H5c3基础-5 (19:24).mp4
  • 8-6 [H5c3基础] H5c3基础-6 (29:15).mp4
  • 8-7 [H5c3基础] H5c3基础-7 (25:34).mp4
  • 8-8 [H5c3基础] H5c3基础-8 (21:16).mp4
  • 8-9 [H5c3基础] H5c3基础-9 (16:09).mp4
  • 8-10 [H5c3基础] H5c3基础-10 (26:38).mp4
  • 9-1 [H5c3提升] H5c3提升-1 (30:24).mp4
  • 9-2 [H5c3提升] H5c3提升-2 (29:20).mp4
  • 9-3 [H5c3提升] H5c3提升-3 (26:28).mp4
  • 9-4 [H5c3提升] H5c3提升-4 (19:54).mp4
  • 9-5 [H5c3提升] H5c3提升-5 (27:05).mp4
  • 9-6 [H5c3提升] H5c3提升-6 (03:51).mp4
  • 9-7 [H5c3提升] H5c3提升-7 (32:51).mp4
  • 9-8 [H5c3提升] H5c3提升-8 (15:12).mp4
  • 9-9 [H5c3提升] H5c3提升-9 (09:15).mp4
  • 9-10 [H5c3提升] H5c3提升-10 (13:48).mp4
  • 10-1 [Bootstrap与Photoshop简单使用] bootstrap与Photoshop简单使用-1 (26:07).mp4
  • 10-2 [Bootstrap与Photoshop简单使用] bootstrap与Photoshop简单使用-2 (30:39).mp4
  • 10-3 [Bootstrap与Photoshop简单使用] bootstrap与Photoshop简单使用-3 (15:59).mp4
  • 10-4 [Bootstrap与Photoshop简单使用] bootstrap与Photoshop简单使用-4 (23:30).mp4
  • 10-5 [Bootstrap与Photoshop简单使用] bootstrap与Photoshop简单使用-5 (27:27).mp4
  • 10-6 [Bootstrap与Photoshop简单使用] bootstrap与Photoshop简单使用-6 (24:23).mp4
  • 10-7 [Bootstrap与Photoshop简单使用] bootstrap与Photoshop简单使用-7 (32:53).mp4
  • 10-8 [Bootstrap与Photoshop简单使用] bootstrap与Photoshop简单使用-8 (33:57).mp4