Skip to content

核心进阶-Web前端

学到这一阶段,你会开始真正接触网页长什么样、网页为什么能显示出来、网页为什么能和用户交互。

很多只学 Python 的初学者,会觉得前端和自己没关系。但如果你后面要学 Django、做网站、做后台管理系统、理解爬虫抓到的页面结构,那么前端知识就绕不过去。

这一阶段不是要把你培养成专业前端工程师,而是要让你建立一个足够扎实的网页基础,让你以后在这些场景里不会发懵:

  • 看懂一个 HTML 页面结构
  • 修改页面内容和样式
  • 理解按钮点击、表单提交、页面交互
  • 能看懂 Django 模板里写的前端代码
  • 能看懂爬虫要解析的网页结构

本阶段目标

  • 理解网页由什么组成
  • 学会使用 HTML 搭建页面结构
  • 学会使用 CSS 控制页面样式
  • 学会使用 JavaScript 为页面添加交互
  • 理解 jQuery 和 Ajax 在传统项目中的常见用法
  • 为后面的 Django 和爬虫学习打基础

你为什么必须学前端

很多零基础同学一看到 HTMLCSSJavaScript 就会紧张,觉得这像是另一个世界。

实际上,你完全可以把它理解得简单一点:

  • HTML 决定页面里“有什么”
  • CSS 决定页面“长什么样”
  • JavaScript 决定页面“会发生什么交互”

举个最直观的例子:

  • 一个登录页上有标题、输入框、按钮,这部分是 HTML
  • 标题颜色、按钮大小、输入框边框,这部分是 CSS
  • 点击按钮后检查输入是否为空,再决定要不要提交,这部分是 JavaScript

只要你从这个角度理解,前端并不神秘。

前端在后续阶段里的作用

这一点你一定要提前想清楚,否则你会觉得前端学得很散。

在 Django 里

你后面写 Django 时,会碰到模板页面、表单提交、数据展示、按钮点击、Ajax 请求。这些都离不开前端。

在爬虫里

你做网页解析时,本质上就是在分析 HTML 结构。有些页面还要研究 JavaScript 动态加载数据,所以你也得懂一点前端。

在自己做项目时

就算你只想做后台,也不可能永远不碰页面。你至少要能改基础样式、调页面结构、看懂浏览器里的元素。

推荐学习顺序

这一阶段建议按下面顺序学,不要乱跳:

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery与前后端交互

这个顺序不是随便排的,而是有依赖关系:

  • 没有 HTML,就没有页面结构
  • 没有 CSS,页面虽然能显示,但很难看
  • 没有 JavaScript,页面只能“展示”,很难“交互”
  • jQuery 和 Ajax 则是建立在前面基础上的进一步应用

每一部分要学到什么程度

HTML

你至少要做到:

  • 能独立写一个基础页面
  • 能看懂标题、段落、列表、表格、表单
  • 能看懂 divspan、链接、图片这些标签
  • 能看懂一个页面的层级结构

CSS

你至少要做到:

  • 能给页面加颜色、边框、字体和背景
  • 能理解盒模型
  • 能做基础布局
  • 能看懂选择器是怎么定位元素的

JavaScript

你至少要做到:

  • 能写变量、条件、循环、函数
  • 能获取页面元素
  • 能修改元素内容和样式
  • 能给按钮绑定点击事件
  • 能做简单表单校验

jQuery 与 Ajax

你至少要做到:

  • 知道 jQuery 是什么
  • 能用 jQuery 选中元素并做简单操作
  • 能理解 Ajax 的作用
  • 能看懂前端是如何向后端发送请求的

一个最小网页到底是怎么工作的

为了让你对整个阶段有整体认识,我们先用一句话讲清楚网页运行过程:

  1. 浏览器读取 HTML
  2. 浏览器根据 HTML 生成页面结构
  3. 浏览器读取 CSS,给页面加样式
  4. 浏览器执行 JavaScript,为页面添加交互能力
  5. 如果需要数据,JavaScript 再向后端发请求

所以你后面学的这几门内容,不是互相独立的,而是共同组成一个网页。

学这一阶段时最容易犯的错

1. 只背标签,不理解结构

HTML 最重要的不是背多少标签,而是理解页面由哪些区域组成,它们怎么嵌套。

2. 只会照抄样式,不知道为什么生效

CSS 初学时很容易觉得乱,所以你要特别关注:

  • 选择器选中了谁
  • 样式写在谁身上
  • 盒模型怎么影响大小和间距

3. 把 JavaScript 当成“浏览器版 Python”

JavaScript 和 Python 有相似之处,但它不是 Python 的翻版。它更多是在浏览器环境里操作页面和处理交互。

4. 一上来就追求炫酷效果

零基础阶段先别追动画库、组件库、复杂框架。先把原生 HTML、CSS、JavaScript 打牢。

学习建议

这一阶段最有效的学习方式不是只看文档,而是边看边写。

建议你为自己准备一个 demo.html 文件,然后在里面不断实验:

  • 加一个标题
  • 加一个列表
  • 改一个颜色
  • 绑定一个点击事件
  • 做一个简单登录框

你只有不断改动页面,才能真正理解这些代码的作用。

本阶段小结

这一阶段的核心任务,是让你建立最基本的网页认知。

你不需要一下子把自己逼成前端开发者,但你必须做到:

  • 看得懂网页结构
  • 改得动基础页面
  • 理解页面为什么会响应用户操作

一旦这三件事建立起来,后面无论是学 Django 还是学爬虫,你都会轻松很多。因为你不再是“面对网页只会发呆”,而是开始真正理解网页这个载体本身。

Built with VitePress.